카테고리 없음
[html]시맨틱 태그(Semantic Tag)
쟈근꿈틀이
2022. 4. 28. 14:59
728x90
시맨틱 태그란 HTML의 구조를 설계하는데 있어서 사이트의 구조를 파악하기 용이할 수 있도록 도와주기 위해 만들어진 태그이다.
시맨틱 태그의 종류에는 크게 header, nav, aside, section, article, footer 등이 있다.
- header: 머리글, 제목
- nav: 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현
- aside: 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그
- section: 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용
- article: 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용
- footer: 바닥글, 문서 하단에 들어가는 정보 구분 공간을 표현하는 태그
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#box {
margin: auto;
padding: 0;
border: 1px solid;
width: 50%;
text-align: center;
}
header, nav, footer {
border: 1px solid;
}
article {
border: 1px solid;
float: left;
width: 50%;
height: 250px;
}
article header, article article, article footer {
margin: auto;
border: none;
width: 100%;
height: 15%;
text-align: center;
}
aside {
border: 1px solid;
height: 250px;
}
aside table {
border-spacing: 0;
border-collapse: collapse;
}
a {
text-decoration: none;
color: black;
}
input {
height: 30px;
}
input[type="submit"] {
height: 75px;
}
</style>
</head>
<body>
<div id="box">
<header>
<h1>header</h1>
</header>
<nav>
<h3>nav</h3>
</nav>
<article>
<h3>article</h3>
<header>header</header>
<article>article</article>
<footer>footer</footer>
</article>
<aside>
<h3>aside</h3>
<form action="#">
<table align="center">
<tr>
<td><input type="text" name="id" placeholder="아이디"></td>
<td rowspan=2><input type="submit" name="pw" value="로그인"></td>
</tr>
<tr>
<td><input type="password" placeholder="비밀번호"></td>
</tr>
<tr>
<td><a href="register.jsp" target="_blank">회원가입</a> | <a
href="member_search.jsp" target="_blank">ID/PW찾기</a></td>
</tr>
</table>
</form>
</aside>
<footer>
<h3>footer</h3>
</footer>
</div>
</body>
</html>
<참고>
https://stonefree.tistory.com/59
[HTML5] 시멘틱 태그(sementic tag)
시멘틱태그(sementic tag)란 인터넷의 발전으로 방대한 양의 웹문서가 생기면서, 제각기 일관적이지 않게 생성된 문서 구조는 웹문서에서 원하는 정보를 찾기가 점점 힘들어 지게 만드는 원인이었
stonefree.tistory.com
728x90