반응형 사이트를 구현하기 위해 가장 많이 사용되는 기술 중 하나가 바로 CSS 미디어 쿼리(Media Query)다.
미디어 쿼리는 CSS3에서 도입된 기능으로, 특정 조건(예: 화면의 너비, 높이, 해상도 등)에 따라 다른 스타일을 적용할 수 있도록 한다. 이를 통해 다양한 디바이스(모바일, 태블릿, 데스크탑 등)에서 일관된 사용자 경험을 제공할 수 있다.
📌 사용법
@media (조건문) { 실행코드 }
<link rel="stylesheet" media="all and (조건)" href="desktop.css" >기본 문법은 위와 같다.
보통 위의 형식을 많이 쓰고 link태그를 사용하는 방식은 권장하지 않는다.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}이런식으로 max-width를 써주면 width의 크기가 최대 600px일 때 까지 하위의 스타일을 적용하겠다는 뜻이다.
미디어 쿼리에서 자주 사용되는 속성으로는 다음과 같다.
· max-width: 최대 너비
· min-width: 최소 너비
· max-height: 최대 높이
· min-height: 최소 높이
· orientation: 화면 방향 (예: 가로, 세로)
· resolution: 해상도 (예: dpi, dpcm)
📌 분기 포인트
요즘은 전자기기를 가로로 접기도 하고 세로로 접기도 하는 등 다양한 종류의 전자기기가 있기 때문에 화면 사이즈도 다양하다.
반응형 웹 디자인에서 주로 사용되는 분기 포인트는 다양한 디바이스에 최적화된 레이아웃을 제공하기 위해 설정된다. 다음은 일반적으로 사용되는 분기 포인트이다.
1. 모바일 디바이스: 최대 너비 480px
@media only screen and (max-width: 480px) {
/* 모바일 디바이스용 스타일 */
}- 태블릿 디바이스: 최소 너비 481px ~ 최대 너비 768px
@media only screen and (min-width: 481px) and (max-width: 768px) {
/* 태블릿 디바이스용 스타일 */
}- 데스크탑 디바이스: 최소 너비 769px
@media only screen and (min-width: 769px) {
/* 데스크탑 디바이스용 스타일 */
}주로 사용되는 분기점은 이렇고, 가로 세로 모드를 지원하거나 좀 더 세부적으로 디자인을 다르게 하고싶다면 얼마든지 분기점을 여러개로 작업할 수 있다.
하지만 그만큼 공수가 많이 들어가니 사이트의 특성에 따라 잘 작성해보자..
