2014년 2월 23일 일요일

[HTML] html5시멘틱 구조 태그

오늘은 html5 태그의 가징 큰 변화라고 할수 있는 시멘틴 구조에 대해서 알아보도록 하겠습니다

시멘틱(semantic)은 "으미론적인"이라는 영단어 입니다 
일반적으로 사람의 눈으로 아래와 같은 홈페이지를 봤을때는 이부분은 제목이구나
이부분은 본문이구나라고 판단을 할수 있습니다.




하지만 컴퓨터는 이러한 식별이 불가능합니다.
이러한 이유로 홈페이지의 데이터를 효율적으로 추출하는데 많은 어려움이 있었는데요
그래서 특정태그에 의미를 부여해 홈페이지를 만드는 시도가 이루어졌습니다.
그것이 바로 시멘틱 태그 입니다.


시멘틱 태그의 구조는 아래 와같습니다


header - 해더를 의미
nav - 내비게이션을 의미(메뉴바)
aside - 사이드에 위치하는 공간을 의미(사이드 메뉴바 ex>quick menu)
section - 여러 중심 내용을 감싸는 공간을 의미
            (content 내용을 감싸고 있는 전체 박스)
articie -  글자가 많이 들어가는 부분을 의미(이미지,텍스트를 감싸는 형태)
footer - 푸터(하단정보)부분을 의미


시멘틱 태그는 모두 div 태그와 같은 기능을 수행 합니다.
눈에 익은 태그이 구조도 있겠지만 aside,sction,article 같은 시멘틱 태그의 구조는
눈에 익지 않은 다어일겁니다 하지만 홈페이지제작을 하면서 충분이 알고가야 할부분이니 꼭 알고 넘어가시는게 좋을것 같네요 





댓글 없음:

댓글 쓰기