1. 시멘틱 태그
시멘틱 태그는 그 자체로 기능하는 바는 없으나,
유의미한 이름을 태그명으로 사용하고 있기 때문에 태그명만으로 해당 내용이 문서 상에서 어떠한 부분을 담당하고 있는지 태그 속성을 보지 않고도 알 수 있게 해준다는 것에 의의가 있다.
문서 구조는 여러 시멘틱 태그로 이뤄질 수 있으며, 지정된 자리가 있는 것이 아니기 때문에
시멘틱 태그 안에 또다른 시멘틱 태그가 올 수도 있음을 유의해야 한다.
2. <header> 태그 : 머리말 지정하기
<header> 태그는 특정 영역의 머리말을 나타내기 위하여 사용하는 시멘틱 태그이다.
문서 상의 전체적인 의미에서의 머리말로 사용할 수도 있고, 분할된 영역마다의 머리말을 추가할 수도 있다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
.wrapper {
width: 980px;
margin: 0 auto;
}
header {
padding: 100px 15px 30px;
background-color: rgb(76, 107, 107);
font-family: 'Noto Serif KR', serif;
text-align: center;
}
header h1 {
margin-bottom: 5px;
color: #eee;
}
header h3 {
margin-top: 0;
color: #222;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>CAT WORLD</h1>
<h3>고양이가 세상을 구한다</h2>
</header>
</div>
</body>
3. <nav> 태그 : 문서를 연결하는 네비게이션 링크
동일한 사이트 내부에서 다른 문서나 다른 사이트의 문서로 연결하는 링크의 모임이 있는 시멘틱 태그이다.
다양한 부분에 포함하거나 독립적인 사용이 가능하다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;900&display=swap');
.wrapper {
width: 980px;
margin: 0 auto;
}
header {
padding: 100px 15px 30px;
background-color: rgb(76, 107, 107);
font-family: 'Noto Serif KR', serif;
text-align: center;
}
header h1 {
margin-bottom: 5px;
color: #eee;
}
header h3 {
margin-top: 0;
color: #222;
}
nav ul {
background-color: aliceblue;
margin: 0;
padding: 0;
}
nav ul::after {
content: '';
display: block;
clear: both; }
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #222;
font-family: 'Noto Serif KR', serif;
padding: 1em;
width: 213px;
text-align: center;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>CAT WORLD</h1>
<h3>고양이가 세상을 구한다</h2>
</header>
<nav>
<ul>
<li><a href="#">고양이 안내</a></li>
<li><a href="#">고양이 소개</a></li>
<li><a href="#">고양이 역사</a></li>
<li><a href="#">고양이 최고</a></li>
</ul>
</nav>
</div>
</body>
4. <section> 태그 : 주제별 컨텐츠 영역 나타내기
문서 상의 문맥 흐름 중에서 컨텐츠의 주제별로 묶어서 사용할 때 활용 가능하다.
<section> 태그 안에 또다른 <section> 태그를 사용할 수도 있다.
또한 <div> 태그와도 함께 사용 가능하다.
5. <article> 태그 : 컨텐츠 내용 넣기
<section> 태그와 함께 사용되는 태그로,
<section> 태그로는 영역을 묶고, <article> 태그로는 실제 내용의 영역을 구분한다고 생각하면 된다.
예를 들어 블로그 소개 영역이 있다고 생각하면 해당 영역 전체는 <section> 태그로 묶을 수 있고
블로그 하나씩은 <article> 태그로 묶을 수 있다는 것이다.
물론 <article> 태그 안에서도 <section> 태그를 사용하는 등의 쓰임을 활용할 수 있다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;900&display=swap');
.wrapper {
width: 980px;
margin: 0 auto;
font-family: 'Noto Serif KR', serif;
}
header {
padding: 100px 15px 30px;
background-color: rgb(76, 107, 107);
font-family: 'Noto Serif KR', serif;
text-align: center;
}
header h1 {
margin-bottom: 5px;
color: #eee;
}
header h3 {
margin-top: 0;
color: #222;
}
nav ul {
background-color: aliceblue;
margin: 0;
padding: 0;
}
nav ul::after {
content: '';
display: block;
clear: both; }
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #222;
padding: 1em;
width: 213px;
text-align: center;
}
section article {
float: left;
width: 65%;
background-color: rgb(245, 243, 241);
}
section article h3 {
margin: 8px;
}
section article p {
text-indent: 1em;
line-height: 1.7;
margin: 10px;
}
section article img {
width: 100%;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>CAT WORLD</h1>
<h3>고양이가 세상을 구한다</h2>
</header>
<nav>
<ul>
<li><a href="#">고양이 안내</a></li>
<li><a href="#">고양이 소개</a></li>
<li><a href="#">고양이 역사</a></li>
<li><a href="#">고양이 최고</a></li>
</ul>
</nav>
<section>
<article>
<h3>고양이는 최고라구요</h3>
<p>
수 바이며, 천자만홍이 위하여서. 사랑의 만물은 열락의 얼마나 없는 못할 가슴이 구하지 그들의 힘있다. 사라지지 있으며, 이것은 불어 있는 품으며, 그들에게 목숨이 긴지라 듣는다. 곧 그들의 바로 얼마나 없으면 교향악이다. 트고, 이상의 이상 할지라도 가진 무엇을 있음으로써 전인 것이다. 가치를 천지는 미인을 쓸쓸하랴? 무엇을 별과 위하여, 이상 그와 그들에게 날카로우나 그러므로 눈에 때문이다. 이것이야말로 그와 예수는 말이다. 가는 할지라도 역사를 때에, 놀이 바로 아니한 사막이다. 곧 실로 아니한 청춘의 철환하였는가?
</p>
<p>
우리는 넣는 설레는 꽃이 고동을 풍부하게 풀이 고행을 위하여서. 열매를 긴지라 놀이 풍부하게 커다란 구하지 소금이라 청춘은 사막이다. 피에 크고 가는 뜨거운지라, 봄바람을 미인을 이것은 작고 원대하고, 뿐이다. 구하기 구하지 몸이 눈이 가는 주며, 새 것이다. 얼음과 두기 청춘을 부패를 살았으며, 찾아 있으랴? 가는 인간이 얼마나 앞이 이상은 이상의 때까지 거친 인생을 그리하였는가? 역사를 몸이 가치를 뭇 불어 있을 아름다우냐? 찬미를 웅대한 인간의 품에 찾아 무엇이 돋고, 운다. 원대하고, 돋고, 유소년에게서 용감하고 영락과 그들의 심장의 무엇을 불어 것이다. 미인을 아름답고 유소년에게서 피고, 것이다.
</p>
<div>
<img src="https://cdn.nbntv.co.kr/news/photo/202208/987236_100479_2236.gif">
</div>
</article>
</section>
</div>
</body>
6. <aside> 태그 : 본문 이외의 내용 표시하기
필수적인 요소는 아니지만 메인 내용과는 연관성이 없는 내용을 넣기 좋은 영역 구분 태그이다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;900&display=swap');
.wrapper {
width: 980px;
margin: 0 auto;
font-family: 'Noto Serif KR', serif;
}
header {
padding: 100px 15px 30px;
background-color: rgb(76, 107, 107);
font-family: 'Noto Serif KR', serif;
text-align: center;
}
header h1 {
margin-bottom: 5px;
color: #eee;
}
header h3 {
margin-top: 0;
color: #222;
}
nav ul {
background-color: aliceblue;
margin: 0;
padding: 0;
}
nav ul::after {
content: '';
display: block;
clear: both; }
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #222;
padding: 1em;
width: 213px;
text-align: center;
}
.content {
width: 100%;
}
section article {
float: left;
width: 65%;
height: 100%;
background-color: rgb(245, 243, 241);
}
section article h3 {
margin-top: 0;
margin-left: 8px;
}
section article p {
text-indent: 1em;
line-height: 1.7;
margin: 10px;
}
section article img {
width: 100%;
}
aside {
float: right;
width: 35%;
background-color: rgb(220, 220, 230);
}
aside h4 {
margin: 8px;
}
aside p {
text-indent: 1em;
margin: 10px;
}
aside img {
width: 100%;
height: 180px;
display: block;
padding-bottom: 20px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>CAT WORLD</h1>
<h3>고양이가 세상을 구한다</h2>
</header>
<nav>
<ul>
<li><a href="#">고양이 안내</a></li>
<li><a href="#">고양이 소개</a></li>
<li><a href="#">고양이 역사</a></li>
<li><a href="#">고양이 최고</a></li>
</ul>
</nav>
<div class="content">
<section>
<article>
<h3>고양이는 최고라구요</h3>
<p>
수 바이며, 천자만홍이 위하여서. 사랑의 만물은 열락의 얼마나 없는 못할 가슴이 구하지 그들의 힘있다. 사라지지 있으며, 이것은 불어 있는 품으며, 그들에게 목숨이 긴지라 듣는다. 곧 그들의 바로 얼마나 없으면 교향악이다. 트고, 이상의 이상 할지라도 가진 무엇을 있음으로써 전인 것이다. 가치를 천지는 미인을 쓸쓸하랴? 무엇을 별과 위하여, 이상 그와 그들에게 날카로우나 그러므로 눈에 때문이다. 이것이야말로 그와 예수는 말이다. 가는 할지라도 역사를 때에, 놀이 바로 아니한 사막이다. 곧 실로 아니한 청춘의 철환하였는가?
</p>
<p>
우리는 넣는 설레는 꽃이 고동을 풍부하게 풀이 고행을 위하여서. 열매를 긴지라 놀이 풍부하게 커다란 구하지 소금이라 청춘은 사막이다. 피에 크고 가는 뜨거운지라, 봄바람을 미인을 이것은 작고 원대하고, 뿐이다. 구하기 구하지 몸이 눈이 가는 주며, 새 것이다. 얼음과 두기 청춘을 부패를 살았으며, 찾아 있으랴? 가는 인간이 얼마나 앞이 이상은 이상의 때까지 거친 인생을 그리하였는가? 역사를 몸이 가치를 뭇 불어 있을 아름다우냐? 찬미를 웅대한 인간의 품에 찾아 무엇이 돋고, 운다. 원대하고, 돋고, 유소년에게서 용감하고 영락과 그들의 심장의 무엇을 불어 것이다. 미인을 아름답고 유소년에게서 피고, 것이다.
</p>
<div>
<img src="https://cdn.nbntv.co.kr/news/photo/202208/987236_100479_2236.gif">
</div>
</article>
</section>
<aside>
<h4>고양이는 냥냥</h4>
<p>
불어 끝까지 황금시대의 넣는 이것을 남는 그들은 영원히 힘있다. 없는 노년에게서 길을 얼음에 붙잡아 그것은 두기 과실이 끓는 위하여서.
가치를 때에, 사람은 안고, 무한한 가슴이 것이다. 평화스러운 속잎나고, 되는 간에 곧 것이다. 위하여 가치를 아름답고 이 있는 전인 가슴에 듣는다.
노년에게서 있는 타오르고 피어나기 관현악이며, 뛰노는 청춘의 보라. 커다란 얼음 속에 밥을 충분히 그들에게 우리 어디 보라. 우는 인류의 방황하였으며, 구할 피는 청춘이 봄바람이다.
</p>
<div>
<img src="https://t1.daumcdn.net/cfile/tistory/9982424C5F56648032">
<img src="http://thescienceplus.com/news/data/20210727/p1065600688443018_968_thum.jpg">
<img src="https://t1.daumcdn.net/cfile/tistory/216C553953FC27C335">
</div>
</aside>
</div>
</div>
</body>
7. <footer> 태그 : 제작 정보와 저작권 정보 표시하기
일반적으로 문서 끝부분에 들어가는 시멘틱 태그로 사이트의 저작권 정보, sns 정보 등을 넣어 표시한다.
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;900&display=swap');
.wrapper {
width: 980px;
margin: 0 auto;
font-family: 'Noto Serif KR', serif;
}
header {
padding: 100px 15px 30px;
background-color: rgb(76, 107, 107);
font-family: 'Noto Serif KR', serif;
text-align: center;
}
header h1 {
margin-bottom: 5px;
color: #eee;
}
header h3 {
margin-top: 0;
color: #222;
}
nav ul {
background-color: aliceblue;
margin: 0;
padding: 0;
}
nav ul::after {
content: '';
display: block;
clear: both; }
nav ul li {
float: left;
list-style: none;
}
nav ul li a {
display: block;
text-decoration: none;
color: #222;
padding: 1em;
width: 213px;
text-align: center;
}
.content {
width: 100%;
}
section article {
float: left;
width: 65%;
height: 904px;
background-color: rgb(245, 243, 241);
}
section article h3 {
margin-top: 0;
margin-left: 8px;
}
section article p {
text-indent: 1em;
line-height: 1.7;
margin: 10px;
}
section article img {
width: 100%;
display: block;
padding-top: 20px;
}
aside {
float: right;
width: 35%;
background-color: rgb(220, 220, 230);
}
aside h4 {
margin: 8px;
}
aside p {
text-indent: 1em;
margin: 10px;
}
aside img {
width: 100%;
height: 180px;
display: block;
padding-bottom: 20px;
}
footer {
background-color: #222;
clear: both;
padding: 10px;
color: #eee;
text-align: center;
}
footer address {
display: block;
font-size: small;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<h1>CAT WORLD</h1>
<h3>고양이가 세상을 구한다</h2>
</header>
<nav>
<ul>
<li><a href="#">고양이 안내</a></li>
<li><a href="#">고양이 소개</a></li>
<li><a href="#">고양이 역사</a></li>
<li><a href="#">고양이 최고</a></li>
</ul>
</nav>
<div class="content">
<section>
<article>
<h3>고양이는 최고라구요</h3>
<p>
수 바이며, 천자만홍이 위하여서. 사랑의 만물은 열락의 얼마나 없는 못할 가슴이 구하지 그들의 힘있다. 사라지지 있으며, 이것은 불어 있는 품으며, 그들에게 목숨이 긴지라 듣는다. 곧 그들의 바로 얼마나 없으면 교향악이다. 트고, 이상의 이상 할지라도 가진 무엇을 있음으로써 전인 것이다. 가치를 천지는 미인을 쓸쓸하랴? 무엇을 별과 위하여, 이상 그와 그들에게 날카로우나 그러므로 눈에 때문이다. 이것이야말로 그와 예수는 말이다. 가는 할지라도 역사를 때에, 놀이 바로 아니한 사막이다. 곧 실로 아니한 청춘의 철환하였는가?
</p>
<p>
우리는 넣는 설레는 꽃이 고동을 풍부하게 풀이 고행을 위하여서. 열매를 긴지라 놀이 풍부하게 커다란 구하지 소금이라 청춘은 사막이다. 피에 크고 가는 뜨거운지라, 봄바람을 미인을 이것은 작고 원대하고, 뿐이다. 구하기 구하지 몸이 눈이 가는 주며, 새 것이다. 얼음과 두기 청춘을 부패를 살았으며, 찾아 있으랴? 가는 인간이 얼마나 앞이 이상은 이상의 때까지 거친 인생을 그리하였는가? 역사를 몸이 가치를 뭇 불어 있을 아름다우냐? 찬미를 웅대한 인간의 품에 찾아 무엇이 돋고, 운다. 원대하고, 돋고, 유소년에게서 용감하고 영락과 그들의 심장의 무엇을 불어 것이다. 미인을 아름답고 유소년에게서 피고, 것이다.
</p>
<div>
<img src="https://cdn.nbntv.co.kr/news/photo/202208/987236_100479_2236.gif">
</div>
</article>
</section>
<aside>
<h4>고양이는 냥냥</h4>
<p>
불어 끝까지 황금시대의 넣는 이것을 남는 그들은 영원히 힘있다. 없는 노년에게서 길을 얼음에 붙잡아 그것은 두기 과실이 끓는 위하여서.
가치를 때에, 사람은 안고, 무한한 가슴이 것이다. 평화스러운 속잎나고, 되는 간에 곧 것이다. 위하여 가치를 아름답고 이 있는 전인 가슴에 듣는다.
노년에게서 있는 타오르고 피어나기 관현악이며, 뛰노는 청춘의 보라. 커다란 얼음 속에 밥을 충분히 그들에게 우리 어디 보라. 우는 인류의 방황하였으며, 구할 피는 청춘이 봄바람이다.
</p>
<div>
<img src="https://t1.daumcdn.net/cfile/tistory/9982424C5F56648032">
<img src="http://thescienceplus.com/news/data/20210727/p1065600688443018_968_thum.jpg">
<img src="https://t1.daumcdn.net/cfile/tistory/216C553953FC27C335">
</div>
</aside>
</div>
<footer>
<address>냥냥펀치국 냥냥시 냥냥구 냥냥동</address>
<p>Copyright © Cat Corp. All rights reserved. </p>
</footer>
</div>
</body>
'CSS' 카테고리의 다른 글
| 속성 선택자 (0) | 2022.10.26 |
|---|---|
| combination selector : 연결 선택자 (0) | 2022.10.26 |
| 표 스타일 속성 (0) | 2022.10.24 |
| z-index 속성 (0) | 2022.10.24 |
| position 속성 (0) | 2022.10.24 |
