HTML_공간, 시맨틱 태그

HTML중 공간에 대한 태그는 3종류는

Block, lnline, lnline-block 입니다.

Block 태그는 한 줄을 통쨰로 차치하고, lnline tag와 lnline-block 태그는 내용물의 길이만큼 공간을 차지합니다.

lnline tag는 높이와 너비를 정할 수 없고, 상하 padding과 margin을 줄 수 없습니다.

 

Block 형식의 태그 중 대표적인 것으로 div가 있습니다, lnline은 span이 있습니다.

<span>span1</span><span>span2</span><span>span3</span><div>div</div><span>span4</span>

위의 코드를 실행시 아래와 같이 결과가 나옵니다.

span1span2span3
div
span4

 

시맨틱 태그 header, nav, main, section, article, aside, footer

• header : 페이지 소개나 제목을 담당합니다.
• nav : 내비게이션 바를 의미합니다, 보통 상단의 오른쪽 부분 메뉴바나 사이드바가 예로 있습니다.
• main : 몸통 부분을 의미합니다, 한 페이지 당 하나만 써야 하고 다른 페이지와 겹치면 안됩니다.
• section : 구획 부분을 의미랍니다, 예를 들어 공지사항 부분, 포스터 부분, 댓글 부분이 각각 section으로 이루어져 있습니다.
• article : 해당 문서나 페이지 또는 사이트와는 완전히 독립적으로 구성할 수 있는 요소를 정의할때 사용합니다.
• aside : 메인 내용과는 관련이 있지만 직접적인 연관성이 없는 부분을 따로 분리합니다.
• footer : 저작권 정보나 사이트 제공자 정보를 넣는 공간입니다.