[HTML+CSS] display

display에 속성에 진짜 많은 기능들을 지원하지만 그중에서도 가장 중요한 display 속성에 대해 알아보겠습니다.

 

키워드	설명
none	태그를 화면에서 보이지 않게함
block	태그를 block 형식으로 지정
inline	태그를 inline 형식으로 지정
inline-block	태그를 inline-block 형식으로 지정

 

1.<display -none>

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

2. <display-block>

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

3. <display - inline> /  <display - inline-block>

 

현재의 상태에서는 inline키워드와 inline-block 키워드사이에 값을 동일 하게 출력이 됩니다.

 

그렇다면 inline 과 inline-block에 대해 차이는 없을까 ? 했을 때 당연히 있겠쭁?

 

width 그리고 height 속성 사용시 차이점을 알 수 있습니다. 

 

▶ <inline>

See the Pen by yeojinho (@yeojinho) on CodePen.

 

▶  inline-block

 

See the Pen by yeojinho (@yeojinho) on CodePen.

 

 

차이점을 아시겠져?