IT 강좌 CSS 기초 033_반응형 레이아웃

반응형 레이아웃

반응형 레이아웃은 다양한 화면 크기와 기기에 적응할 수 있는 웹 페이지 디자인 방법입니다. 반응형 레이아웃을 사용하면 데스크톱 컴퓨터, 태블릿, 휴대폰 등 다양한 기기에서 웹 페이지가 양호한 표시 효과를 유지할 수 있습니다.

미디어 쿼리

CSS 미디어 쿼리를 사용하면 기기의 특성(화면 너비, 높이, 기기 유형 등)에 따라 다른 스타일을 적용할 수 있습니다. 이를 통해 다양한 화면 크기에 대해 서로 다른 레이아웃을 정의할 수 있습니다.

예시:

1
/* PC */
2
@media (min-width: 992px) {
3
    * {
4
        background: yellow
5
    }
6
}
7
/* 태블릿 */
8
@media (min-width: 768px) and (max-width: 992px) {
9
    * {
10
        background: red
11
    }
12
}
13
/* 일반 휴대폰 */
14
@media (min-width: 576px) and (max-width: 768px) {
15
    * {
16
        background: green
17
    }
18
}
19
/* 소형 화면 기기 */
20
@media (max-width: 576px) {
21
    * {
22
       background: blue
23
    }
24
}

효과:

반응형 이미지

max-width: 100%;를 사용하여 이미지 및 미디어 요소가 작은 화면에서 컨테이너를 벗어나지 않도록 합니다. 예시:

1
    img {
2
      max-width: 100%; /* 이미지 최대 너비는 포함 요소의 100% */
3
      height: auto;    /* 가로 세로 비율 유지, 이미지 변형 방지 */
4
    }
5

6
    /* 작은 화면에서 이미지 크기 조정 */
7
    @media screen and (max-width: 600px) {
8
      img {
9
        max-width: 50%; /* 이미지 최대 너비는 포함 요소의 50% */
10
      }
11
    }

1
    <img src="zhaojian.jpg" alt="Responsive Image">

효과:

뷰포트 설정

<meta> 태그를 사용하여 뷰포트를 설정하고, 모바일 기기에서 페이지가 올바르게 확대/축소되도록 합니다.

예시:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 메타 태그는 모바일 브라우저에게 뷰포트 너비를 기기의 너비로 설정하고, 문서를 예상 크기의 100%로 확대하여 모바일 최적화 크기로 문서를 표시하도록 지시합니다.

뷰포트 메타 태그와 함께 다른 설정도 사용할 수 있지만, 일반적으로 위의 코드가 사용하고자 하는 설정입니다.

• initial-scale: 페이지의 초기 확대/축소 비율을 설정하며, 1로 설정합니다.
• height: 뷰포트에 특정 높이를 설정합니다.
• minimum-scale: 최소 확대/축소 수준을 설정합니다.
• maximum-scale: 최대 확대/축소 수준을 설정합니다.
• user-scalable: no로 설정하면 확대/축소를 차단합니다.

사용자가 직접 축소 및 확대할 수 있도록 minimum-scale, maximum-scale, 특히 user-scalable을 no로 설정하는 것을 피하세요.