HTML 시멘틱 태그 (레이아웃 설계)

semantic : 의미론적인, 의미를 가지고 있는

 

HTML5 이전에 레이아웃을 구성할 때 div에 클래스를 부여하며 구성하였다.

이는 html파일이 길어지고 div를 계속 반복해서 사용해야한다.

 

그 이후

sementic태그의 등장으로 효율적이고 직관적으로 구성할 수 있게되었다!

 

종류

.container : 가장 상위

section : 주제별 컨텐츠 영역

header : 헤더 영역(로고, 메뉴 등)

footer : 푸터(제작 정보 등)

aricle : 컨텐츠 내용

nav : 문서 링크 탐색

main : 문서 주요 내용 지정

 

단계

.container>section, header, footer>article>div

---

레이아웃 만들어보기(가상클래스 X)

<div class="container">
    <header>
        <article class="logo"></article>
        <article class="navi"></article>
    </header>
    <section class="box1"></section>
    <section class="box2">
        <article class="sub1"></article>
        <article class="sub2"></article>
        <article class="sub3"></article>
    </section>
    <footer></footer>
</div>

 

.container {
    border: 1px solid #000;
    width: 1200px;
    margin: auto;
}
header {
    background-color: blueviolet;
    height: 100px; /*header에는 overflow를 주지 않는다*/
}
header article {  /*공통적인 것 넣어주기*/
    background-color: silver;
    width: 300px;
    height: 100px;
}
.logo { /*개별적인 것들*/
    float: left; /*둘 다 float을 부여해야 같은 높이에 위치*/
}
.navi {
    float: right;
}

.box1 {
    background-color:mediumpurple;
    height: 500px;
}
.box2 {
    background-color: mediumslateblue;
    overflow: hidden;
}
.box2 article {
    width: 33.3333%; /*소수점을 늘려야 오차발생 X*/
    height: 500px;
    box-sizing: border-box;
    float: left;
}
.sub1 {
    background-color:slateblue;
}
.sub2 {
    background-color:rebeccapurple;
}
.sub3 {
    background-color:rgb(145, 131, 231);
}

footer {
    background-color: blueviolet;
    height: 100px;
}

가상클래스를 아직 배우지 않았지만 구현을 해보았다.