▶ 미디어 쿼리
사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법
→ 반응형 웹에서 필수로, 화면 크기마다 각각 다르게 CSS 적용
@media 미디어 유형 and (조건) {스타일}
* 미디어 유형
all
print (인쇄 장치)
screen (컴퓨터 스크린)
tv (음성과 영상이 동시에 출력되는 TV)
aural(음성 합성 장치)
braille(점자 표시 장치)
handheld (패드)
projection (프로젝터)
tty (디스플레이 기능이 제한된 장치)
* (조건)에 들어갈 속성들
- 웹 문서의 가로 너비와 세로 높이 속성
width, height
min-width, min-height
max-width, max-height
- 단말기의 가로 너비와 세로 높이 속성
device-width, device-height
min-device-width, min-device-height
max-device-width, max-device-height
- 화면 회전 속성
orientation: portrait 단말기 세로 모드 지정
orientation: landscape 단말기 가로 모드 지정 (기본값)
보통 실무에서는 모바일 화면을 먼저 구현하고 데스크탑 화면으로 확장시키는 순으로 작업을 진행한다고 한다.
이를 모바일 퍼스트 기법이라고 한다.
▶ 미디어 쿼리 적용하기
1) 외부 CSS 파일 연결 → <link>, @import
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
@import url(css 파일 경로) 미디어 쿼리 조건
link와 import는 모두 외부에서 css 파일을 가져와 사용하는 방법이지만
link는 웹 페이지와 css를 같이 연결하기 위해 만들어졌고, <head> 태그 사이에 넣는다.
import는 css를 다른 css에 가져오도록 하는 차이가 있다.
2) 웹 문서에 직접 정의 → <style media="(조건)" ></style>
'IT 기초 > CSS' 카테고리의 다른 글
| 가상 클래스(:) & 가상 요소(::) (0) | 2023.03.26 |
|---|