HTML의 div 태그
- PHPz원래의
- 2024-09-04 16:26:20978검색
이번 글에서는 HTML의 div 태그에 대해 살펴보겠습니다. HTML에는 다른 많은 HTML 태그와 콘텐츠 그룹에 사용되는 두 개의 중요한 태그가 있습니다. 하나는
다른 태그는 입니다. 꼬리표. 스팬 태그는 한 줄에 있는 콘텐츠와 태그의 그룹에 사용됩니다. 스타일과 다른 태그에 따른 수직 그룹화는 스팬 태그를 통해 이루어집니다. div 태그는 웹 페이지의 테이블, 목록, 단락과 같은 많은 HTML 태그에 사용되는 구분 태그입니다. 대부분의 div 태그는 빈 웹 페이지를 사용하여 콘텐츠 또는 HTML 태그에 대한 섹션을 분할하거나 만듭니다. 일부 특수 콘텐츠 div 태그에 대해 특정 디자인을 만드는 것은 div 레이아웃 및 CSS 디자인에 영향을 주지 않기 때문에 유용합니다.
구문:
다양한 HTML 태그에는 다음과 같은 열기 및 닫기 태그가 있습니다.
- <테이블>
를 열려면 div 태그가 필수입니다.
꼬리표. 필수 HTML 태그와 div 태그 안에 콘텐츠를 넣습니다.
<div> Content of Div tag in HTML </div>
필수 데이터 또는 콘텐츠 섹션을 만들기 위해 컨테이너에 여러 div 태그가 사용됩니다. 예: 머리글, 바닥글, 탐색 모음, 표, 이미지, 텍스트 등 다양한 div 태그를 CSS를 사용하여 다르게 디자인할 수 있고 JavaScript를 사용하여 쉽게 조건을 적용할 수 있습니다.
태그는 HTML에서 작동하나요?
div 태그는 다양한 HTML 태그와 텍스트를 함께 담을 수 있습니다.
div 태그를 사용한 예와 div 태그를 사용하지 않은 예를 볼 수 있습니다.
아. 사용 HTML 태그
코드:
<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에서 div 태그를 사용하고 있습니다. 첫 번째 div는 주황색이고, 두 번째 div는 노란색입니다.
- Div에는 헤더 태그와 단락이 함께 포함되어 있습니다. 두 개의 div 태그는 서로 다른 콘텐츠로 컨테이너를 나눕니다.
ㄴ. 를 사용하지 않고; 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>
출력:
설명:
- 위의 예는 HTML에서 div 태그를 사용하지 않은 예입니다. 헤더와 해당 단락이 다른 섹션에 있습니다.
- 머리글은 노란색, 단락은 주황색입니다. 모든 헤더와 해당 내용 단락의 크기는 다릅니다.
div 태그 활용
다음은 div 태그의 용도와 요구 사항입니다.
- div 태그는 주로 이미지와 설명과 같은 태그와 요소를 그룹화하는 데 사용됩니다. 웹 페이지에서는 많은 HTML 태그를 사용하여 콘텐츠를 만듭니다. 모든 HTML 태그는 특정 의미에 따라 다릅니다. div 태그는 모든 필수 HTML 태그를 결합합니다.
- div 태그는 분할 태그를 의미합니다. 웹 페이지에서는 머리글, 바닥글, 탐색 모음 등과 같은 많은 항목인 div 태그가 하나의 컨테이너에 여러 섹션을 만들어 모든 섹션을 우아하게 만듭니다.
- CSS를 활용한 스타일링과 자바스크립트로 조작할 때 쉽게 사용됩니다. 레이아웃뿐만 아니라 컨텍스트에도 영향을 주지 않습니다. div 태그를 이용한 Steady 스타일은 쉽습니다.
- div 태그는 웹페이지가 매력적으로 보이고 사용자에게 콘텐츠를 이해하는 데 유용합니다.
- 웹 개발자를 위한 프로그램의 복잡성을 제거합니다. div 태그가 유용합니다.
div 태그 HTML 예시
다음은 언급된 예입니다.
예시 #1
이 예는 클래스가 포함된 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>
출력:
예시 #2
테이블의 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>
출력:
예시 #3
스타일이 적용된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 SUP 태그다음 기사：HTML의 SUP 태그
div 태그는 다양한 HTML 태그와 텍스트를 함께 담을 수 있습니다.
div 태그를 사용한 예와 div 태그를 사용하지 않은 예를 볼 수 있습니다.
아. 사용 HTML 태그
코드:
<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에서 div 태그를 사용하고 있습니다. 첫 번째 div는 주황색이고, 두 번째 div는 노란색입니다.
- Div에는 헤더 태그와 단락이 함께 포함되어 있습니다. 두 개의 div 태그는 서로 다른 콘텐츠로 컨테이너를 나눕니다.
ㄴ. 를 사용하지 않고; 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>
출력:
설명:
- 위의 예는 HTML에서 div 태그를 사용하지 않은 예입니다. 헤더와 해당 단락이 다른 섹션에 있습니다.
- 머리글은 노란색, 단락은 주황색입니다. 모든 헤더와 해당 내용 단락의 크기는 다릅니다.
div 태그 활용
다음은 div 태그의 용도와 요구 사항입니다.
- div 태그는 주로 이미지와 설명과 같은 태그와 요소를 그룹화하는 데 사용됩니다. 웹 페이지에서는 많은 HTML 태그를 사용하여 콘텐츠를 만듭니다. 모든 HTML 태그는 특정 의미에 따라 다릅니다. div 태그는 모든 필수 HTML 태그를 결합합니다.
- div 태그는 분할 태그를 의미합니다. 웹 페이지에서는 머리글, 바닥글, 탐색 모음 등과 같은 많은 항목인 div 태그가 하나의 컨테이너에 여러 섹션을 만들어 모든 섹션을 우아하게 만듭니다.
- CSS를 활용한 스타일링과 자바스크립트로 조작할 때 쉽게 사용됩니다. 레이아웃뿐만 아니라 컨텍스트에도 영향을 주지 않습니다. div 태그를 이용한 Steady 스타일은 쉽습니다.
- div 태그는 웹페이지가 매력적으로 보이고 사용자에게 콘텐츠를 이해하는 데 유용합니다.
- 웹 개발자를 위한 프로그램의 복잡성을 제거합니다. div 태그가 유용합니다.
div 태그 HTML 예시
다음은 언급된 예입니다.
예시 #1
이 예는 클래스가 포함된 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>
출력:
예시 #2
테이블의 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>
출력:
예시 #3
스타일이 적용된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：HTML의 SUP 태그다음 기사：HTML의 SUP 태그
코드:
<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에서 div 태그를 사용하고 있습니다. 첫 번째 div는 주황색이고, 두 번째 div는 노란색입니다.
- Div에는 헤더 태그와 단락이 함께 포함되어 있습니다. 두 개의 div 태그는 서로 다른 콘텐츠로 컨테이너를 나눕니다.
ㄴ. 를 사용하지 않고; 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>
출력:
설명:
- 위의 예는 HTML에서 div 태그를 사용하지 않은 예입니다. 헤더와 해당 단락이 다른 섹션에 있습니다.
- 머리글은 노란색, 단락은 주황색입니다. 모든 헤더와 해당 내용 단락의 크기는 다릅니다.
div 태그 활용
다음은 div 태그의 용도와 요구 사항입니다.
- div 태그는 주로 이미지와 설명과 같은 태그와 요소를 그룹화하는 데 사용됩니다. 웹 페이지에서는 많은 HTML 태그를 사용하여 콘텐츠를 만듭니다. 모든 HTML 태그는 특정 의미에 따라 다릅니다. div 태그는 모든 필수 HTML 태그를 결합합니다.
- div 태그는 분할 태그를 의미합니다. 웹 페이지에서는 머리글, 바닥글, 탐색 모음 등과 같은 많은 항목인 div 태그가 하나의 컨테이너에 여러 섹션을 만들어 모든 섹션을 우아하게 만듭니다.
- CSS를 활용한 스타일링과 자바스크립트로 조작할 때 쉽게 사용됩니다. 레이아웃뿐만 아니라 컨텍스트에도 영향을 주지 않습니다. div 태그를 이용한 Steady 스타일은 쉽습니다.
- div 태그는 웹페이지가 매력적으로 보이고 사용자에게 콘텐츠를 이해하는 데 유용합니다.
- 웹 개발자를 위한 프로그램의 복잡성을 제거합니다. div 태그가 유용합니다.
div 태그 HTML 예시
다음은 언급된 예입니다.
예시 #1
이 예는 클래스가 포함된 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>
출력:
예시 #2
테이블의 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>
출력:
예시 #3
스타일이 적용된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
코드:
<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>
출력:
설명:
- 위의 예는 HTML에서 div 태그를 사용하지 않은 예입니다. 헤더와 해당 단락이 다른 섹션에 있습니다.
- 머리글은 노란색, 단락은 주황색입니다. 모든 헤더와 해당 내용 단락의 크기는 다릅니다.
div 태그 활용
다음은 div 태그의 용도와 요구 사항입니다.
- div 태그는 주로 이미지와 설명과 같은 태그와 요소를 그룹화하는 데 사용됩니다. 웹 페이지에서는 많은 HTML 태그를 사용하여 콘텐츠를 만듭니다. 모든 HTML 태그는 특정 의미에 따라 다릅니다. div 태그는 모든 필수 HTML 태그를 결합합니다.
- div 태그는 분할 태그를 의미합니다. 웹 페이지에서는 머리글, 바닥글, 탐색 모음 등과 같은 많은 항목인 div 태그가 하나의 컨테이너에 여러 섹션을 만들어 모든 섹션을 우아하게 만듭니다.
- CSS를 활용한 스타일링과 자바스크립트로 조작할 때 쉽게 사용됩니다. 레이아웃뿐만 아니라 컨텍스트에도 영향을 주지 않습니다. div 태그를 이용한 Steady 스타일은 쉽습니다.
- div 태그는 웹페이지가 매력적으로 보이고 사용자에게 콘텐츠를 이해하는 데 유용합니다.
- 웹 개발자를 위한 프로그램의 복잡성을 제거합니다. div 태그가 유용합니다.
div 태그 HTML 예시
다음은 언급된 예입니다.
예시 #1
이 예는 클래스가 포함된 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>
출력:
예시 #2
테이블의 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>
출력:
예시 #3
스타일이 적용된 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.