Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML div는 무엇이며 어떻게 사용됩니까?

<div> CSS를 사용하여 요소에 스타일을 적용할 수 있도록 요소를 그룹화하기 위해 HTML에서 사용되는 일반 컨테이너입니다. div 요소는 기본적으로 비어 있으며 작동하려면 HTML 요소로 채워야 합니다. <div> 태그는 쌍으로 옵니다. 하나의 열린 태그와 하나의 닫는 태그:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 1px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
 
       }
       .blue {
           background-color: royalblue;
           border: none;
       }
       .purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div class="square blue">1</div>
           <div class="square purple">2</div>
 
       </div>
</body>
</html>

<div>에 대해 가장 주의해야 할 사항 태그는 아니다는 것입니다. 시맨틱 HTML 요소. 즉, <div> (,

,
등과 달리) 태그를 보고 수행합니다.

너무 많이 사용하면 화면 판독기와 관련된 접근성 문제가 발생할 수 있습니다. <div>를 사용해야 합니다. 더 나은 선택이 될 수 있는 시맨틱 HTML 요소가 없을 때 최후의 수단으로 태그를 사용합니다.

<div> 컨테이너는 블록 수준 요소입니다. CSS 또는 인라인 스타일을 사용하여 개발자가 제어하지 않는 한 뷰포트의 전체 너비를 차지합니다. 또한 display 속성이 일종의 인라인 값이나 플렉스로 변경되지 않는 한 앞뒤에 줄 바꿈이 있습니다.

레이아웃 측면에서 div는 상당히 유연합니다. 그들은 서로 안에 중첩될 수 있습니다. 즉, <div> 컨테이너는 단락을 나누므로 <div>를 중첩하지 마십시오. <p> 내부의 태그 꼬리표. 또한 <div>를 삽입할 때 이상한 이상이 있습니다. <h1>처럼 보이는 헤드라인 태그(

,

등) 내부의 컨테이너 승리하고 <div> 무시됩니다.

속성

HTML <div> 요소는 HTML의 이벤트 및 전역 속성에 액세스할 수 있습니다. 이벤트 속성은 사용자가 어떤 방식으로든 웹 페이지와 상호 작용할 때 사용되는 속성입니다. 예를 들어 사용자가 이미지를 클릭할 때 onclick 또는 요소 위로 마우스를 이동할 때 onmouseover가 있습니다. 전역 속성은 모든 HTML 요소에서 사용할 수 있는 속성입니다.

이러한 HTML 속성의 전체 목록은 Mozilla 개발자 네트워크 웹사이트에서 찾을 수 있습니다.

스타일링 방법

<div> 스타일 지정 매우 간단하며 여러 가지 방법으로 수행할 수 있습니다. 인라인 스타일은 <div>에 style 속성을 추가하여 수행할 수 있습니다. 스타일 속성 및 값이 문자열로 추가됨:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Inline Styling</title>
<body>
       <div style="width:500px;border: 3px solid black; padding: 20px;">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div style="background-color: royalblue; border: none;">1</div>
           <div style="background-color: purple; border: none;">2</div>
       </div>
</body>
</html>

스타일은 <style>에서도 수행할 수 있습니다. <head>의 태그 HTML 문서 또는 외부 스타일시트에서 <div> class 또는 id 속성이 작동합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

같은 방식으로 스타일을 지정하려는 여러 요소에 클래스를 사용할 수 있습니다. id는 HTML 문서에서 한 번만 사용할 수 있습니다. 다음과 같이 생각하십시오. 같은 학년에 같은 나이, 교사, 과목을 가진 여러 학생을 그룹화할 수 있지만 각 학생은 인간으로서 자신이 누구인지 설명하는 고유한 개인 ID 속성을 가지고 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       * {
           box-sizing: border-box;
       }
       body {
           font-family: Arial, Helvetica, sans-serif;
           font-size: large;
       }
       .first {
           width: 500px;
           border: 3px solid black;
           padding: 20px
       }
       .square {
           width: 100%;
           height: 250px;
           color: white;
           border: none;
 
       }
       #blue {
           background-color: royalblue;
           border: none;
       }
       #purple {
           background-color: purple;
           border: none;
       }
   </style>
</head>
<body>
       <div class="first">
           <h4>I'm a div that is holding two smaller divs.</h4>
           <div id="blue" class="square">1</div>
           <div id="purple" class="square">2</div>
       </div>
</body>
</html>

하나의 <div>에서 class 속성과 id 속성을 동시에 사용할 수 있습니다. . id는 클래스 속성보다 더 구체적인 것으로 취급되므로 특정 <div> id 속성을 사용할 수 있으므로 모든 클래스 스타일을 재정의합니다.



결론

오늘 우리는 <div> 즉, 속성이 무엇이며 요소의 스타일이 지정되는 방식입니다. 표시 속성이 <div>에 미치는 영향에 대한 자세한 내용은 컨테이너, 박스 모델 및 플렉스박스 모델에 대한 CareerKarma의 기사를 참조하십시오.