2022. 1. 7. 22:00ㆍWeb
안녕하세요. brandy 입니다. 요즘 Web 개발 공부에 다시 매진하고 있는데, 공부하면서 미디어쿼리 라는 것을 알게 되었습니다.
솔직히 말해서 프론트엔드 분야는 남의 일이라고 생각했지만,, 풀스택으로 공부하는게 맞다고 생각하여 프론트엔드 백엔드 둘다 공부를 하고 있습니다.
※ 반응형 웹페이지가 중요한 이유?
Responsive Web Design (RWD)
우선 반응형 웹페이지는 하나의 웹사이트에서 PC,스마트폰,태블릿 PC 등 접속하는 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법
페이지 디자인은 사용자가 콘텐츠를 보기 위해 가로로 스크롤하거나 핀치 또는 확대/축소하지 않고도
모든 화면 크기에서 올바르게 렌더링 될 수 있는 경우가 반응형입니다.
출처 : bradfrost.com
그러므로 CX,UX 등 마케팅적 측면에서도
모든 웹사이트 방문자에게 최상의 사용자 경험을 제공할 수 있어야 하기 때문에
반응형 웹페이지의 존재는 매우 중요합니다.
Media Query
미디어쿼리는 CSS에서 반응형 웹디자인의 기본(필수)이 됩니다.
CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용합니다. (if문 조건과 비슷)
화면 사이즈를 인식해서 서로 다른 CSS를 적용시켜 주는 것이죠.
@media (조건) {
스타일 (CSS 코드)
} 미디어쿼리는 좁은 화면 스타일링과 넓은 화면 스타일링으로 나뉩니다.
좁은 화면과 넓은 화면의 기준은 무엇일까요? 정확한 값으로 기준이 정해진 건 아니지만,
웹 개발에 모바일 우선 접근 방식을 채택한다고 합니다.
해상도 320px 이상 ~ 768px 미만 : 스마트폰
해상도 768px 이상 ~ 1024px 미만 : 태블릿
해상도 1024px 초과 ~ : PC 정도입니다.
min-width는 최소 조건(단위 px,em)
max-width는 최대 조건(단위 px,em)
만약에 800px이하의 좁은 화면에서 특정 element를 파란색으로 바꾸고 싶다면?
<html>
<div class="test1">좁은 화면의 미디어쿼리</div><css>
@media (max-width: 800px) {
.test1 {
background-color:blue;
}
}
반대로, 넓은 화면에서만 특정 스타일링을 적용하고 싶을 때는 화면의 최소 너비를 조건으로 하여 미디어 쿼리 사용
<html>
<div class="test2">넓은 화면에서 사용하는 미디어쿼리</div> css
@media (min-width:800px) {
.test2 {
color:green;
}
}실습 코드
@media screen의 의미는 미디어쿼리 적용 대상이 주로 '최대 조건이 768px인 화면(screen)'이라는 의미입니다.
미디어 유형으로는
all (모든 장치에 적합)
print (인쇄 결과물 및 출력 미리보기 화면에 표시 중인 문서)
screen (화면)
speech (음성 합성장치 대상)
다수의 장치를 특정하기 위해서는
@media scrren, print {
....
} 으로 작성하면 됩니다.
잘못된 부분이 있다면 언제든지 지적 환영입니다 !
읽어주셔서 감사합니다 :)
참고
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries
https://www.daleseo.com/css-media-queries/
'Web' 카테고리의 다른 글
| [firebase 설치 오류] firebase : 이 시스템에서 스크립트를 실행할 수 없으므로 ~ 해결방법 (1) | 2022.01.13 |
|---|---|
| JavaScript의 내부동작원리는? (0) | 2022.01.12 |
| 웹개발 빠른 마크업을 위한 Emmet 정리 (0) | 2022.01.07 |
| html+JS 버튼을 이용하여 삼행시 한 줄씩 출력하는 프로그램 (1) | 2021.12.22 |
| Web 1.0부터 Web 3.0까지 정리해보기 (1) | 2021.12.22 |