[CSS] 반응형 웹

1. 디스플레이 해상도(Display resolution)

디스플레이의 가로/세로 화소(Pixel) 수

 

화소의 크기가 없으므로 단순히 화소의 갯수만을 알수 있을 뿐, 얼마나 정밀하게 표현하는지는 알 수 없다.

디스플레이의 크기가 같다는 조건하에서 해상도가 높으면 정밀하게 표현이 가능하다.

컴퓨터 이미지의 픽셀 치수(Pixel Dimension)와 단위가 같다.

* 디스플레이의 (물리적) 화소와 컴퓨터 (이미지) 픽셀는 다른것이다.

 

2. 화소 밀도(Pixel density, 단위: Pixel per inch, PPI)

1 inch 내의 화소 수

 

얼마나 정말하게 표현할 수 있는지 알 수 있다.

 

3. Viewport

웹 문서의 내용이 화면에 보이는 영역

 

width: (모바일 화면에서) 출력할 웹 문서의 가로 (컴퓨터) 픽셀 수

<meta name="viewport" content="width=980">
<meta name="viewport" content="width=device-width">

 

4. Layout

1) Grid Layout

Fixed Grid Layout ... 각 요소의 너비를 고정 픽셀단위로 Grid Layout 적용

ex) 960 pixel 12 colum

 

Fluid Grid Layout ... 각 요소의 너비를 백분율과 같은 가변값으로 지정

- 하나의 CSS만 설계하면 됨

- Fixed Grid Layout 먼저 만들고 계산을 통해서 만들수 있음

 

2) Media query

미디어의 유형(screen, tv ... ) 및 조건에 따라 다른 CSS 적용

@media screen (min-width:200px) and (max-width:360px) {
	div { background-color: red; }
}

https://mediaqueri.es/