1. h1~h6
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 글자 크기를 바꾸기 위해 hn을 쓰지마라 -->
<!-- h1을 안쓰고 다른걸 쓰지말라는 뜻. css로 font-size조절을 해야함 -->
<!-- 제목 단계를 건너띄는 것을 피하라. h1다음에 h3쓰고 그러지마라. -->
<!-- h1은 한페이지에 하나만 사용해라 / 여러개 사용해야하면 전체문서의 제목을 h1으로 하고 h2를 여러개 써라-->
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
</body>
</html>
|
cs |
2. main태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- main 태그 -->
<!-- 핵심적인 콘텐츠 -->
<!-- 문서에 하나의 main태그만 존재할 수 있음 -->
</body>
</html>
|
cs |
3. article태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- article -->
<!-- 독립적으로 구분되거나 재사용 가능한 영역을 설정 -->
<!-- 매거진/신문기사, 블로그 -->
<!-- block레벨 요소 -->
<article class="forecast">
<h1>제목</h1>
<article class="day-forecast">
<h2>제목2</h2>
<p>내용</p>
</article>
<article class="day-forecast">
<h2>제목2</h2>
<p>내용</p>
</article>
</article>
</body>
</html>
|
cs |
4.section태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 문서의 일반적인 영역을 설정 -->
<!-- block레벨 요소다. -->
<!-- section내부에 article이 들어갈 수 있다. article안에 section이 들어갈 수 있다. -->
<!-- section태그에는 어떤 의미가 있기 때문에 제목과 내용이 일반적으로 들어온다. -->
<section>
<h1>제목1</h1>
<p>내용</p>
</section>
<section>
<h1>제목</h1>
<p>내용</p>
</section>
</body>
</html>
|
cs |
5. nav태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 다른 페이지 링크를 제공하는 영역 -->
<!-- 보통 home, about, contact 목차 색인등을 설정 -->
<!-- block 레벨 요소 -->
<nav>
<a href="/html/">Html</a>
<a href="/html/">css</a>
<a href="/html/">js</a>
<a href="/html/">jQuery</a>
</nav>
</body>
</html>
|
cs |
6. address태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- body article footer등에서 연락처 정보를 제공하기 위해 포함하여 사용 -->
<address>
<a href="mailto:billaa@naver.com">이메일 주소</a>
<a href="">전화번호</a>
</address>
</body>
</html>
|
cs |
7. div 태그
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정 -->
<!-- division, 꾸미는 목적으로 사용 -->
<!-- block 레벨 요소 -->
</body>
</html>
|
cs |
html콘텐츠 구분 예제
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>콘텐츠 구분 예제</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<header>
<nav>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</nav>
</header>
<main>
<section>
<h1>Section</h1>
<article>
<h2>Article1</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article2</h2>
<p>Contents...</p>
</article>
<article>
<h2>Article3</h2>
<p>Contents...</p>
</article>
</section>
<aside>
Aside가 section이랑 한 줄에 나올려면 같은 영역에 잡혀야 하기 때문에 main태그로 묶는다.
</aside>
</main>
<footer>
<address>
<a href="mailto:billaa@naver.com">메일쓰기</a>
<a href="tel:+8201076623484">010-7662-3484</a>
</address>
</footer>
</body>
</html>
|
cs |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
header{
background-color: tomato;
margin: 10px;
padding: 20px;
}
header nav{
}
header nav ul{
display: flex;
}
header nav ul li{
list-style: none;
margin: 10px;
}
main{
/* 가로로 정렬하기 */
display: flex;
}
section{
width: 70%;
background-color: tomato;
margin: 10px;
padding: 10px;
box-sizing: border-box;
}
section h1{
}
article{
background-color: yellowgreen;
margin-bottom: 10px;
padding: 10px;
}
article h2{
}
article p{
}
aside{
width: 30%;
background-color: tomato;
margin: 10px;
padding: 20px;
box-sizing: border-box;
}
footer{
background-color: tomato;
margin: 10px;
padding: 10px;
}
footer address{
}
footer address a{
/* a는 인라인 요소기 때문에 block으로 만들어서 수직으로 정렬하게 함 */
display: block;
}
|
cs |
728x90
'WEB > html,CSS' 카테고리의 다른 글
| [html] 이미지 소스 셋 img srcset / 브라우저 크기에 따라 자동으로 이미지 크기 바꾸기/ sizes속성 (0) | 2021.04.07 |
|---|---|
| [html] 약어 설정하는 법 abbr태그 (0) | 2021.04.06 |
| [html] 블록요소와 인라인요소 차이/ display:block; display:inline; (0) | 2021.04.05 |
| [html][css] header 메뉴 만들기/ 가운데 수평정렬, 수직 정렬하는 법 (0) | 2021.04.05 |
| [html][css] 선택자를 이용하여 레이아웃 만들어보기 (0) | 2021.04.04 |