10-1 반응형 웹 알아보기
10-2 반응형 요소 만들기
10-3 미디어 쿼리 알아보기
10-1 반응형 웹 알아보기
반응형 웹 디자인이란
- 웹 요소를 화면 크기에 맞게 재배치하고 표시 방법만 바꾸어 사이트를 구현해줌
모바일 기기를 위한 뷰포트
뷰포트
- 스마트폰 화면에서 실제 내용이 표시되는 영역
<meta name="viewport" content="속성1=값1, 속성2=값2, ......">
뷰포트의 속성
10-2 반응형 요소 만들기
상댓값으로 글자 크기 지정하기 - em 단위, rem 단위
em 단위
- em은 부모 요소에서 지정한 글꼴의 대문자의 너비를 1em으로 놓고 상대적으로 값을 계산함
- 부모 요소에서 글자 크기를 지정하지 않았다면 body 요소의 기본 크기를 사용함
- 웹 문서에서 body의 기본 글자 크기는 16px이고 이 값이 1em에 해당
- 1번째 p요소는 16px로 계산되지만, 2번째나 3번째 p요소는 24px(1.5em * 16px)로 계산됨
rem 단위
- em에서 부모 요소의 글자 크기 때문에 예상하지 못한 결과가 나오는 것을 막기 위함
- 루트(root)에서 지정한 크기를 기준값으로 사용
반응형 이미지 만들기
- 부모 요소 너비에 따라 너비와 높이가 바뀌는 이미지
- 이미지는 웹 문서에 삽입할 때부터 크기가 정해져 있으므로, 브라우저 화면이 작아지면 이미지의 일부만 보임
width: 100% 사용
- 이미지의 너비를 100%로 지정하면 이미지가 부모 요소의 너비에 맞춰 항상 100%가 됨
max-width: 100% 사용
- 부모 요소의 크기에 따라 이미지가 커질 때, 원본 이미지만큼만 커짐
- 화질이 너무 떨어질 만큼 이미지가 커지지 않아 다양한 크기의 화면에서도 이미지가 자연스럽고 깔끔하게 보임
object-fit 속성 사용하기
- 콘텐츠(이미지나 비디오)의 가로세로 비율을 유지하면서 해상도에 맞게 크기를 조절할 수 있음
반응형 레이아웃 만들기
- 레이아웃을 자유롭게 조절할 수 있어야 함
10-3 미디어 쿼리 알아보기
미디어 쿼리 알아보기
미디어 쿼리
- 사이트에 접속하는 장치에 따라 특정한 css 스타일을 사용하는 방법
미디어 쿼리 구문
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
미디어 유형의 종류
웹 문서의 가로 너비와 세로 높이 속성
화면 회전 속성
- orientation 속성을 사용하면 기기의 방향을 확인할 수 있고, 그에 따라 웹 사이트의 레이아웃을 바꿀 수 있음
미디어 쿼리의 중단점
- 중단점: 화면 크기에 따라 서로 다른 css를 적용할 분기점
- 모바일 퍼스트 기법: 모바일을 먼저 고려해 미디어 쿼리를 작성하는 것
미디어 쿼리 적용하기
외부 CSS 파일 연결하기
<link rel="stylesheet" media=" 미디어 쿼리 조건" href="css 파일 경로">@import url(css 파일 경로) <미디어 쿼리 조건>
웹 문서에 직접 정의하기
<style>태그 안에서 media 속성을 사용해 조건을 지정하고, 그 조건에 맞는 스타일 규칙을 정의하는 것
<style media="<조건>"> {
<스타일 규칙>
}
</style>- 스타일을 선언할 때 @media문을 사용해 조건별로 스타일을 지정해 놓고그중에 선택해서 적용하는 것
<style>
@media <조건> {
<스타일 규칙>
}
</style>
웹 개발자 도구 창에서 미디어 쿼리 표시하기
- 미디어 쿼리 막대에 있는 수직선이 중단점을 나타냄
- 사용한 미디어 쿼리 코드도 직접 확인할 수 있음
- 미디어 쿼리 코드 부분으로 이동함
[실습]
