시멘틱(sementic)구조

HTML 문서에서 의미있는 부분을 의미에 맞는 태그를 사용하는것을 시멘틱 구조라 한다.

non-semantic 요소

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic 요소

form, table, img 등이 있으며 이들 태그 는 content의 의미를 명확히 설명한다,


시멘틱 요소 : 검색엔진이 html 코드로 의미를 인지할 때 해석하는 요소?라 보면될듯요

<header> : 웹 문서 맨 윗부분, 웹 사이트 로고, 로그인, 회원가입, 사이트맵, 언어 선택

width값과 height값을 잡아주고 블럭을 어떻게 배치할지 중앙이라면 margin값 auto잡아주고 border줘서 선주주면서 전체적인 header구간의 틀을 만든 후에 안에있는 h1,nav,li 등등을 손대줌

key point  = width, height , line-height,border,text-align,float

<nav> : 문서의 navigation , 메뉴 , 리스트와 링크(ul , li, a )​

float로 위치 잡아주던지 행간 으로 잡던지 하면서 padding값이랑 font-size쓰면서 좀 보기편하게 만들 수 이씀

<section> : 문서에서 관련 있는 내용을 묶음

section,article,aside가 한 블럭에 묶이게 div로 묶고 width 1000px주고 헤더처럼 margin 0 auto주고 높이는 overflow:hidden으로 잡아줬음 이후 section과 aisde칸을 나눠야하니 width 700주고 float:left주고 높이는 overflow:hidden;

<article> : 독립적인 내용, 뉴스 기사나 블로그 내용 등

보기편하게 padding값 margin값주고 box-sizing:border-box줬음

<aside> : 본문 글과 연관성 없는 내용 (배너 광고, 위젯등)

width 남는값중 280px주고 float:right주고 높이는 overflow:hidden 줬음

<footer> : 주소, 연락처, 저작권

전체적인 규격이 맞아야하니 width 1000px주고 height 100px로 수미상관 편안~ 해주고 border주고 margin 똑같이 0 auto 주고 text-align : center주고 line-heigth:100px로 height이랑 맞춰서 중앙에 글자 썻음

*{padding:0; margin:0;}
li{list-style:none;}

header{
    width:1000px;
    height:100px;
    margin:10px auto;
    border:2px solid #000;
    margin-top:100px;
}
header h1{
    float:left;
    width:200px;
    line-height:100px;
    text-align:center;
    border-right:2px solid #000;
}
nav{
    float:right
}
li{
    float:left;
    padding-left:20px;
    padding-right:20px;
    line-height:30px;
    border:2px solid #000;
    font-size:13px;
}
#wrap{
    width:1000px;
    margin:10px auto;
    overflow:hidden;
}
section{
    width:700px;
    float:left;
    overflow:hidden;
}
aside{
    float:right;
    width:280px;
    overflow:hidden;
}
article{
    padding:10px;
    box-sizing: border-box;
    margin-bottom:20px;
}
footer{
    width:1000px;
    height:100px;
    margin:0 auto;
    text-align:center;
    border:2px solid #000;
    line-height:100px;

 복습
    
}![](https://velog.velcdn.com/images/0dytpq0/post/429c9f67-a7a7-421e-b04a-613ba872387b/image.css)