반응형 디자인이란?

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 61번째.

웹 디자인에서 반응형 디자인은 데스크톱 컴퓨터 모니터부터 휴대폰에 이르기까지 다양한 기기에서 적응하고 최적의 시청 경험을 제공하는 웹 페이지를 만드는 것을 목표로 하는 접근 방식입니다. 반응형 웹사이트는 보고 있는 기기의 화면 크기, 해상도 및 방향에 따라 레이아웃, 콘텐츠 및 기능을 자동으로 조정합니다. 반응형 디자인의 목표는 사용자가 사용하는 기기에 관계없이 웹사이트에 쉽게 접근하고 상호 작용할 수 있도록 하는 것입니다.

반응형 디자인은 다음과 같은 기술의 조합을 통해 구현됩니다:

유연한 그리드 및 레이아웃: CSS grid 또는 Flexbox를 사용하여 다양한 화면 크기에 적응할 수 있는 레이아웃을 만듭니다.

유연한 이미지 및 미디어: 이미지와 기타 미디어가 레이아웃에 맞춰 비례적으로 크기가 조정되도록 합니다.

미디어 쿼리(Media queries): 화면 너비, 높이, 방향과 같은 기기의 특성에 따라 서로 다른 CSS 스타일을 적용합니다.

더 많은 사람들이 웹을 탐색하기 위해 모바일 기기를 사용함에 따라, 웹사이트를 사용하기 쉽게 만들기 위해 반응형 디자인은 필수적입니다. 이는 모든 기기에서 사이트가 보기 좋고 잘 작동하도록 보장하여 사용자에게 매끄럽고 일관된 경험을 제공합니다.

챌린지

쉬움

제목(<h1>), 단락(<p>), 그리고 두 개의 이미지(<img>)가 포함된 HTML 문서가 주어집니다. 여러분의 작업은 요소들을 반응형으로 만들고 고정 높이(fixed height)와 자동 높이(auto height)의 차이를 명확하게 보여주기 위해 몇 가지 기본적인 CSS를 추가하는 것입니다. 다음 단계를 따르세요:

<h1> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 5vw로 설정합니다. 이렇게 하면 제목의 글꼴 크기가 뷰포트 너비에 따라 반응형으로 변하게 됩니다.
<p> 요소를 대상으로 하는 CSS 규칙을 작성하세요. font-size를 3vw로 설정합니다. 이렇게 하면 단락의 글꼴 크기가 뷰포트 너비에 따라 반응형으로 변하게 됩니다.
.fixed-height 클래스를 대상으로 하는 CSS 규칙을 작성하세요. width를 100%로, height를 150px로 설정합니다. 이렇게 하면 고정된 높이를 강제하여 왜곡된 이미지가 생성됩니다.
.auto-height 클래스를 대상으로 하는 CSS 규칙을 작성하세요. width를 100%로, height를 auto로 설정합니다. 이렇게 하면 이미지가 가로세로 비율을 유지하면서 비례적으로 크기가 조정됩니다.
컨테이너(.container)에 대한 CSS 규칙을 작성하여 width를 300px로, border를 2px solid #ccc로, margin을 20px로, padding을 10px로 설정하세요.

치트 시트

반응형 디자인은 유연한 레이아웃, 확장 가능한 미디어, 미디어 쿼리를 통해 다양한 기기와 화면 크기에 적응하는 웹 페이지를 만듭니다.

반응형 디자인을 위한 주요 기술:

유연한 그리드 및 레이아웃: CSS Grid 또는 Flexbox 사용
유연한 이미지 및 미디어: 레이아웃에 맞춰 비례적으로 크기 조정
미디어 쿼리: 기기 특성에 따라 다른 스타일 적용

반응형 타이포그래피를 위해 뷰포트 단위를 사용하세요:

h1 {
  font-size: 5vw;
}

p {
  font-size: 3vw;
}

적절한 크기 조정을 통해 이미지를 반응형으로 만드세요:

/* 고정 높이 - 왜곡 발생 */
.fixed-height {
  width: 100%;
  height: 150px;
}

/* 자동 높이 - 가로세로 비율 유지 */
.auto-height {
  width: 100%;
  height: auto;
}

직접 해보기

<html>
<head>
    <title>What is Responsive Design?</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>Mount Everest: The World's Highest Peak</h1>
    <p>Mount Everest, standing at 8,848.86 meters (29,031.7 feet), is the tallest mountain on Earth. Located in the Himalayas on the border between Nepal and Tibet, it attracts climbers from around the world. Scaling Everest is a challenging journey due to its extreme weather, thin air, and rough terrain.</p>
    
    <div class="container">
        <h3>Fixed Height (Distorted)</h3>
        <img class="fixed-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Distorted Image">
    </div>
    
    <div class="container">
        <h3>Auto Height (Preserved Aspect Ratio)</h3>
        <img class="auto-height" src="https://upload.wikimedia.org/wikipedia/commons/e/e7/Everest_North_Face_toward_Base_Camp_Tibet_Luca_Galuzzi_2006.jpg" alt="Proper Ratio Image">
    </div>
</body>
</html>