8일차. 미디어 쿼리
<새로 알게된 내용>
- 미디어쿼리 : 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것
- @media mediaqueries { /* style rules */ }
쿼리문이 참일 경우만 적용 - 미디어 타입
all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
현실적으로 고려할 것은 screen 많이 쓰임 - 미디어 특성
width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid
width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)
orientation은 미디어가 세로모드인지 가로모드인지를 구분(width와 height 로 구분).
media_query_list
: S* [media_query [ ',' S* media_query ]* ]?
;
media_query
: [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
| expression [ AND S* expression ]*
;
expression
: '(' S* media_feature S* [ ':' S* expr ]? ')' S*
;
- S* 무시해도 됌
- [ a ] : a가 나올 수도 있고 나오지 않을 수도 있습니다.
- a | b : a 또는 b 둘 중에 하나를 선택합니다.
"|"는 파이프 라인 기호로 키보드의 역슬래시(\) 키를 Shift 키를 누른 채로 누르면 나옵니다. - a? : a가 0번 나오거나 1번만 나올 수 있음
- a* : a가 0번 나오거나 그 이상 계속 나올 수 있음
- media_type : all, screen, print 등 명세에 정의된 미디어 타입
- media_feature : width, orientation 등 명세에 정의된 미디어 특성
media_query_list
: 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다.
media_query
: A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다.
미디어 타잎 앞에만 only 또는 not 키워드가 올 수 있습니다.
미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있습니다.
: B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.(미디어 타입이 명시되지 않으면 all로 간주합니다.)
미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.
expression
: 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어집니다. 이름과 값은 : 기호로 연결합니다.
또, 값이 없이 특성 이름만으로도 작성할 수 있다.
디스플레이 크기에 따른 body요소의 background-color 변경
/*모바일*/
@media (max-width: 767px) {
body { background-color: gold; }
}
/*tablet*/
@media (min-width: 768px) and (max-width: 1024px) {
body { background-color: lightblue; }
}
/*desktop*/
@media (min-width: 1025px) {
body { background-color: lightpink; }
}
/*웹 페이지를 인쇄하는 경우*/
@media print {
a { text-decoration: none; }
a:after { display: inline; content: '(' attr(href) ')'; } }
먼저 앵커 요소의 url 을 텍스트 뒤에 붙여서 나타나게 하고, 링크임을 표시해주는 밑줄도 제거를 하겠습니다.
웹 페이지를 인쇄할 경우에는 앵커 요소가 가리키는 url을 문서에 같이 출력해주는게 내용을 이해하는데 훨씬 좋습니다.
뷰포트 설정
뷰포트를 설정하는 태그는 <meta> 태그로 <head> 태그에 위치해야 합니다
<meta name="viewport" content=" 뷰포트의 설정 값" >
예시
<meta name="viewport" content="width=device-width, initial-scale=1.0">