이번 글에서는 HTML의 div 태그에 대해 살펴보겠습니다. HTML에는 다른 많은 HTML 태그와 콘텐츠 그룹에 사용되는 두 개의 중요한 태그가 있습니다. 하나는
구문:
다양한 HTML 태그에는 다음과 같은 열기 및 닫기 태그가 있습니다.
<div> Content of Div tag in HTML </div>
필수 데이터 또는 콘텐츠 섹션을 만들기 위해 컨테이너에 여러 div 태그가 사용됩니다. 예: 머리글, 바닥글, 탐색 모음, 표, 이미지, 텍스트 등 다양한 div 태그를 CSS를 사용하여 다르게 디자인할 수 있고 JavaScript를 사용하여 쉽게 조건을 적용할 수 있습니다.
div 태그는 다양한 HTML 태그와 텍스트를 함께 담을 수 있습니다.
div 태그를 사용한 예와 div 태그를 사용하지 않은 예를 볼 수 있습니다.
코드:
<html>
<head>
<title>how to work div</title>
<style type=text/css>
.one{
background-color:orange;
}
.two{
background-color:yellow;
}
</style>
</head>
<body>
<div class="one" >
<h1> Content1 of div tag in Html </h1>
<p> Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
</div>
<div class="two">
<h1> Content2 of div tag in Html </h1>
<p> To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc. </p>
</div>
</body>
</html>출력:
설명:
코드:
<html>
<head>
<title>how to work div</title>
<style type=text/css>
p{
background-color:orange;
}
h1{
background-color:yellow;
}
</style>
</head>
<body>
<h1> Content1 of div tag in Html </h1>
<p> Div tag is used for a group many HTML tags like table, list, a paragraph on a web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags. </p>
<h1> Content2 of div tag in Html </h1>
<p> To make section of required data or content multiple div tags are used in container.
Example: header, footer, navigation bar, table, images, texts etc.</p>
</body>
</html>출력:
설명:
다음은 div 태그의 용도와 요구 사항입니다.
다음은 언급된 예입니다.
이 예는 클래스가 포함된 div 태그입니다. 예를 들어 좌파, 중산층, 우파 등이 있습니다. div는 컨테이너가 수직으로 들어오는 것입니다. 그러나 한 섹션에 오른쪽, 왼쪽 또는 가운데로 다른 div를 배치할 수 있습니다. 이는 콘텐츠의 위치 관리에 유용합니다.
코드:
<html>
<head>
<title> Example1 </title>
<style type=text/css>
.leftdiv
{
float: left;
background-color:blue;
}
.middlediv
{
float: left;
background-color:green;
}
.rightdiv
{
float: left;
background-color:black;
}
div{
padding : 1%;
color: white;
background-color:grey;
width: 28%;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="leftdiv">
<h2> Left Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make a particular design for some special content div tag is useful because it does not
affect the div layout and any CSS design.
</p>
</div>
<div class="middlediv">
<h2> Middle Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used in empty web page to partition or make section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</div>
<div class="rightdiv">
<h2> Right Side </h2>
<p>Div tag is used for group many HTML tag like table, list, paragraph in web page.
Mostly div tag used for a web page to partition or make a section for content or HTML tags.
To make particular design for some special content div tag is useful because it is does not
affect on the div layout and any CSS design.
</p>
</p>
</div>
</body>
</html>출력:
테이블의 div 태그
이 예에서는 테이블에 div 태그를 사용했습니다. 때때로 테이블 레이아웃이 변경되지만 div 태그에 테이블을 넣으면 레이아웃에 영향을 받지 않습니다.
코드:
<html>
<head>
<title> Example2 </title>
<style type=text/css>
div{
color:white;
background-color:grey;
border:solid black;
}
tr, td{
border: 1px solid grey;
padding-top: 10px;
padding-bottom: 10px;
}
th {
padding-top: 10px;
padding-bottom: 10px;
text-align: left;
}
</style>
</head>
<body>
<div>
<h2> Student Information </h2>
<table>
<tr>
<th>student name</th>
<th>specialisation</th>
<th>city</th>
</tr>
<tr>
<td>vishu</td>
<td>computer and IT </td>
<td>kolkatta</td>
</tr>
<tr>
<td>john</td>
<td> graphics design</td>
<td> delhi</td>
</tr>
<tr>
<td>nagma</td>
<td> mechatronics</td>
<td>nagpur</td>
</tr>
<tr>
<td>erfan </td>
<td>animation video </td>
<td>mumbai</td>
</tr>
<tr>
<td> swadut </td>
<td> electronics</td>
<td> pune</td>
</tr>
<tr>
<td> manasi </td>
<td> CS </td>
<td> pune</td>
</tr>
</table>
</div>
</body>
</html>출력:
스타일이 적용된 div 예시
CSS 스타일을 활용한 간단한 예시입니다.
코드:
<html>
<head>
<title> Example3 </title>
<style>
div{
height:300px;
width:500px;
color:white;
border:1px solid;
background-color:grey;
}
</style>
</head>
<body>
<center>
<div>
<caption>
<h2> div tags in HTML</h3>
</caption>
<h3>
Div tag is division tag used for group many HTML tag like table, list, paragraph in web page.
</h3>
</div>
</center>
</body>
</html>출력:
div 태그는 웹 페이지에 파티션을 만들기 위한 분할 태그입니다. 이는 HTML 태그와 콘텐츠를 포함하는 하나의 빈 컨테이너입니다. div 태그를 사용하면 웹 애플리케이션이 깔끔하고 깨끗하며 매력적으로 보입니다. 웹 애플리케이션은 사용자와 개발자가 이해하기 더 쉽습니다.
위 내용은 HTML의 div 태그의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
