상속과 CSS 우선순위
상속
- 상속 property 관련 공식 정보
- 상속 가능 : text-align, line-height, color, font, visibility, opacity
- 상속 불가 : width, height, margin, padding border, display, box-sizing, background, vertical-alignm position, z-index, overflow, float
inherit (강제 상속 설정)
cascading
- 다양한 CSS property 적용과 상속으로 인해, 특정 요소에 어떤 property 값이 적용될지를 결정해야함
이를 위해 각 property 설정 형태에 따른 우선순위를 정해놓고, 이에 기반해서 특정 요소에 적용될 property 값을 정함.
!important > inline style >id > class > tag
!import, inline style은 현엽에서 사용을 제한하기도 함!
적응형 웹 VS 반응형 웹
- 적응형 웹 : 사용자의 환경에 따라 다른 페이지를 보여줌
- 반응형 웹 : 동일한 웹페이지지만 화면 사이즈에 따라 다르게 보여줌
view port개념
- viewport는 화면상의 표시 영역을 의미하며, 휴대폰에서는 virtual viewport를 대부분 980px로 설정하여 마치 모니터 가로너비가 980px인 웹을 표시하도록 만들었다.
이때 사용자가 보기편한 폰트는 12~16px이지만 다양한 크기를 가지 휴대폰의 virtual viewport를 980px로 해놓는다면, 웹페이지에 따라서는 폰트가 매우 작게 표시될 수 있다.
다음과 같이 viewport에 원하는 너비를 넣는다면 해당 너비에 맞춰 웹브라우저가 웹페이지를 표시한다.
<meata name="viewport" content="width=320" />
만약 없다면 980px로 보여준다. 다만 이런경우는 거의 없긴 하다.
다양한 디스플레이에 맞는 웹페이지
<meata name="viewport" content="width=device-width" />
- 위와같이 설정하면 웹브라우저가 각 기기로부터 알맞는 너비값을 가져와 viewport를 설정하고, 이에 따라 웹페이지가 다양한 디바이스에 알맞게 보여지도록 알아서 설정된다.
계산법
- PPI(pixels per inch), pixel dentisy, 또는 화소 밀도란, 특정 고간에 얼마나 많은 화소가 있는지 나타낸다.
- 동일한 사이즈의 이미지 작성을 위해, 두배의 픽셀 사이즈에서 작업을 해야했다.
- 40px에 보여질 사이즈의 이미지를 만들기 위해서는 80px이미지를 작업해야했다.
- 이는 px 단위가 모호해지고 이럴경우 pixel density 200%라고 지정한다.
- 따라서 일반적으로 divice-width는 디스플레이 해상도 너비/pixel density로 계산되고, 이를 웹브라우저가 인식하여, meta viewport 태그에 적용하는 것이다.
결론
즉, viewport는 반응형 웹페이지라면 반드시 설정을 해줘야하는 부분이다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
property |
설명 |
주 사용 예 |
width |
viewport 너비 (px단위) |
width=device-width |
height |
viewport 높이 (px단위) |
height=device-height |
initial-scale |
viewport 최기 배율 |
initial-scale=1.0 |
user-scale |
사용자 웹페이지 확대 축소 가능 |
user-scale=no |
maximun-scale, minimum-scale |
viewport 최대 배율 0~10 (default = 5.0) |
maximun-scale=2.0, minimum-scale=1.0 |
레이아웃과 미디어 쿼리
레이아웃
- HTML에서 semantic tag를 사용해 웹페이지 구성요소를 정의하고 CSS를 통해 배열함
미디어 쿼리
- CSS 미디어 쿼리를 사용하여 반응형 레이아웃을 구현할 수 있다
- 여기서 media는 장치를 의미한다.
- 미디어 쿼리란, 서로 다른 미디어 타입에 대응하기 위한 기능이다.
@media media-type and (media-feature-rule) {
CSS
}
- 통상 all 또는 screen
- all, print, screen, speech가 있음
- min-width / max-width, orientation정도가 많이 쓰임
property |
설명 |
width |
viewport 너비 (통상 min-width, max-width 많이 사용) |
height |
viewport 높이 (px단위) |
device-width, device-height |
디바이스 물리적 너비, 높이 |
orientation |
디바이스 방향(가로 : landscape, 세로 : portrait) |
aspect-ratio |
viewport의 가로세로비 |
논리연산자
- and, not, only를 붙여서 복잡한 조건을 만들 수 있다.
- and : 복수의 미디어 조건이 모두 참일 때
- not : 미디어 조건이 거짓일 때
- only : and조건에서 구형브라우저가 잘못 처리하는 것을 막기위해 사용
ex) only screen and (max-width:300px)
- , : 여러 미디어 조건을 컴마를 통해 나열할 수 있고 or 조건처럼 동작한다.
참고 해상도 (표준 X)
- 320px~480px : 스마트 폰
- 481px~768px : 태블릿
- 769px~1024px : 저해상도 노트북
- 1025px~1200px : 데스크탑
- 1201px~ : 고해상도 데스크탑 및 tv