![]()
@import 보다 @use를 사용해야 하는 이유 import는 모든 변수, 믹스인 및 함수를 전역적으로 액세스 할 수 있도록 합니다. 이로 인해 어떠한 것이 어디에 정의되었는지 위치를 말하기 어렵습니다. 모든 것이 전역적이기 때문에 라이브러리는 이를 충돌을 피하기 위해 모든 멤버에 접두사를 붙여야 합니다. @extend 규칙도 전역적이므로 어떤 스타일 규칙이 확장될지 예측하기 어렵습니다. 각 스타일 시트는 @imported 할 때마다 실행되고 css가 내보내지므로 컴파일 시간이 늘어나고 출력이 부풀려집니다. 새로운 모듈 시스템과 @use 규칙은 이러한 모든 문제를 해결합니다. @import에서 @use로 변환하기 단일 페이지에서의 작업 중 예시입니다. 1. 폴더 안에 _index.scss를 추가해 준다..
![]()
scss 프로젝트를 구성하는 효과적인 모듈식 방법 중 하나가 7-1 패턴이다. 7-1은 7개의 폴더와 하나의 파일을 의미한다. sass/ | |– abstracts/ | |– _variables.scss # Sass Variables | |– _mixins.scss # Sass Mixins | |– vendors/ | |– _bootstrap.scss # Bootstrap | |– base/ | |– _reset.scss # Reset/normalize | |– _typography.scss # Typography rules | |– layout/ | |– _navigation.scss # Navigation | |– _grid.scss # Grid system | |– _header.scss # Hea..
![]()
요소 아이템을 안보이게 하는 두가지 방법 display: none - block 해당 공간까지 삭제 - 요소를 완전히 제거하여 레이아웃 공간을 차지하지 않게됨 visibility: hidden - visible 보이지만 않고 공간은 그대로 - width와 height 값이 있다면 그만큼 공간은 존재 display = '' 하면 디폴트 값이 쓰여지게 되는데 이때 span 태그 안에 있으면 inline, div 태그 안에 있으면 block 이 쓰여짐 visibility hidden은 어떠한 클릭이벤트 발생시 레이아웃에 영향을 미치고 싶지 않을경우에 쓰기도 했다.
