공간 분할 태그
div
HTML 문서에서 부분, 혹은 세션을 정의
요소는 CSS스타일 지정하거나 Javascript로 특정 작업을 수행하기 위해 다른 HTML 요소의 컨테이너로 사용
CSS와 함께 웹페이지를 레이아웃 할 때 자주 사용
span
문서의 인라인 요소를 그룹화
시각적으로 변경되지 않으며, 텍스트의 일부 혹은 문서의 일부에 후크를 추가하는 방법을 제공
semantic
의미론적인 웹, 작성 (눈으로 보기에 바뀌는게 없다)
자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술
header
문서의 서론이나 섹션의 목차, 검색, 로고등이 들어가는 곳
소개 내용 또는 탐색 링크 모음을 위한 컨테이너
포함 요소
> 하나이상의 제목 요소(h1~h6)
> 로고, 아이콘
> 저자 정보
> 하나의 문서에 여러개의 Header 요소 포함 가능
nav
네비게이션, 페이지 이동을 위한 메뉴들이 모여 있는 곳
탐색 링크를 정의하며, 탐색 링크의 주요 블록에서만 사용
aside
사이드에 위치하는 공간, 보조 메뉴나 광고를 배치하는 곳
사이드바, 본문 이외의 내용
section
여러 중심 내용을 감싸는 공간
글을 구분하는 단락의 개념
section 안에 section을 넣는 것도 가능
article
글자가 많이 들어가는 부분, 콘텐츠 부분
footer
가장 바닥의 데이터, 저장자의 이름, 문서의 날짜, 연락처, 메일주소, 주소 등을 작성
예시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
*{ /* 모든태그에 적용 : * (초기값 설정) */
margin: 0;
padding: 0;
}
header{
background-color: #e2c100;
margin: 10px auto;
border: 1px solid #000000;
padding: 5px;
width: 700px;
height: 100px;
}
main{
background-color: #a6ae24;
margin: 0 auto; /* auto 알아서 중앙으로 맞춰줌 */
border-bottom: 1px solid #000000;
padding: 20px 0 20px 0;
width: 500px;
height: 150px;
}
#box1{
background-color: #ff8000;
width: 250px;
height: 120px;
float: left;
}
#box2{
background-color: #be81f7;
width: 250px;
height: 120px;
float: left;
}
footer{
background-color: #75c1e3;
margin: 30px auto;
border: 3px dotted #000000;
padding: 20px;
width: 650px;
height: 50px;
}
</style>
</head>
<body>
<header>
<p>header 영역</p>
</header>
<main>
<p>main 영역</p>
<div id="box1">
<p>box 1</p>
</div>
<div id="box2">
<p>box 2</p>
</div>
</main>
<footer>
<p>footer 영역</p>
</footer>
</body>
</html>
실행화면
header 영역
main 영역
box 1
box 2
참조
padding 한줄기입 순서
예) 20px 0 20px 0; → top right bottom left
이미지 출처 : https://www.w3schools.com/html/html5_semantic_elements.asp
'IT > CSS' 카테고리의 다른 글
| [CSS] button 꾸미기! (hover효과 주기) (0) | 2021.06.17 |
|---|---|
| [bootstrap]bootstrap정의/ bootstrap.min.js 사용예제 (0) | 2021.06.09 |
| [CSS] div태그로 공간 나누기 (0) | 2021.06.09 |
| [CSS] 리스트 마커 변경하기/list-style-image/list-style-type (0) | 2021.06.09 |
| [CSS] a:link/a:visited/a:hover/a:active (0) | 2021.06.09 |