HTML Div 및 CSS 스타일링 마스터하기 - 웹 페이지 레이아웃 튜토리얼

소개

이 랩에서는 HTML <div> 태그를 사용하여 웹 페이지를 여러 섹션 또는 부분으로 나누는 방법을 배우게 됩니다. 또한 <div> 태그를 사용하여 그룹화된 요소에 CSS 를 적용하는 방법도 배우게 됩니다.

참고: index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

웹 페이지 구조 생성

텍스트 편집기에서 index.html 파일을 엽니다.

먼저, doctype 선언, <html>, <head>, 그리고 <body> 태그를 추가하여 HTML 파일의 기본 구조를 생성합니다.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body></body>
</html>

헤더 추가

이 단계에서는 <div> 태그를 사용하여 웹 페이지에 헤더 섹션을 추가합니다.

<body> 태그 안에 클래스 이름이 "header"인 <div> 태그를 추가합니다.

<div class="header"></div>

헤더 섹션을 나타내기 위해 <div> 태그 안에 내용을 추가합니다. 예를 들어:

<div class="header">
  <h1>Welcome to my website</h1>
</div>

사이드바 및 메인 콘텐츠 섹션 추가

다음으로, <div> 태그를 사용하여 웹 페이지에 사이드바와 메인 콘텐츠 섹션을 추가합니다.

<body> 태그 안에 클래스 이름이 "container"인 또 다른 <div> 태그를 추가합니다.

<div class="container"></div>

"container" <div> 태그 안에 사이드바와 메인 콘텐츠를 위한 두 개의 <div> 태그를 더 추가합니다. 각각 "sidebar"와 "main-content"라는 클래스 이름을 지정합니다.

<div class="container">
  <div class="sidebar">
    <!-- add sidebar content -->
  </div>
  <div class="main-content">
    <!-- add main content here -->
  </div>
</div>

사이드바 및 메인 콘텐츠 섹션을 나타내기 위해 <div> 태그 안에 내용을 추가합니다. 예를 들어:

<div class="container">
  <div class="sidebar">
    <h2>About Me</h2>
    <p>Hi, my name is John and I'm a web developer.</p>
  </div>
  <div class="main-content">
    <h2>My Latest Project</h2>
    <p>Check out my latest web project!</p>
  </div>
</div>

푸터 추가

마지막으로, <div> 태그를 사용하여 웹 페이지에 푸터 섹션을 추가합니다.

<body> 태그 안에 클래스 이름이 "footer"인 또 다른 <div> 태그를 추가합니다.

<div class="footer"></div>

푸터 섹션을 나타내기 위해 <div> 태그 안에 내용을 추가합니다. 예를 들어:

<div class="footer">
  <p>&copy; 2021 My Website. All rights reserved.</p>
</div>

웹 페이지 스타일링

<div> 태그를 사용하여 웹 페이지의 기본 구조를 만들었으므로, 이제 CSS 스타일을 적용하여 페이지의 모양을 개선할 수 있습니다.

텍스트 편집기에서 style.css 파일을 열거나, style.css라는 새 파일을 생성하고 <head> 섹션 내의 <link> 태그를 사용하여 index.html 파일에 연결합니다.

<!doctype html>
<html>
  <head>
    <title>My Web Page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body></body>
</html>

style.css 파일에서 이전에 사용했던 다양한 클래스 이름에 다음 스타일을 추가합니다.

/* Header styles */
.header {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

/* Container styles */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

/* Sidebar styles */
.sidebar {
  width: 30%;
  padding: 10px;
  background-color: #f2f2f2;
}

/* Main Content styles */
.main-content {
  width: 65%;
  padding: 10px;
  background-color: #fff;
}

/* Footer styles */
.footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px;
}

웹 페이지 미리보기

<div> 태그를 사용하여 웹 페이지 구조를 만들고 CSS 스타일을 적용했으므로, 웹 브라우저에서 웹 페이지를 미리 보겠습니다.

index.html 및 style.css 파일을 저장합니다.
웹 브라우저에서 index.html 파일을 열어 웹 페이지를 확인합니다.

CSS 를 사용하여 멋지게 스타일링된 헤더, 사이드바, 메인 콘텐츠 및 푸터 섹션이 있는 웹 페이지를 볼 수 있습니다.

요약

이 랩에서는 HTML <div> 태그를 사용하여 웹 페이지를 여러 섹션 또는 부분으로 나누는 방법을 배웠습니다. 또한, 할당된 클래스 이름을 사용하여 다양한 섹션에 CSS 스타일을 적용하는 방법도 배웠습니다. 이러한 기술을 통해 더 복잡하고 시각적으로 매력적인 웹 페이지를 만들 수 있습니다.

HTML Div 태그 및 CSS 스타일링

소개