| 부모선택자 참조 - & 플레이스홀더로 특수문자(&)를 사용하여 부모 선택자를 참조 | 플레이스홀더 - 빠져있는것을 대신하여 기호나 텍스트 - CSS에선 부모 참조 선택자를 대신하는 기호 (&) EX) 메뉴 ul태그에서 선택한 li 태그에 클래스 .active를 추가 Menu1 Menu2 Menu3 Menu4 ul{ list-style: none; padding: 0; li{ margin: 6px 0px; &.active{ color: red; } } } >>>>> &.active 는 css에선 li.active 와 같음 특정 클래스 안에서 스타일 덮어쓰기할 때 유용 EX) 같은 contents라는 div에 글씨(p)는 핑크색이지만, 특정 클래스(cafe)가 있을 경우 글씨를 초록색으로 바꿔준다. - ..

| 네임스페이스 속성 중첩 background, font 등 공통 네임 스페이스 속성을 중첩 .html 간단한 div 안에 div는 아이콘(사진)과 닉네임을 출력 Nickname .scss 공통 네임스페이스 속성을 중첩하여 스타일 적용 #mypage{ div.icon{ width: 8rem; height: 8rem; background: { image: url('~~~'); size:86rem; repeat: no-repeat; position: center; } } p{ margin: 0; font: { size: 2em; weight: bold; } } }

| 중첩규칙 [Nesting] 선택자를 선언문에서 계속 반복해서 쓰지않고, 선언문 안에 중첩하여 사용 SCSS를 중첩하여 사용하면 Sass는 선택자 전부를 생성하여 CSS에 반영 ex) SCSS #heder{ div{ button{ .. } } } ex) CSS #heder div button{ .. } #header{ height: 60px; position: fixed; top: 0; left: 0; right: 0; background-color: lightgray; div{ position: absolute; float: left; right: 8px; top: 6px; p{ color: gray; display: inline-block; } button{ padding: 6px 8px; bord..

| SASS란 무엇인가 - Syntactically Awesome Stylesheets - Sass는 CSS의 전처리기 Sass, LESS, Stylus 와 같은 전처리기 언어 코드를 CSS코드로 변환해주는 프로그램 - 웹 프레임워크 플러그인을 이용하여 Sass문법을 CSS파일로 컴파일 | SASS 문법 - SCSS가 최신 문법 ( .scss 확장자 사용) - 초기 Sass문법은 들여쓰기를 한다. (루비,파이선 사용했던 사람에겐 더 친숙) /*SCSS*/ $pink: #cd6799; div{ border: 1px solid $pink; p{ color: $pink; } } /*Sass문법*/ $pink: #cd6799; div border: 1px solid $pink; p color: $pink; 그 ..

상단 (헤더) 영역을 항상 고정 position fixed 로 영역을 잡는다. | HTML 상단 항시 고정 | CSS overflow: auto; 내용이 많아질 때 스크롤 허용 body, h1{ margin: 0; } header{ position: fixed; left: 0; right: 0; top: 0; height: 4rem; background: lightgray; line-height: 4rem; text-align: center; } #contents{ position: fixed; top: 4rem; left: 0; right: 0; bottom: 0; overflow: auto; } | JS (단순 내용을 1~100까지 출력) const arr = []; for(let i=1; i

웹앱 개발할 때, 글씨 크기가 웹에선 적당했지만, 모바일에선 너무 작았던 문제를 해결합니다. 화면 크기에 따라 자동적으로 화면이 최적화되게 지원합니다. 웹앱/반응형 개발하다가 알게된 meta 태그 'viewport' 입니다. 간단한 HTML 파일을 만든다. Header Body | 웹 화면 viewport 유무에 따른 차이가 없습니다. | 모바일 여기서 meta 태그 viewport 가 있고 없고의 차이는 하단 이미지를 참고합니다. - 크롬 iphone6/7/8 (375*667)로 확인한 결과입니다. | 모바일로 최적화