참고하는 강의를 기준으로는 최근에는 모바일 환경에서 사이트를 더 자주 접속하므로, 우선적으로 모바일 환경에 맞추어 웹사이트를 개발한다. 이후에 데스크탑 같은 환경에 대응하게끔 CSS 코드를 추가하면 된다.
<meta> 태그로 모바일 환경 대응
픽셀 밀도 차이
모바일 기기는 해상도는 매우 높지만 물리적인 화면의 크기는 작다. 그렇기 때문에 모바일 브라우저는 웹사이트를 표시할 때 일반적인 데스크톱 화면을 보여주는 것처럼 기본적으로 설정한다. 즉, 모바일 브라우저는 좁은 화면이지만, 넓은 화면을 가정해서 요소들을 배치하기 때문에 웹페이지가 작고 축소된 형태로 욱여 넣어지게 된다.
뷰포트와 픽셀
이러한 픽셀 밀도 차이 문제를 해결하기 위해 실제 물리적인 픽셀을 모바일 환경에 적절한 비율의 CSS 픽셀로 변환하는 작업이 필요하다.
- CSS 픽셀: 개발자가 웹페이지에 사용하는 가상의 단위이다. 브라우저가 자동으로 크기를 조절한다.
- 물리적 픽셀: 디바이스 화면에 실제로 존재하는 픽셀이다.
<meta> 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0">픽셀 비율 변환은 <head>에 위 태그를 추가함으로써 수행할 수 있다.
- name: 해당 <meta> 태그가 브라우저 화면(뷰포트)을 대상으로 삼는다.
- content
- width: 대상인 뷰포트의 페이지 너비를 기기의 화면 너비와 같게 설정한다. 이를 통해 브라우저에게 현재 환경이 소형 모바일 기기임을 알릴 수 있다.
- initial-scale=1.0: 줌 레벨을 정의한다. 1.0은 기본값으로 줌 기능이 적용되지 않은 것이다.
- user-scalable: 기본값은 yes이다. 사용자의 줌 인/아웃 가능여부를 설정한다.
- maxium-scale, minimum-scale: 최대/최소 줌 레벨을 제한한다.
@media - 미디어 쿼리
<meta> 태그를 사용하여 적절한 CSS 픽셀로 변경은 했지만, 디자인을 해주는 것은 아니다. 화면 크기에 따라 요소들이 어떻게 표현될지는 결국 CSS를 건드려야한다.
이때 사용되는 것이 바로 미디어 쿼리다.
@media (min-width: 40rem) {
#product-overview h1 {
font-size: 3rem;
}
}if문과 동일한 방식으로 읽으면 되는데, 괄호()안의 조건을 만족하면 내부의 CSS 코드가 실행된다. 위 코드를 예로 들면, 뷰포트의 너비가 40rem을 넘어가게 되면 위 조건을 만족하게 되고, 내부의 CSS 코드가 적용된다.
작성 시 유의점
@media (min-width: 40rem) {
#product-overview h1 {
font-size: 3rem;
}
}
@media (min-width: 60rem) {
#product-overview h1 {
font-size: 5rem;
}
}동일한 생성자와 프로퍼티를 대상으로 하는 미디어 쿼리를 여러번 작성할 수 있는데, 이때, CSS 코드는 위에서 아래로 차례대로 실행된다는 점에 유의해야한다.
현재 뷰포트 너비가 45rem이라면 첫번째 미디어쿼리는 실행되고, 두번째 미디어쿼리는 실행되지 않는다. 즉 의도한대로 동작한다.
만약 조건의 40rem과 60rem의 순서를 바꾸면 어떻게 될까? 뷰포트의 너비가 60rem을 넘겨도 다음 미디어쿼리도 참이 되어버리니 60rem 이상의 뷰포트일 때 반영되어야할 미디어쿼리가 실행되지 못한다.
그러므로 미디어 쿼리를 작성할 때에는 뷰포트 너비에 따라 올바른 순서로 작성하는 것이 중요하다.
분기점 정하기
기기의 화면은 다양하기에 미디어 쿼리의 분기점(어느정도 범위까지 특정 CSS 규칙을 적용할지)을 정하는 것은 중요하다. https://yesviz.com/viewport/ 사이트를 참고하면 주로 사용되는 기기들의 너비 및 높이를 한눈에 확인할 수 있다. 예를 들어 아이패드 프로 11"을 기준으로 태블릿 환경에 대응하고 싶다면 첫 분기점을 min-width: 834px로 설정할 수 있을 것이다. 그리고 1000px 이후에 또 다른 분기점을 만들 수도 있을 것이다.
또한 미디어 쿼리의 조건은 연산자를 활용해 여러 개를 설정할 수도 있다. 최소 너비/높이, 가로/세로 모드 등을 조건으로 활용할 수 있다.
'스터디 > 프론트엔드' 카테고리의 다른 글
| CSS 참고 키워드 - CSS 요소 (0) | 2024.09.24 |
|---|---|
| [JS, React]이벤트 버블링과 실제 개념 활용 사례 (1) | 2024.08.29 |
| [Internet] 브라우저의 동작 방식 (0) | 2024.08.27 |
| [Internet] DNS (0) | 2024.08.26 |
| 프론트엔드 첫 글 (0) | 2024.08.25 |
댓글