[HTML/CSS] 반응형 레이아웃 CSS정리

Viewport(뷰포트)

스마트 폰에서 실제 화면이 표시되는 영역

• 기본형: <meta name="viewport" content="<속성1=값>, <속성2=값>, …">
  • 속성: width, height, user-scalable, initial-scale, minimum-scale, maximum-scale
• 가변 그리드 레이아웃: 전체를 감싸는 요소의 너비를 기준으로 각 요소 너비 계산 | (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비)*100
• 가변 글꼴
  • Em 단위: 글자크기(em) = 글자 크기(px) | 1em = 16px
  • Rem단위: 처음부터 기본크기를 지정하여 부모 요소의 크기에 따라 자식요소의 글자 크기가 바뀌는 em단위의 단점을 보완함
• 가변 이미지 | <img>태그의 srcset속성, <picture>, <source> 태그 이용
• 가변 비디오 | <video>태그에서 max-width 속성 100%로 지정

미디어 쿼리

• 기본형: @media [only | not] 미디어 유형 [and 조건] * [and 조건]
• 연산자
  • And: 조건 계속 추가
  • ,(쉼표): 동일한 스타일 유형이 있다면 쉼표로 추가
  • Only: 미디어 쿼리 지원 브라우저에서만 조건 인식
  • Not: 지정하는 미디어 유형 제외 | not tv
• 미디어 유형
  • All: 모든 미디어 유형
  • Print: 인쇄장치
  • Screen: 컴퓨터, 스마트폰 스크린
  • Tv: 음성, 영상 동시 출력 tv
  • Aural: 음성 함 장치(화면 소리 출력장치)
  • Braille: 점자 표시 치
  • Handheld: 패드처럼 손에 들고 다니는
  • Projection: 프토젝터
  • Tty: 디스플레이 기능 제한장치(픽셀 사용x)
  • Embossed: 점자 프린터
• 조건
  • 웹 문서의 가로 너비, 세로 높이: width, height, min-width, min-height, max-width, max-height
  • 단말기의 가로 너비, 세로 높이: device-width, device-height, min-device-width, min-device-height, max-device-width, max-deivce-height
  • 화면 회전:
  • 화면 비율:
  • 색상당 비트 수:
• 미디어 쿼리 적용
  • <link>태그 사용:
  • @import 구문 사용:
  • 웹문서에서 직접 정의: