SASS가 뭘까?

Syntacically Awesome Style Sheets의 약자로

CSS pre-processor로서, 복잡한 작업을 쉽게 할수 있게 해주고, 코드의 재활용성, 코드의 가독성, 유지보수를 쉽게 해주는 것이다.

Sass에서는 두 가지의 확장자 (.scss/.sass)를 지원 scss가 더 많은 문법 지원

SASS 사용 이점

• 계층적으로 코드를 작성할 수 있어 코드가 보기 편함
• css 속성의 변수 작성 및 조건문 사용 가능

특징

브라우저는 표준 css만 읽을 수 있어, sass 문법에 맞는 코드를 작성하고 css로 트랜스 컴파일링해야함

(얘를 자동으로 해주는게 live compiler인가?)

yarn add node-sass > sass를 css로 변환해주는 역할

반응형은 어떻게?

viewport를 건들여서 진행한다.

html에 이 태그를 말한다.

미디어쿼리를 이용하자.

미디어 쿼리는 반응형을 위한 기본이자 핵심임.

미디어 쿼리

1) CSS 파일 내에 직접 작성

@media (min-width:768px) {}

2) 태그에 media 속성을 설정

<link rel="stylesheet" media="all and (min-width:1200px)" href="desktop.css" >
<link rel="stylesheet" media="all and (min-width:768px) and (max-width:1199px)" href="laptop.css" >

거의 1번 방법을 사용 두 번째 방법처럼 CSS를 분리해 두더라도, 브라우저는 일단 모든 CSS 파일을 다운해버림

HTTP 요청이 많아지면 성능이 그만큼 저하되므로, CSS 파일 내에서 @media로 분리하는 것을 추천한다.

미디어 유형 3가지

• all(모든 디바이스), print, screen(화면 대상)

논리 연산자

• and, not, comma(or), only(미디어 쿼리 지원 브라우저만 적용)

특성

• width(뷰 포트 너비), height(높이), aspect-ratio(가로세로비율), orientation(방향)

좀 더 세밀한 css 관리

(단, vw와 vh는 IE9부터 지원하는 속성)

1. vw,vh 활용

   1vw 는 뷰포트의 1%를 말한다.

2. calc 와 결합
   컨텐츠 영역 높이를 '헤더를 제외한 나머지 높이 전체', height: calc(100vh - 50px);
   (헤더영역 높이가 50px이라 가정)

3. vmin, vmax 활용
   vmin : 더 작은 것, vmax : 더 큰 것

4. html { font-size: 62.5%; } 를 이용해 나머지 요소들을 rem으로 다루자 (여기서 1rem = 10px)

참고

https://nykim.work/84