1. div (Division)
| tag | 의미 및 특징 |
| div | 요소들을 그룹으로 정의하는 태그 (블록 레벨 요소) |
| CSS 적용을 쉽게하기 위해 그룹 설정 (웹사이트의 레이아웃을 만들 때 주로 사용 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div 그룹 요소</title>
<style>
#wrap{width: 300px; margin: 0 auto; border: 1px solid #000; text-align: center;}
/* header{width: 300px; margin: 0 auto; border: 1px solid #000; text-align: center}*/
/* section{width: 300px; margin: 0 auto; border: 1px solid #333; text-align: center}*/
/* footer{width: 300px; margin: 0 auto; border: 1px solid #999; text-align: center}*/
</style>
</head>
<body>
<div id="wrap">
<header>헤더</header>
<section>본문</section>
<footer>푸터</footer>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span 그룹 요소</title>
<style>
.s1{font-size: 20px; font-weight: bold; background-color: yellow;}
.s2{border: 4px dotted skyblue; color: blue;}
.s3{font-style: italic; color: red}
</style>
</head>
<body>
<span class="s1">span 태그</span>
<span class="s2">span 태그는</span>각 글자단위로
<span class="s3">적용하기가</span> 편리합니다.
</body>
</html>
span 태그
span 태그는각 글자단위로
적용하기가 편리합니다.
'HTML' 카테고리의 다른 글
| HTML5 블록 레벨 요소 / 인라인 요소 (0) | 2020.08.04 |
|---|---|
| HTML5 Tag-[구조 관련 요소] 레이아웃 구성(시맨틱태그) (0) | 2020.08.02 |
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 4] <form> 사용자 입력 속성 (0) | 2020.08.01 |
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 3] <form> label (0) | 2020.08.01 |
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 2] <form> input (0) | 2020.08.01 |
댓글