CSS RWD - 미디어 쿼리

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 반응형 웹 디자인(RWD)의 흥미로운 세계로 접수하고, 그 중에서도 가장 강력한 도구 중 하나인 미디어 쿼리에 집중할 것입니다. 아름다운 그림을 그리는 것을 상상해 보세요, 하지만 이 그림은 작은 우표와 거대한 현수막 모두에서 멋지게 보여야 합니다. 이것이 바로 우리가 웹사이트를 만들 때 하는 일이며, 미디어 쿼리는 우리의 마법의 붓입니다!

CSS RWD - Media Queries

미디어 쿼리란?

미디어 쿼리는 CSS 세계의 변色龍과도 같습니다. 그것은 웹사이트가 사용자가 보고 있는 장치에 따라 외관을 조정하고 변화시킬 수 있게 해줍니다. 스마트폰, 태블릿, 데스크톱 컴퓨터 중 어느 장치에서도 사이트가 멋지게 보이도록 도와줍니다.

기본적인 예제로 시작해 보겠습니다:

@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}

이 코드에서 우리는 "브라우저야, 화면 너비가 600ピクセル 이하라면 배경색을 연 파랑으로 칠하라!"라고 말하고 있습니다. 작은 화면에서 웹사이트가 시원하고 새로운 모습을 보이게 됩니다.

CSS RWD 미디어 쿼리 - width 속성

width 속성은 반응형 디자인을 만들 때 우리의 가장 친한 친구입니다. 장치의 화면 너비에 따라 다른 스타일을 설정할 수 있게 해줍니다.

보다 포괄적인 예제를 보겠습니다:

/* 기본 스타일: 더 큰 화면을 위한 */
.container {
width: 80%;
margin: 0 auto;
}

/* 768px 이하의 화면에 대한 스타일 */
@media screen and (max-width: 768px) {
.container {
width: 95%;
}
}

/* 480px 이하의 화면에 대한 스타일 */
@media screen and (max-width: 480px) {
.container {
width: 100%;
}
}

이 예제에서는 다음과 같은 일이 일어납니다:

기본적으로, 컨테이너는 80% 너비로 양쪽에 여백이 있습니다.
화면이 768px 이하로 줄어들 때, 컨테이너 너비를 95%로 늘립니다.
매우 작은 화면(480px 이하)에서는 컨테이너를 전체 너비로 만듭니다.

웹사이트가 요가를 하듯이, 어떤 화면에도 완벽하게 맞춰지는 것입니다!

CSS RWD 미디어 쿼리 - 여러 브레이크포인트

이제 브레이크포인트에 대해 이야기해 보겠습니다. 이는 웹사이트의 레이아웃이 사용자 경험을 최적화하기 위해 변화하는 점입니다. 이를 "브레이크포인트"라고 부릅니다.

여러 브레이크포인트를 사용하는 예제를 보겠습니다:

/* 기본 스타일 */
body {
font-size: 16px;
}

/* 큰 화면 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
}

/* 중간 화면 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
}

/* 작은 화면 */
@media screen and (max-width: 991px) {
body {
font-size: 15px;
}
}

이 예제에서는 다음과 같이 화면 크기에 따라 글자 크기를 조정합니다:

큰 화면(1200px 이상)에서는 글자 크기를 18px로 늘립니다.
중간 화면(992px에서 1199px 사이)에서는 17px의 글자 크기를 사용합니다.
작은 화면(991px 이하)에서는 글자 크기를 약간 줄인 15px로 설정합니다.

웹사이트가 반응형 옷장처럼, 무엇을 먹든지 항상 완벽하게 맞는 것입니다!

CSS RWD 미디어 쿼리 - 방향 사용

장치가 수직으로还是在水平으로 들고 있는지 웹사이트가 알 수 있습니다. 그리고 이 정보를 사용하여 더 정교한 디자인을 만들 수 있습니다.

방향 기능을 사용하는 방법을 보겠습니다:

/* 포trait 방향의 스타일 */
@media screen and (orientation: portrait) {
.sidebar {
width: 100%;
float: none;
}
.main-content {
margin-left: 0;
}
}

/* landscape 방향의 스타일 */
@media screen and (orientation: landscape) {
.sidebar {
width: 25%;
float: left;
}
.main-content {
margin-left: 26%;
}
}

이 예제에서는 다음과 같습니다:

장치가 수직 모드(높이가 너비보다 큼)일 때, 사이드바를 전체 너비로 만들고浮动을 제거합니다.
가로 모드에서는 사이드바를 25% 너비로 만들고 가로 정렬합니다.

웹사이트가 악기를 하듯이, 포trait과 landscape 사이에서 스타일을 변경합니다!

모든 것을 함께

이제 기본적인 내용을 다 배웠으니, 우리가 배운 모든 것을 결합한 더 복잡한 예제를 보겠습니다:

/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}

.container {
width: 80%;
margin: 0 auto;
}

/* 큰 화면 */
@media screen and (min-width: 1200px) {
body {
font-size: 18px;
}
.container {
max-width: 1140px;
}
}

/* 중간 화면 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
body {
font-size: 17px;
}
.container {
max-width: 960px;
}
}

/* 작은 화면 */
@media screen and (max-width: 991px) {
body {
font-size: 16px;
}
.container {
width: 95%;
}
}

/* 매우 작은 화면 */
@media screen and (max-width: 576px) {
body {
font-size: 15px;
}
.container {
width: 100%;
padding: 0 15px;
}
}

/* 가로 방향 */
@media screen and (orientation: landscape) and (max-height: 500px) {
.header {
position: static;
}
.main-content {
margin-top: 20px;
}
}

이 포괄적인 예제는 다양한 화면 크기와 방향에 맞춰 완벽하게 반응하는 디자인을 만드는 방법을 보여줍니다. 우리는 글자 크기, 컨테이너 너비, 그리고 레이아웃을 장치의 특성에 따라 조정하고 있습니다.

결론

축하합니다! 미디어 쿼리를 통해 반응형 웹 디자인의 세계로 첫 걸음을 내디디셨습니다. 반응형 웹사이트를 만드는 것은 디지털 변신사가 되는 것과도 같습니다. 내용이 어떤 형태로든 멋지게 보이도록 해야 합니다.

미디어 쿼리를 연습하고 실험하면서, 모든 장치에서 원활하게 작동하는 디자인을 만드는 直感을 기를 수 있습니다. 계속 탐구하고, 코딩을 하고, 가장 중요한 것은 즐기세요! 웹사이트가 어디로 가든 멋지게 보일 것입니다.

방법	설명
`@media screen`	모든 화면 유형을 대상으로 합니다
`max-width`	최대 너비 조건을 설정합니다
`min-width`	최소 너비 조건을 설정합니다
`orientation: portrait`	장치가 수직 모드일 때 대상으로 합니다
`orientation: landscape`	장치가 가로 모드일 때 대상으로 합니다

기쁜 코딩을 하시고, 웹사이트가 항상 반응형이 되길 바랍니다!

Credits: Image by storyset