반응형 웹사이트
: 웹사이트는 PC 화면 뿐만 아니라 모바일, 태블릿, 노트북 등 여러가지 디바이스의 해상도에 반응하여 최적의 화면을 보여준다.
뷰포트(viewport)
: 웹 브라우저에서 실제 내용이 표시되는 영역. 반응형 웹에서는 각 디바이스의 viewport에 맞는 화면을 보여줘야 한다. 이때 사용하는 메타 태그가 "뷰포트 메타 태그" 이다.
메타 뷰포트 태그
<meta name="viewport" content="속성1=값1, 속성2=값2 ... ...">
메타 뷰포트 태그 속성
- width
- height
- user-scalable : 사용자 확대/축소 가능 여부
- initial-scale : 초기 화면 비율
- maximum-scale : 최대 화면 비율
- minimum-scale : 최소 화면 비율
일반적인 사용법
: 뷰포트의 너비를 디바이스 화면 너비에 맞추고 초기화면 배율을 1로 지정한다.
<meata name="viewport" content="width=device-width, initial-scale=1">
뷰포트 단위
- vw : 뷰포트 너비의 1%
- vh : 뷰포트 높이의 1%
- vmin : 뷰포트 너비와 높이 중에서 작은값의 1%
- vmax : 뷰포트 너비와 높이 중에서 큰 값의 1%
미디어 쿼리
: 접속하는 디바이스나 뷰포트에 따라서 특정 CSS 스타일을 사용하는 방법을 일컫는다.
미디어 쿼리 문법
@media 키워드를 사용하여 특정 디바이스에 어떤 CSS를 적용할 것인지 결정한다. 이때 특정 구간을 breakpoint라고 한다.
Responsive layout grid >>> BreakPoint 참고 링크
기본형
@media [only | not] 미디어 유형 [and 조건] * [and 조건]
- only : 미디어쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않는다. (거의 사용하지 않는다.)
- not : not 다음에 지정하는 미디어 유형을 제외한다.
- and : 조건을 여러개 연결해서 추가할 수 있다.
ex) 미디어 유형이 screen이면서 최소 너비가 768px 이고 최대 너비는 1439px일 경우에 적용할 CSS
@media screen and (min-width: 768px) and (max-width:1439px)
@media (max-width: 600px) {
body {
background-color: red;
}
}
@media (max-width: 400px) {
body {
background-color: blue;
}
}
미디어 유형
- all : 모든 장치에 적합
- print : 인쇄 결과물 및 출력 미리보기 화면
- screen : 주로 화면이 대상이다.
'CSS' 카테고리의 다른 글
Flex Box (1) | 2024.01.25 |
---|---|
Animation (0) | 2024.01.25 |
Transform, Transition (0) | 2024.01.25 |
Pseudo Class & Element (0) | 2024.01.24 |
Background (0) | 2024.01.24 |
댓글