[HTML] display : inline-block과 block의 차이점

이번 글에서는 HTML과 CSS를 사용함에 있어서 정렬방법을 정하는 속성인 display 속성의 inline-block과 block의 차이점에 대하여 다루겠습니다.

 

# inline-block과 block의 차이점

  display 의 설정은 앞서 말햇듯이 컨텐츠의 표시 방법을 지정하는 CSS 속성입니다. 아래 사진을 보시면 일련의 리스트들이 그저 일자로 정려되어있습니다. 이 것을 block과 inline-block을 적용하면 앞에 있는 글머리 기호가 삭제되며 정해진 규칙대로 정렬됩니다.

• display : block은 박스모델이 적용되면서 컨텐츠들이 모두 한 줄씩을 차지하며 표시됩니다.
• display : inline-block은 박스모델이 적용되지만 옆에 공간이 있다면 옆에 정렬됩니다.

html 사진 1

 

# display 설정 방법

  아래 사진의 왼쪽이 diplay의 설정 CSS 파일이며, font-size는 그저 가독성을 높이기 위하여 사용한 것이니 신경쓰지 않으셔도 됩니다.

#in-bl ul li {
	display: inline-block;
  font-size: 1.7em;
}

#block ul li {
	display: block;
  font-size: 1.7em;
}

html 사진 2

  위쪽은 inline-block을 사용하였기에 공간이 충분한 옆쪽으로 정렬되었습니다. 만약 옆라인 공간이 충분하지 않다면 한 줄 씩을 차지하며 표시되었을 것입니다.

 

 아래쪽은 block을 사용하였기에 한 줄씩을 차지하며 정렬되었습니다.

 

 

 

여기까지 HTML과 CSS를 사용함에 있어서 정렬방법을 정하는 속성인 display 속성의 inline-block과 block의 차이점에 대하여 다루었습니다.