div 태그란 무엇입니까? HTML에서 div 태그를 사용하는 방법은 무엇입니까?-HTML 튜토리얼-php.cn

div 태그란 무엇입니까? HTML에서 div 태그를 사용하는 방법은 무엇입니까?

不言

풀어 주다： 2018-11-26 13:36:26

원래의

8163명이 탐색했습니다.

HTML의 div 태그는 웹 페이지를 구현하는 데 중요한 기초이며 HTML 지식을 익히는 데 필수적입니다. 이 글에서는 HTML에서 div 태그를 사용하는 방법을 소개합니다.

div 태그란 무엇인가요?

div 태그는 필요한 구조 집합을 나타냅니다. 목적은 div 태그 사이에 끼워진 문자를 블록으로 나누는 것입니다. 따라서 별도의 div 태그는 색상 변경이나 문자 스타일 변경 등의 효과가 없습니다.

또한 div 태그가 다른 요소에 맞지 않으면 아직 사용하지 마세요.

그러나 실제로 어떤 요소를 지정해야 할 때 우리는 div 태그를 사용하는 경우가 많습니다.

div 태그에 id와 class를 추가하고 CSS를 사용하여 id와 class를 처리하면 div 태그의 색상을 변경하거나 다른 스타일로 변경할 수 있습니다.

div 태그와 섹션 태그 비교

문서에 단일 컬렉션을 표시하려면 섹션 태그가 더 적합한 것 같아요#🎜🎜 ##🎜🎜 #section 태그는 그룹을 문서로 표시하는 데 사용됩니다.

섹션에는 섹션의 항목이 있는 것 같아요

이 장 절의 개념처럼 섹션 태그는 블록이며 일반적으로 추출되면 의미가 없습니다.

신문 기사에서는 장 항목만 스크랩해도 기사 전체의 의도가 전달되지 않는 것 같아요.

비교적으로 섹션 태그는 div 태그와 다르게 사용되지만 그룹을 나타내는 문장으로 사용됩니다.

div 태그 사용법

div 태그는 다음과 같이 작성합니다.

<div>内容</div>

로그인 후 복사

위에서 언급했듯이 div 태그는 ID와 클래스를 추가하여 매우 유용합니다. ID와 클래스를 할당하는 방법은 다음과 같습니다.

<div id="id名">内容</div>
<div id="class名">内容</div>

로그인 후 복사

그런데 아이디와 클래스가 뭔가요? id와 class는 속성이라고 하며, id는 D 번호가 있는 것과 같습니다. 동일한 ID 이름을 가진 것은 페이지 내에서 한 번만 사용할 수 있습니다.

대신, 한 번만 사용하는 항목에는 id 속성을 사용합니다.

반면, class 속성은 같은 페이지에서 여러 번 사용될 수 있습니다. "이 요소는 이 요소와 동일한 색상을 갖습니다."를 지정하려면 class 속성을 사용하세요.

물론, class 속성을 한 번만 사용해도 사용할 수 있습니다.

실제 예를 살펴보겠습니다

먼저 div 태그로 둘러싸인 결과를 살펴보겠습니다. #🎜 🎜#id와 class에는 각 명사의 색상 이름을 지정합니다.
다음 소스 코드를 사용하여 div.html을 만들고 브라우저에서 엽니다.

div.html

<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="red">苹果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="lightyellow">蒲公英</div>
  </body>
</html>

로그인 후 복사

은 브라우저에 다음과 같이 표시됩니다.

#🎜 🎜#위에 텍스트만 표시되는데, 이제 CSS를 배경색으로 사용해 보겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
 #red {
        background-color: #FF0000;
      }
      .skyblue {
        background-color: skyblue;
      }
      .yellow{
        background-color: yellow;
      }
      .blue{
        background-color: blue;
      }
      .beige{
        background-color: beige;
      }
 </style>
  </head>
  <body>
  <div id="red">苹果</div>
    <div class="skyblue">天空</div>
    <div class="yellow">香蕉</div>
    <div class="blue">大海</div>
    <div class="beige">蒲公英</div>
  </body>
</html>

로그인 후 복사

은 브라우저에 다음과 같이 표시됩니다.

div 태그란 무엇입니까? HTML에서 div 태그를 사용하는 방법은 무엇입니까?