네카라쿠배 프론트엔드 취업완성 스쿨 2기[Chapter05](HTML 요소 - 콘텐츠 구분 & 문자 콘텐츠)

2023. 7. 10. 21:51HTML,CSS

html 각종    태그와  의미  

 

 

 

 

header-  로고, 주요메뉴
footer-  헤더에 들어갈만한 정보는 아니지만 필요한것들, 주소, 사업자명 
main  -  핵심내용
article - 블로그 포스트, 메거진 신문기사,   (독립적으로 구분되거나 재사용 가능한 영역을 설정 )

<h1>,<h6> 를 포함하여 식별

    article {display : block;}  

    

 



article :  독립적이고, 재사용가능
section : 문서의 일반적인 영역을 설정  , 영역을 나누는 용도로 많이 사용 
section { display: block;}      



(섹션안에 아티클, 아티클안에 섹션 가능)

 

 

 


section 과 div의 차이 

section :   제목을 포함해서 의미를 가짐 

div :  별다른 의미없이  태그를 묶는데 사용 

article : 독립성이 유지되는 컨텐츠이다.( 제목 등 , 의미를 강하게 가짐 ) 

 

 

 

 

 


<!-- 다른 페이지 링크를 제공하는 영역을 설정  (메뉴 )


(navigation , 보통 메뉴  , home ,about , contact, 목차 ,색인등을 설정) 


nav {  display: block;}  

일반적으로 영역을 설정하는 태그들은    블록요소다 

외부로 연결되는 링크등등 , ( 하이퍼링크개념 , 메뉴를 묶을때사용,  ol,ul 태그들을 삽입해서 같이사용) -->


            

 


ul: 순서가 지정되지않은 목록 , 안에 항목이 여러가지있다.  목록세트를 nav태그로 묶음

address태그 :  body ,article, footer 태그등의 영역에서 연락처정보를 제공 , 주소 (이메일, 전화번호,실제주소)

address : { display: block;}



div : division의 약어 ,  본질적으로 아무것도 나타내지않는 컨텐츠 영역을 나타냄 , 막사용 가능 

div { display: block;}