HTML과 CSS를 사용한 반응형 웹 디자인 기초 🌐

작성: 2024년 09월 12일읽기: 약 3분

웹 개발의 세계에 오신 것을 환영합니다! 오늘은 HTML과 CSS를 사용하여 반응형 웹 디자인의 기초를 배워볼 것입니다. 반응형 웹 디자인은 다양한 화면 크기와 해상도에서 웹사이트가 잘 보이게 하는 중요한 기술입니다. 이를 통해 사용자가 어떤 기기를 사용하든 최상의 경험을 할 수 있습니다.

HTML과 CSS란?

HTML은 웹 페이지의 구조를 만드는 데 사용되는 표준 마크업 언어입니다. CSS는 이러한 웹 페이지에 스타일을 적용하는 데 사용됩니다. 함께 사용하면, 멋진 웹사이트를 만들 수 있습니다.

반응형 웹 디자인의 기본

반응형 웹 디자인의 핵심은 다양한 화면 크기에 맞게 콘텐츠를 자동으로 조정하는 것입니다. 이를 위해 CSS의 @media 규칙을 사용합니다.

예시: @media 규칙

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

이 코드는 화면의 너비가 600px 이하일 때만 바디의 배경색을 lightblue로 설정합니다. 이런 식으로 화면 크기에 따라 다른 스타일을 적용할 수 있습니다.

HTML 구조

HTML 문서의 기본 구조는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
    <title>반응형 웹 페이지</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>반응형 웹 디자인에 오신 것을 환영합니다!</h1>
    <p>이것은 당신의 첫 번째 반응형 웹 페이지입니다.</p>
</body>
</html>

CSS 스타일링

CSS를 사용하여 HTML 요소에 스타일을 추가할 수 있습니다. 예를 들어, 다음 CSS는 모든 <h1> 태그에 대한 글꼴 크기와 색상을 설정합니다:

h1 {
    color: navy;
    font-size: 24px;
}

실습: 간단한 반응형 웹 페이지 만들기

이제 배운 내용을 토대로 간단한 반응형 웹 페이지를 만들어 봅시다. HTML과 CSS 파일을 만들고, 위에서 배운 @media 규칙을 사용하여 화면 크기에 따라 다른 스타일을 적용해 보세요.

HTML 파일(index.html)을 만듭니다.
CSS 파일(style.css)을 만들고, 다양한 화면 크기에 따라 스타일을 적용합니다.
브라우저에서 결과를 확인합니다.

마무리

HTML과 CSS를 사용한 반응형 웹 디자인의 기초를 배웠습니다. 이 기술을 활용하면, 모든 사용자에게 최적의 웹사이트 경험을 제공할 수 있습니다. 계속 연습하고, 다양한 디자인을 시도해 보세요. 웹 개발의 세계는 무한한 가능성을 제공합니다!