Media Query : 반응형 디자인을 생성하기 위한 가장 대표적인 접근법
미디어 쿼리 사용법
/* 미디어쿼리 구문은 대소문자 구별 X */
@media [only 또는 not] [meida type] [and 또는 콤마(,)] (미디어 특성 = 조건문) {
CSS 작성...
}- 논리연산자
- and : 모든 쿼리가 참이여야 적용
- not : 모든 쿼리가 거짓이여야 적용
- not tv : tv를 제외한 모든 미디어 유형에만 적용
- only : 미디어쿼리를 지원하는 브라우저에서만 적용
- IE 6,7,8 버전에 미디어쿼리 미지원 -> 그래서 only 키워드 작성안함
- [media type]
- screen (화면대상)
- tv (티비)
- print (인쇄물)
- all (모든 디바이스 대상)
- projection, handheld, speech, aural, embossed, tty, braille
- 통상적으로 all | screen 부여 많이 함, 작성하지 않으면 all이 자동 적용
- [and 또는 콤마(,)]
- and : 앞뒤 조건 모두 사실일 때 스타일 적용
- 콤마(,) : 앞 뒤 조건 중 하나만 사실이더라도 스타일 적용
- 생략가능
- 미디어 특성 :
- min-width (최소값) : 요소의 최소 너비를 설정 / 해당 값보다 작아지는 것을 방지
- max-width (최대값) : 요소의 최대 너비를 설정 / 해당 값보다 커지는 것을 방지
- orientation (가로/세로) : 뷰표트 방향
- aspect-ratio : 뷰포트 가로세로비
- width : 뷰포트 너비
- height : 뷰포트 높이
- device-width / device-height : 기기의 가로너비값, 세로 높이값
⭐️ 사용 주의 사항 ⭐️
1. 띄어쓰기 주의 (논리연산자에 항상 공백 한 칸 필수)
2. min / max 사용 시 작성 순서 주의
: min 사용시 반드시 크기가 작은 순서대로 -> min(최소 또는 그 이상) 점차 커지는 것을 의미
: max 사용시 반드시 크기가 큰 순서대로 -> max(최대 또는 그 이하) 점차 작아지는 것을 의미
min / max 사용 시 반응형 웹이 모바일 기준인지 pc기준인지에 따라 사용하는 접두사가 달라질 수 있다.
아마 pc가 min / mo가 max 기준으로 잡으면 될것이다?
viewport를 사용하기 위한 html meta tag 설명
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모든 기기에 폭을 맞춰 호환
- width=device-width : 페이지의 너비를 기기의 스크린 너비로 설정 (device-width, 양수)
- height=device-height : 뷰포트의 높이지정 (device-height, 양수)
- initial-scale=1.0 : 초기배율, 처음 페이지 로딩시에 축소/확대가 되지 않는 원래의 정상 크기를 사용할 수 있도록 하는 설정 (0~10)
- minimum-scale=1 : 최소 축소 비율 설정 (양수, 기본값 0.25)
- maximum-scale = 1 : 최대 확대 비율 설정 (양수, 기본값 5.0)
- user-scalable=no : 확대/축소 여부 설정, no 설정시, 사용자가 페이지를 확대할 수 없음 (yes:기본값,no)
⭐️ minimum-scale, maximum-scale 속성을 각각 1.0으로 지정 시 user-scalable을 'yes'로 지정해도 사용자가 화면을 확대하거나 축소할수 없음
근데 테스트 해봤는데 위에 말이 틀린것 같다...?
아래 url에서 확인해보길!
Viewport
Viewport Test 기본 viewport test 반응형 아님 content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" ⭐️ minimum-scale, maximum-scale 속성을 각각 1.0으로 지정 시 user-scalable을 'yes'로
yebang97.dothome.co.kr
미디어 특성 최소값 / 최대값 설명
test
화면의 너비를 조정해보세요~!
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 기초</title>
<style type="text/css">
#test {
background-color: orange;
@media screen and (min-width: 1500px) {
/* 100%를 기준으로 화면사이즈를 줄였을 때 최소값 유지 > 1500px ~ 100% */
background-color: green;
}
@media screen and (max-width: 1024px) {
/* 0기준으로 화면사이즈 최대치 > 1024px ~ 0px */
background-color: red;
}
}
</style>
</head>
<body>
<div id="test">test</div>
</body>
</html>- 0 ~ 1024px : red
- 1025px ~ 1499px : orange
- 1500px ~ 100% : green
💡 미디어쿼리 사이즈 참고 >
[CSS3강좌] 35강 반응형웹을 위한 미디어쿼리(@media screen{ })
** 동영상으로 배우고 싶은 분은 아래 주소를 클릭하세요! https://youtu.be/uBrsPwzIZR0 1. 미디어 쿼리(Media Query) - 미디어 쿼리는 특정 조건이 true인 경우에만 코드 블록{ } 내부의 CSS 코드를 실행해주는
ossam5.tistory.com
'Mark Up & StyleSheet > 반응형' 카테고리의 다른 글
| [반응형] 가변(반응형) 공식 (1) | 2023.12.28 |
|---|---|
| [반응형] 반응형 웹을 위한 기술 (0) | 2023.12.27 |
| [반응형] 반응형 웹에 대해서 (0) | 2023.12.27 |
| [반응형] font size converter (px, em, vw...) 사이트 (0) | 2023.12.18 |
| [반응형] Break Point (화면에 대한 분기점) (0) | 2023.05.15 |