분류 전체보기

[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는 코드를 작성할 때 중괄호를..

2주차: flex, grid

2주차 수업은 flex, grid와 scss를 간단히 배웠다. flex는 중심축과 반대축이 있다. 중심축을 중(j)심의 j라고 외워서 justify-content 사용하는 축 반대축을 바안(a)대의 a라고 외워서 align-items 사용하는 축이라고 외우면 편하다. flex의 특징 (1) float를 사용해서 아이템을 정렬하고 아이템에 패딩을 줄 경우 box-sizing: border-box를 쓰지 않으면 밑으로 떨어졌겠지만 flex는 무조건 한 줄에 들어오기 때문에 (flex-wrap: no-wrap이 기본이기 때문) box-sizing: border-box를 쓰지 않아도 떨어지지 않는다. (2) flex의 아이템들은 높이를 공유한다. align-items: strech가 기본 값이기 때문에 따로 높..

[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를 써주기..