[포스코x코딩온] 웹개발자 입문 과정 2주차 회고-10 | CSS 반응형

1. 반응형 vs 적응형

 - 반응형이란? 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되는 웹페이지이다.

 - 적응형이란? pc용 사이트와 모바일용 사이트를 별도로 제공하는 방식을 말한다.

 

2. 반응형 웹을 위한 CSS의 Media query

  -  Media query란? 반응형 레이아웃을 구성하게 해주는 CSS문법이다.

  - 사용 방법 

@media <미디어 유형> and (미디어 조건) {}

  (1) 미디어 유형 : all(모든 미디어 장치), screen(화면을 출력하는 디스플레이가 있는 기기), print(인쇄 화면)

  (2) 미디어 조건 : 

    A.width : 뷰포트 너비 - min-width/  max-width

    B.height: 뷰포트 높이  - min-height/ max-height

    C.orientation: 가로/세로 비율 - landscape(가로)/ portrait(세로)

  (3) 동작 예시 :

     backgound-color, display, text-align

 

+ CSS 변수란?

반복되게 사용되는 경우 미리 지정하여 여러 곳에서 사용할 수 있도록 함

:root{
	--main-color: #black;  
}

.test {
	color: var(--main-color);
}