반응형 웹
반응형 웹
반응형 웹은 모바일 기기의 웹 브라우저 창의 너비값에 반응하여 화면 요소를 자동으로 바꾸어 사이트를 구현합니다.
뷰포트
모바일 기기에서 실제 내용이 표시되는 영역
뷰포트 지정하기
<meta name = "viewport" content = "<속성1=값>,<속성2=값>>"
가변 그리드 레이아웃
- 전체를 감싸는 요소를 만들고 너비값을 백분율 값으로 변환한다.
- 각 요소의 너비 값을 계산한다. (요소의 너비)/(콘텐츠 전체를 감싸는 요소의 너비)*100
가변 레이아웃과 가변 요소
가변 글꼴
반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할 때에는 글자 크기도 유동적으로 바뀌어야합니다.
em 단위
폰트의 대문자 M의 너비를 1em으로 지정한 것으로 1em은 16px입니다.부모요소의 크기에 따라 자식 요소의 글자크기가 바뀝니다.
rem 단위
처음부터 기본 크기를 지정해서 중간에 기본 값이 변하지 않습니다.
가변 이미지
max-width속성값을 100%로 지정합니다.