display 속성으로 block, inline 요소 변환하기 이전에 박스 모델에 대해 정리한 글에서도 말씀드렸다시피 HTML 요소는 각기 고유의 박스 모델을 가지고 있습니다.  태그에 따라 블록 레벨 요소 태그와 인라인 레벨 요소로 구분되어 부여됩니다.  이렇게 기본값으로 부여된 박스 모델 레벨을 display 속성을 사용하면 변환이 가능 합니다.  즉 block 레벨 요소 태그를 inline 레벨 요소 태그로 바꿀 수 있으며 그 반대로도 가능 합니다. CSS 블록 레벨 요소 인라인 레벨 요소 차이점 CSS display 속성값 중 레이아웃에 쓰이는 속성값 속성값 설명 block inline 요소 -> block 요소로 변환 inline block 요소 -> inline 요소로 변환 inline-block inline 요소와 block 요소의 속성을 모두 가지고 margin과 padding 지정 가능 none HTML에서 표시되지 않게 함. display 속성을 사용한 HTML 가로 메뉴 구현 예제 < style >   * {     box-sizing : border-box ;   }   ul   {     list-style-type : none ;           }   li   {     margin : 0 15px ;     padding : 30px ;         border : 2px double black ;         display : inline-block ;             } </ style > </ head > < body >   < ul >     < li > 홈 </ li >     < li > 생산 </ li >     < li > 구매 </ li >     < li > 회계 </ li >     < li > 재무 <

상단 영역 header와 nav header 태그는 일반적으로 웹페이지 상단에 위치하며, 로고 및 검색 아이콘 등 모든 웹사이트에서 공통적으로 보이는 부분에 사용 합니다.  nav 태그는 웹사이트의 메뉴 리스트가 들어가는 공간 으로 header 안에 하위 태그로 구성하기도 하고 독립적으로 사용하기도 합니다. 본문 영역 main, article, section, aside 핵심적인 콘텐츠 main 태그 웹페이지에서 중심이 되는 핵심 정보가 main 태그 안에 들어가며, main 태그는 웹사이트에서 한 번만 사용하는 것을 권장 합니다.  그만큼 여러 번 반복되는 정보가 아닌 독립적인 정보가 들어가는 부분에 선언합니다. 독립적인 콘텐츠 묶음 article과 section 태그 article과 section 모두 독립된 콘텐츠 항목으로 여러 곳에서 재사용될 수 있는 항목으로 포털 사이트의 블로그 포스트나 뉴스 기사 같은 콘텐츠를 작성할 때 사용합니다. article 태그를 여러 개 묶어서 section 태그 안에 선언할 수도 있습니다. 사이드 바를 나타내는 aside 태그 블로그에서 자주 보이는 좌측, 우측에 사이드바 형식으로 되어 있는 콘텐츠를 표현할 때는 aside 태그를 사용해서 표현하면 됩니다. 하단 영역 footer 페이지의 하단에 위치하게 되며, 일반적인 웹사이트에서는 사업자 정보 및 주소, 연락처 등 사이트의 소유주 정보를 작성하여 사용하고 있습니다. 이런 부분에는 footer 태그를 사용해 주시면 됩니다. 구분자 div 태그 div 태그는 division의 약자로, HTML 요소들을 구분할 때 사용합니다. 위에 나열된 시맨틱 태그를 사용하지 않고, div 태그만을 사용하게 되면 HTML5 표준에 맞지 않은 웹페이지가 될 수 있으므로, 되도록이면 시맨틱 태그의 용도에 맞게 레이아웃을 구성하고 시맨틱 태그로 할 수 없을 때만 div 태그를 사용하도록 해야 합니다.