[CSS] display 속성

display 속성은 웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나이다.

 

block 레벨 요소

display 속성값이 block인 요소는 새로운 라인에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<div>, <h1>, <p>, <ul>, <ol>, <form> 등

• width와 height 속성을 지정할 수 있다.
• 그러나 블록 요소는 가로줄을 모두 차지하므로 다음 요소가 오른쪽에 배치될수있어도 항상 다음줄에 배치된다.

---

 

inline 레벨 요소

display 속성값이 inline인 요소는 새로운 라인에서 시작하지 않는다, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML content만큼만 차지한다.

<span>, <a>, <img> 등

• width나 height를 지정할 수 없다.
• width를 임의로 바꾸더라도 크기는 content의 길이만큼이다.

 

---

inline-block 레벨 요소

display속성값이 inline-block으로 설정된 요소는 해당 요소 자체는 인라인 요소처럼 동작한다, 하지만 해당 요소 내부에서는 블록 요소처럼 동작한다.

줄바꿈이 되지 않지만, 크기를 지정할 수 있다

인라인 요소처럼 해당라인 전체가 아닌 content만큼만 자리를 차지하지만, 블록 레벨 요소처럼 임의로 크기를 바꿔줄 수있다.

 

 

 

 

참고

https://ofcourse.kr/css-course/display-%EC%86%8D%EC%84%B1

CSS display 속성 - ofcourse