HTML

HTML 02 <div>

와라리요 2023. 10. 31. 12:26

 - html의 태그(tag) 중 사용 빈도수로 몇 가지만 알아보겠습니다.

<div>란?

 - "division"을 나타내며 웹 페이지의 구조를 정의하는 데 사용되는 요소입니다. <div>는 일반적으로 다른 HTML 요소들을 묶어 그룹화하거나 스타일링하기 위해 사용됩니다. 주로 CSS (Cascading Style Sheets)를 사용하여 스타일을 지정하거나 JavaScript를 사용하여 동적으로 조작할 때 유용합니다.

 

<div> 요소의 주요 특징은 다음과 같습니다:

  1. 블록 레벨 요소: <div>는 기본적으로 블록 레벨 요소로, 새로운 줄에서 시작하고 수평 공간을 차지합니다. 이것은 다른 요소들을 위와 아래에 배치하는 데 사용됩니다.
  2. 그룹화: <div>를 사용하여 웹 페이지의 구조를 나눌 수 있습니다. 예를 들어, <div>를 사용하여 헤더, 사이드바, 본문, 푸터 등을 그룹화할 수 있습니다.
  3. 스타일링: <div>는 스타일을 지정하기 위해 CSS를 사용할 때 주로 사용됩니다. 특정 <div> 요소에 스타일을 적용하려면 CSS 선택자를 사용하여 스타일 규칙을 정의합니다.

 

예

(코드)

<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지 예제</title>
</head>
<body>
    <div id="header">
        <h1>웹 페이지 제목</h1>
    </div>
    <div id="sidebar">
        <ul>
            <li><a href="#">메뉴 항목 1</a></li>
            <li><a href="#">메뉴 항목 2</a></li>
        </ul>
    </div>
    <div id="content">
        <h2>본문 제목</h2>
        <p>본문 내용이 여기에 들어갑니다.</p>
    </div>
    <div id="footer">
        <p>2023 웹 페이지 제작자</p>
    </div>
</body>
</html>

(웹)

웹 페이지 예제

본문 제목

본문 내용이 여기에 들어갑니다.