[커피 월드컵] 미디어 쿼리와 모바일 CSS
미니미 프로젝트, 커피 월드컵 시리즈 마지막, 4탄..
3탄: [커피 월드컵] React에서 사용한 기술 정리
4탄: 현재 글!
사실 커피 월드컵이 돌아가는 것 자체는 오래 걸리지 않았습니다.
문제는 Netlify에서 배포한 사이트를 모바일로 확인했을 때부터 시작되었죠..
PC에선 참 깔끔하게 나온 화면이 모바일에서는 중구난방..
처음 미디어 쿼리를 사용해 봤는데, 아직도 미지의 세계지만 짧게나마 알게 된 걸 정리해 봅니다..
1. 미디어 쿼리란..🍂(요새 바람이 많이 불어서 바람에 날리는 낙엽 이모지를 넣어봤습니다,,)
잘 모르는 걸 배울 땐 모르는 단어의 정의부터 확인합니다..
CSS Media Query
예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문에 반응형 웹 디자인의 중요한 부분입니다.
2. 미디어 유형.. 🍂
* all
* print: 페이지가 인쇄된 경우에 적용
* screen: 페이지가 화면에 보이는 경우에 적용
* screen은 주로 min-width, max-width와 함께 사용하여 반응형 디자인을 만들 때 사용
* 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용하는 방식으로 사용
@media screen and (max-width: 768px){ ... }
/* 뷰포트의 width가 768 픽셀보다 좁은 경우 적용적용 */
/*@media (width <= 768px) { ... }과 동일*/
3. 미디어 쿼리와 연산.. 🍂
and
/*landscape(가로 방향화면) 방향으로 제한시키고 최소폭을 30 ems로 지정*/
@media (min-width: 30em) and (orientation: landscape) {
/* … */
}+ em, rem: font-size 속성값에 비례해서 결정되는 상대 단위
⭐ rem을 사용하는 것이 유지보수 측면에서 더 좋음
(em은 해당 요소의 font-size가 없을 경우, 부모의 font-size를 찾을 때까지 계속 거슬러 올라가는데, em계산 시 어떤 요소의 font-size가 영향을 주는지 한 번에 파악하기 어려울 수 있으므로)
<html>
<div>
</div>
</html>html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10em;
/* 200px, 해당 단위가 사용되고 있는 요소의 font-size 속성값이 기준
해당 요소에 font-size가 없을 경우, 상위 요소의 font-size 적용*/
}
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10rem; /* 160px, 최상위 요소의 font-size 속성값이 기준 */
}
or(,)
/*뷰포트의 높이가 680px 이상이거나, screen 모드에서 세로 모드(뷰포트의 높이가 너비보다 큰 경우)일 때 적용*/
@media (min-height: 680px), screen and (orientation: portrait) {
/* … */
}+ 뷰포트: 웹 브라우저에서 웹 콘텐츠가 화면에 표시되는 영역(스크롤을 하지 않고 한눈에 보이는 영역만 포함)
* 브라우저가 웹사이트를 렌더링(화면에 보여주는)하는 공간
* 스마트폰이나 컴퓨터에서 웹사이트를 볼 때, 그 화면에서 실제 콘텐츠가 표시되는 부분
* 해상도
* 디스플레이(모니터, 스마트폰 등)에서 실제로 보이는 부분의 픽셀 수
* 스마트폰 화면 해상도 1080x1920: 화면이 가로로 1080픽셀, 세로로 1920픽셀로 구성
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</meta>* width=device-width: 기기의 화면 너비에 맞게 뷰포트를 설정
* height=device-height: 콘텐츠가 기기의 높이를 넘는 경우 스크롤이 생길 수 있고, 동적인 뷰포트 변화가 있는 브라우저(iOS Safari 등)에서는 동작이 예상과 다를 수 있음 → 잘 사용되지 않음
* initial-scale=1.0: 초기 확대/축소 비율을 1로 설정
not
/*미디어 쿼리 전체의 의미를 반전*/
@media not print {
/* … */
}
/*print에만 not 적용*/
@media (hover) and not print {
/* … */
}
/*@media (not (screen and (color))), print and (color)와 동일*/
@media not screen and (color), print and (color) {
/* … */
}+ (hover): hover가 가능한 지 여부를 조건으로 걸 때 사용
+ (color): 색상을 표현할 수 있는 디스플레이 장치를 조건으로 걸 때 사용
* 모노크롬 디스플레이(흑백만 지원)에서는 (color) 조건이 거짓(false)
📑
참고 자료
Chat GPT
https://developer.mozilla.org/ko/docs/Learn_web_development/Core/CSS_layout/Media_queries
미디어 쿼리 초보자 안내서 - Web 개발 학습하기 | MDN
CSS Media Query는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 뷰포트
developer.mozilla.org
https://www.daleseo.com/css-em-rem/
CSS 상대 단위 - em과 rem
Engineering Blog by Dale Seo
www.daleseo.com