0905 CSS 반응형

💡 CSS 반응형

• CSS 초기화
• CSS 단위
• Media query

---

반응형

• 반응형 웹
  • 디스플레이 종류에 따라 화면크기 자동최적화
• 적응형 웹
  • PC용 / 모바일용 사이트 url 별도 제공
• 반응분기점(breakpoint)

---

CSS 스타일 초기화

브라우저마다 태그 기본스타일 상이 → 다른 화면

CSS 초기화 방식

Reset.css

• https://meyerweb.com/eric/tools/css/reset/

Normalize.css

• https://necolas.github.io/normalize.css/8.0.1/normalize.css (css파일 링크)
• https://cdnjs.com/libraries/normalize (cdn)

---

CSS 단위

px

화면의 하나의 점

반응형 부적합

• 반응분기점 별로 사이즈 다르게 작업

%

상위 요소의 상대적인 크기

반응형 폰트 단위

em

상위 요소 크기에 비례

• 중첩되기 때문에 상황에 따라 크기 변동
• 굳이 필요한 상황에서만 사용

rem

root em 최상위 요소(html) 크기에 비례

Viewport 단위

Viewport : 웹 브라우저에서 웹페이지가 표시되는 영역

vw

viewport width 1vw= viewport width의 1%

vh

viewport height 1vh= viewport height의 1%

---

Media query

CSS 미디어 쿼리 → 반응형 레이아웃 구성

@media <media type> and (media feature) {
	/* ... */
}

<media type>

미디어 유형

• all 모든 미디어장치
• screen 화면을 출력하는 디스플레이가 있는 기기
• print 인쇄화면

media feature

미디어 조건 (특성)

• width viewport 너비
• height viewport 높이
• orientation 가로/세로 비율
  • 가로방향: landscape
  • 세로방향: portrait

/* 미디어타입 screen이면 적용 */
@media screen { ... }

/* 미디어타입 screen, width 768px 이상이면 적용 */
@media screen and (min-width: 768px) { ... }

/* width 768px 이상, 1024px 이하일 때 적용 */
@media (min-width: 768px) and (max-width: 1024px) { ... }

/* width 1024px 이하, 디바이스가 가로 방향일 때 적용 */
@media (max-width: 1024px) and (orientation: landscape) { ... }