상세 컨텐츠

본문 제목

HTML, CSS, 반응형 웹

HTML_CSS

by 헬로제이콥 2024. 11. 12. 21:37

본문

 

HTML, CSS란 무엇일까요?

  • HTML (HyperText Markup Language): 웹 페이지의 기본 구조를 만드는 언어입니다. 웹 페이지의 제목, 단락, 이미지, 링크 등 모든 요소를 HTML 태그를 사용하여 정의합니다. 마치 건물을 지을 때 벽돌을 쌓는 것과 같다고 생각하면 됩니다.
  • CSS (Cascading Style Sheets): HTML로 만들어진 웹 페이지의 디자인을 담당하는 언어입니다. 글꼴, 색상, 여백, 배치 등을 조절하여 웹 페이지를 예쁘게 꾸밀 수 있습니다. 마치 건물을 꾸미기 위해 페인트칠을 하고 가구를 배치하는 것과 같습니다.

반응형 웹이란 무엇일까요?

다양한 크기의 화면 (스마트폰, 태블릿, 데스크탑 등)에서도 웹 페이지가 최적화되어 보이도록 하는 것을 반응형 웹 디자인이라고 합니다. 마치 하나의 옷이 다양한 체형에 맞춰 변형되는 것처럼, 웹 페이지도 사용하는 기기에 따라 자동으로 크기와 레이아웃이 조절됩니다.

반응형 웹을 만드는 방법

반응형 웹을 만들기 위해서는 HTML과 CSS를 함께 사용합니다. 특히 CSS에서 미디어 쿼리라는 기능을 사용하여 화면 크기에 따라 스타일을 다르게 적용할 수 있습니다.

예시:

CSS
/* 모든 화면 크기 */
body {
  font-size: 16px;
}

/* 화면 너비가 768px 이하일 때 */
@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}
코드를 사용할 때는 주의가 필요합니다.
 

위 예시에서 @media는 미디어 쿼리를 나타내고, (max-width: 768px)는 화면 너비가 768px 이하일 때 적용되는 스타일을 정의합니다. 즉, 화면이 좁아지면 글자 크기가 작아져 모바일 환경에서 보기 편하게 됩니다.

다양한 예제

  • 레이아웃 변경:
    • 화면이 좁아지면 두 개의 열로 나뉘어 있던 콘텐츠를 하나의 열로 변경
    • 메뉴를 햄버거 메뉴로 변경
  • 이미지 크기 조절:
    • 화면 크기에 따라 이미지 크기를 자동으로 조절하여 용량을 줄이고 로딩 속도를 향상
  • 폰트 크기 조절:
    • 화면 크기에 따라 폰트 크기를 조절하여 가독성을 높임

간단한 반응형 웹 예제: 모바일 화면에 맞춰 메뉴가 햄버거 메뉴로 변하는 경우

 

HTML 구조

HTML
<!DOCTYPE html>
<html>
<head>
  <title>반응형 웹 예제</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>반응형 웹사이트</h1>
    </header>
    <main>
        <p>이것은 반응형 웹 디자인의 예제입니다.</p>
        <img src="./images/bg0.jpg" alt="예시 이미지">
    </main>
    <footer>
        <p>저작권 © 2024</p>
    </footer>
</body>
</html>
코드를 사용할 때는 주의가 필요합니다.
 

CSS 스타일 (style.css)

CSS
/* 기본 스타일 */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}

main {
    padding: 1rem;
}

/* 미디어 쿼리 */
@media (max-width: 600px) {
    body {
        background-color: #eb5d5d;
    }
    
    header, footer {
        font-size: 0.8rem;
    }
    
    main {
        font-size: 0.9rem;
    }
}
 
설명
  • HTML: 기본적인 웹 페이지 구조를 만들고, 메뉴를 <nav> 태그 안에 배치했습니다.
  • CSS:
    • 기본 스타일: 메뉴 항목을 가로로 나열하고 간격을 조절합니다.
    • 미디어 쿼리: 화면 너비가 768px 이하일 때 (모바일) 메뉴를 크기 조절 색깔 조절 합니다.

작동 원리

  1. 화면 크기 확인: 브라우저가 화면 크기를 감지합니다.
  2. 미디어 쿼리 적용: 화면 크기가 768px 이하일 때 미디어 쿼리에 해당하는 CSS 스타일이 적용됩니다.

추가 기능

  • JavaScript: 메뉴 토글 버튼을 만들고 클릭하면 메뉴가 열리고 닫히도록 구현할 수 있습니다.
  • CSS 애니메이션: 메뉴가 열리고 닫힐 때 부드러운 애니메이션 효과를 추가할 수 있습니다.
  • 다양한 미디어 쿼리: 다양한 화면 크기에 맞춰 더욱 세밀하게 디자인을 조절할 수 있습니다.

'HTML_CSS' 카테고리의 다른 글

CSS Flexbox  (0) 2024.11.12
HTML, CSS, 그리고 미디어 쿼리  (2) 2024.11.12
CSS 애니메이션  (0) 2024.11.12
CSS 트랜지션  (0) 2024.11.12
CSS 변형 함수  (0) 2024.11.12

관련글 더보기

티스토리툴바