이전 포스팅에서는 반응형 웹과 적응형 웹의 장단점에 대해 알아보았다.
이전 포스팅을 보고 싶다면 아래를 클릭하여 이동하시길 바란다.
2024.06.15 - [프론트엔드/CSS & HTML] - 반응형 웹 적용기 : 1. 반응형 웹의 이해
반응형 웹 적용기 : 1. 반응형 웹의 이해
이번 토이 프로젝트의 화면에서 반응형 웹을 적용해보면 좋을 것 같아서 급하게 반응형 웹 적용방법을 찾아보고 있다.반응형 웹 VS 적응형 웹일단 반응형 웹의 정확한 정의가 궁금하여 찾아보았
lemonnc.tistory.com
이번 편에서는 본격적으로 반응형 웹을 HTML과 CSS를 통해 적용하기 위한 필요사항을 알아보자.
미디어 쿼리(media query)란?
반응형 웹은 뷰포트(viewport:화면의 해상도)너비에 따라 유연하게 컨텐츠를 조율하는 작업이 필요하다.
이를 위해 아래와 같은 구문을 사용하여 CSS를 지정해준다.
@media (조건문) { 실행코드 }
다만, 이 작업을 먼저 진행하기 전에, 반응형 웹을 적용해주기 위한 디바이스의 기준을 정하는 작업이 선행되어야 한다.
1. 반응형 웹 디자인을 적용시킬 디바이스의 크기를 지정한다.
나의 토이 프로젝트에서는 모바일, 데스크탑, 태블릿 3가지 디바이스를 기준으로 반응형을 디자인해보기로 하였다.
인터넷에서 대략적인 조사를 해 본 결과, 아래와 같은 길이에 맞추면 충분히 세가지에 대처가 가능할 것 같다.
1. 모바일 세로 : ~ 480px
2. 모바일 가로, 타블렛 세로 : 481px ~ 768px
3. 타블렛 가로, 노트북 :769px ~ 1024px 또는 1280px
4. 데스크탑 :1025px 및 1281px ~
위의 스펙을 코드로 구현하면 아래와 같다.
@media screen and (max-width: 480px) {
/** 1\. 모바일 세로 */
}
@media screen and (max-width: 768px) {
/** 2. 모바일 가로, 타블렛 세로 */
}
@media screen and (max-width: 1024px) {
/** 3. 타블렛 가로, 노트북 */
}
@media screen and (max-width: 1280px) {
/** 4. 타블렛 가로, 노트북 */
}
@media screen and (min-width: 1281px) {
/** 5. 데스크탑 */
}
웹dd
출처
반응형 웹 UI Breakpoint에 대한 고찰
일반적인 Breakpoint 이번에 만들 프로젝트를 반응형 웹으로 만들고 싶었다. 최소한의 반응만 하고 싶어서 4개 정도의 미디어만 생각했다. 그러려면 이에 대한 breakpoint를 알아내야 하는데, 일반적
velog.io
'프론트엔드 > CSS & HTML' 카테고리의 다른 글
반응형 웹 적용기 : 3. 디바이스별 CSS 입히기 (2) | 2024.06.16 |
---|---|
반응형 웹 적용기 : 1. 반응형 웹의 이해 (0) | 2024.06.15 |