Programming/CSS

[Sass] Sass 작성 규칙

Sass 작성 규칙을 익히려면 아무래도 따로 정리가 필요할 것 같아서 정리해보는 글 인코딩 windows 환경에서 컴파일할 때 오류가 발생할 수 있으므로 모든 scss 파일에 charset을 선언한다. 컴파일 후, charset 선언은 하나만 남게 되므로 여러 파일에서 작성해도 문제없다. @charset 선언 전에 공백에 없도록 주의한다. @charset "UTF-8" header { background-color: #000; } 중첩 최대 3뎁스 중첩까지 사용을 권장한다. (셀렉터의 갯수가 아닌 scss 코드 상의 중첩) 3뎁스가 넘어갈 경우 하위연결자나 별도의 모듈로 뽑아낸다. 미디어 쿼리의 중괄호는 중첩 수에 포함시키지 않는다. header { h1 { a {} } .gnb {} } 들여쓰기 중첩마..

[Sass] CSS 전처리기 Sass

CSS 전처리기란? CSS는 프로젝트 규모가 커지면 쉽게 지저분해지고 유지보수가 어려워지는 단점이 있다. CSS 전처리기는 이러한 CSS의 한계를 보완하기 위해 자신만의 특별한 문법을 갖고 CSS를 생성하는 프로그램이다. 메타언어로서 추가 기능과 도구를 제공하여 CSS 구문을 개선한다. 대표적인 전처리기로는 Sass, LESS, Stylus 등이 있다. Sass 그리고 SCSS Sass: Syntactically Awesome StyleSheet SCSS: Sassy SCC CSS 전처리기라고 하면 대표적으로 Sass에 대해서 들었을텐데 그 때 꼭 같이 듣게 되는 것이 SCSS이다. Sass는 들여쓰기 감지를 핵심 특성으로 갖는 표기법과 전처리기 두 가지를 의미한다. Sass는 코드를 작성할 때 중괄호를..

[CSS] CSS Flex에 대해 알아보자

flex는 행과 열 형태로 배치하는 일차원 레이아웃 배치 속성이다. 기존에 사용하던 float이나 inline-block을 활용해서 레이아웃을 만드는 것보다 편리한 기능들을 제공한다. flex 레이아웃은 flex container라고 불리는 부모요소와 flex item이라 불리는 복수의 자식요소로 구성된다. item1 item2 flex의 속성들은 flex 컨테이너(부모요소)에 적용하는 속성 flex 아이템(자식요소)에 적용하는 속성 2가지로 나뉜다. 1. 컨테이너에 적용하는 속성들 1.1 display: flex; display: flex | inline-flex flex를 사용하기 위해서 flex container에 항상 써줘야 하는 속성이다. flex : 컨테이너에 display: flex를 써주기..