3. 공간분할 태그와 시맨틱 태그

1. 공간분할 태그

css로 원하는 레이아웃을 구성하기 위해서는 공간 분할이 필요합니다. 

아래의 링크를 참고하시오.

​

https://turtle0204.tistory.com/9

css로 정렬을 하기 위한 기본 상식 ; display ; inline과 block

block형식은 언제나 새로운 라인에서 시작하며 해당 라인의 모든 너비를 차지합니다.

inline형식은 자신의 글자크기만큼 영역을 차지합니다.

 

2. 시맨틱 태그

시맨틱 웹은 특정 태그에 의미를 부여한 웹을 뜻합니다. 단순히 프로그래머간의 소통을 위해서 태그에 의미를 부여한 것이 아닌 웹 자체에서 그 태그의 의미를 읽는 지능형웹을 말합니다.

가독성과 프로그램의 효율을 위해 semantic하게 코드를 작성해야 합니다.

시맨틱 태그의 예

1) header : 머리말(페이지 제목, 페이지 소개, 로고)

2) nav : 메뉴를 만들 때 사용하며 일반적으로 ul, li 태그를 많이 사용한다. 하이퍼링크가 연결되어 있는 경우가 많다.

3) aside : 본문의 흐름에서 벗어나는 노트나 팁, 부가적인 내뇽을 나타내는 영역이며 퀵메뉴나 광고 영역으로 사용한다.

4) section : 문서의 장이나 절에 해당하는 내용

5) article : 본문(문서 및 어플리케이션)과 독립적인 콘텐츠 요소

6) figure : 독립적인 contents(이미지, 비디오 등)

6) footer : 꼬리말(저자나 저작권 정보), 웹페이지 하단을 만들때 사용한다. 주로 copyright; 저작권 영역을 표현한다.