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 > 재무 <