728x90
오늘은 html 핵심 태그 중 하나인 div 태그에 대해 알아보도록 하겠습니다.
div 태그는 html 문서에서 섹션을 정의합니다.
div 태그로 분리하면 css와 자바스크립트를 통해 분리해서 조작할 수 있습니다.
클래스나 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>
</head>
<body>
<div>balmostory</div>
<div>발모스토리는 코딩관련 글을 매일 업로드하는 블로그입니다.</div>
</body>
</html>
class를 통해 css를 연계하는 방법입니다.
. class이름을 통해 연결할 수 있습니다.
<!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>
.name {
background-color: lightblue;
text-align: center;
}
.description {
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div class="name">balmostory</div>
<div class="description">발모스토리는 코딩관련 글을 매일 업로드하는 블로그입니다.</div>
</body>
</html>
id를 통해 css를 연계하는 방법입니다.
#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>
#name {
background-color: lightblue;
text-align: center;
}
#description {
background-color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="name">balmostory</div>
<div id="description">발모스토리는 코딩관련 글을 매일 업로드하는 블로그입니다.</div>
</body>
</html>
만약 class와 id가 있고 각자 style을 적용한다면 어떤 것이 우선순위를 받을까요?
<!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>
#name {
background-color: lightblue;
text-align: center;
border: red;
border-width: 12px;
}
.description {
background-color: lightblue;
text-align: center;
border: red;
border-width: 12px;
}
#description {
background-color: red;
text-align: center;
border: royalblue;
border-width: 12px;
}
</style>
</head>
<body>
<div id="name">balmostory</div>
<div id="description" class="description">발모스토리는 코딩관련 글을 매일 업로드하는 블로그입니다.</div>
</body>
</html>class를 추가해도 id의 style을 따릅니다.
감사합니다.
728x90
'기타 > html' 카테고리의 다른 글
| [HTML] html span 태그 (0) | 2020.12.15 |
|---|---|
| [HTML] head 태그와 그 안에 들어가는 여러가지 태그들 (0) | 2020.12.13 |
| [HTML] meta tag 사용법 및 예제 (0) | 2020.12.09 |
| [HTML] nav tag 사용법 및 예제 (0) | 2020.12.07 |
| [HTML] html table 태그 사용법 및 예제 (0) | 2020.12.05 |
