하루일문

Sass(Syntanctically Awesome StyleSheets) CSS의 유지보수 + 코드 복잡도의 단점을 극복하기위해 만든 CSS 확장 언어 CSS 전처리기 \=> 코드 수정, 조각 재사용 편리 .Sass에 맞게 코드를 작성 Sass 전처리기를 걸처 .css로 재탄생 (컴파일) 왜 쓸까? 간결하고 빠르게 코드를 작성할 수 있기 때문 SCSS는 Sass의 하위개념 .scss에는 css 구문을 전부 호환! 명령어 인터페이스 sass 설치 : npm install -g sass 버전 확인 : sass --version 컴파일 : sass 폴더/파일.scss:폴더/파일.css 라이브 싸스 컴파일러랑 다른점? 라이브! 라이브모드를 하고싶다면 : sass --watch 폴더/파일.scss:폴더/파일.cs..

## @layer 그룹화 & 우선순위를 정하기 - 레이어는 선언 순서에 따라 스타일이 적용되며, 늦게 선언될수록 높은 우선순위를 갖는다 - 순서를 미리 정의하는것도 가능하다 ```css @layer layer_1 { .text { color: red; font-weight: 700; } } @layer layer_2 { .text { color: blue; } } @layer layer_3 { .text { color: orange; font-weight: 400; } } ``` -> 3, 2, 1 ```css @layer layer_3, layer_1, layer_2 ``` 추가시 2, 1, 3 - 이름 재사용가능 (같은 이름 시 위에 추가된다는 개념) - 익명 / url로 외부스타일의 레이어 생성가능..

#wrapper{ height: auto; min-height: calc(100vh - 350px); } {% block content %} {% endblock content %} # : id 값을 지정 calc() : 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종 값이 됩니다. 표현식은 단순 계산식은 무엇이든 가능하며, 표준 연산자 우선순위를 따릅니다. - 0으로 나누면 HTML 구문분석기에서 오류가 발생

- 클릭하면 숨긴 리스트가 보이게 지역 서울 인천 경기 강원 충남 세종 대전 충북 전북 전남 광주 경북 경남 대구 울산 부산 제주 const regionButton = document.querySelector('#region-button') const regionList = document.querySelector('#region-list') const regions = regionList.querySelectorAll('li') const arrow = document.querySelector('#arrow') regionButton.addEventListener('click', () => { regionList.classList.toggle('hidden') if (regionList.classLis..