티스토리 뷰

프로그래밍/HTML , CSS

display

goodmean 2021. 3. 23. 09:00
반응형

display 속성

참고 사이트

 

display : block ;

display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다.

기본 요소가 block 인 엘리먼트들 : h1~6, p , div , ul ,li

 

display : inline ;

display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다.

※ inline 엘리먼트를 사용할 때 주의할 점은, width와 height 속성을 지정해도 무시된다는 것입니다. 왜냐하면 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지하도록 되어 있기 때문입니다. 또한, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않습니다.

기본 요소가 inline 인 엘리먼트들 : a , span , img

 

display : none ;

안보이게 하는 태그입니다.

반응형

'프로그래밍 > HTML , CSS' 카테고리의 다른 글

form 태그  (0) 2021.03.25
노멀라이징, 라이브러리  (0) 2021.03.23
float  (0) 2021.03.23
font 관련 속성  (0) 2021.03.23
transition  (0) 2021.03.23
반응형
최근에 올라온 글
Total
Today
Yesterday
글 보관함