HTML <div> 태그

  • 이전 페이지 <dir>
  • 다음 페이지 <dl>

정의와 사용법

<div> 태그는 HTML 문서에서 분할이나 부분(구분이나 섹션, division/section)을 정의합니다.

<div> 태그는 문서를 독립적인, 다른 부분으로 나눌 수 있습니다. 그것은 양식을 사용하지 않고 정확한 조직 도구로 사용될 수 있습니다.

모든 유형의 내용을 넣을 수 있습니다. <div> 모든 유형의 내용을 넣을 수 있습니다.<div> 태그 내!

를 사용할 수 있습니다. 그런 다음, CSS를 사용하여 스타일을 설정하거나 JavaScript를 사용하여 작업을 수행할 수 있습니다. id 또는 class 를 사용하여 <div>를 사용하면 해당 태그의 작용이 더욱 효과적이 됩니다. class 또는 id 속성을 사용하여 <div> 태그에 스타일을 설정합니다.

주의:기본적으로, 브라우저는 항상 <div> 요소 전후에 줄 바꿈 문자를 추가합니다.

사용법

<div> 블록 요소입니다. 이는 내용이 자동으로 새 줄을 시작한다는 의미입니다. 실제로, 줄 바꿈은 <div> 기본적인 독립적인 형식 표현을 통해 <div> 의 class 또는 id 추가 스타일을 적용할 필요가 없습니다.

각각에 <div> 또는 id를 추가할 수 있습니다. 하지만 이렇게 하면 일정한 이점도 있습니다.

같은 요소에 <div> 요소 적용 class 또는 id 속성이지만, 더 일반적으로는 중 하나만 적용됩니다. 이 두 가지의 주요 차이점은 class가 그룹 요소(유사한 요소 또는 특정 요소 그룹)에 사용되고, id가 단일하고 독특한 요소를 식별하는 데 사용된다는 것입니다.

추가로 참조:

HTML 강의:HTML 블록 요소와 인라인 요소

HTML 강의:HTML 레이아웃

HTML DOM 참조서:Div 객체

예제

CSS를 사용하여 스타일을 설정한 문서에서의 <div> 부분:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>이 div 요소에 포함된 제목입니다</h2>
  <p>이 div 요소에 포함된 일부 텍스트입니다.</p>
</div>
</body>
</html>

직접 시험해보세요

사례 분석

<body>
 <h1>새 웹사이트</h1>
  <p>일부 글자. 일부 글자. 일부 글자...</p>
  ...
 <div class="news">
  <h2>뉴스 헤드라인 1</h2>
  <p>일부 글자. 일부 글자. 일부 글자...</p>
  ...
</div>
 <div class="news">
  <h2>뉴스 헤드라인 2</h2>
  <p>일부 글자. 일부 글자. 일부 글자...</p>
  ...
 </div>
 ...
</body>

예시 설명

정말로 보신 것처럼, 위의 이 HTML은 뉴스 웹사이트 구조를 모의합니다. 각 div은 각 뉴스의 제목과 요약을 결합합니다. 다시 말해, div은 문서에 추가적인 구조를 제공합니다. 또한, 이 div들이 동일한 요소에 속하기 때문에 class="news"를 사용하여 이러한 div들을 식별할 수 있습니다. 이렇게 하면 div에 적절한 의미를 추가하고, 스타일을 사용하여 div을 포맷화하는 데 편리합니다. 그리고 이익을 얻을 수 있습니다.

훈련:class와 id의 사용법을 더 깊이 배우기 위해, 《W3school의 구조화된 표시》这一장에서 div, id 그리고 다른 도구자 div, id 및 다른 도구자라는 섹션을 참조하십시오.

전역 속성

<div> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 전역 속성.

이벤트 속성

<div> 태그는 또한 이벤트 속성을 지원합니다 HTML에서의 이벤트 속성.

기본 CSS 설정

대부분의 브라우저는 다음과 같은 기본 값으로 표시합니다 <div> 요소:

div {
  display: block;
}

직접 시험해보세요

브라우저 지원

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
지원 지원 지원 지원 지원
  • 이전 페이지 <dir>
  • 다음 페이지 <dl>