display

display를 활용한 예제는 수없이 많을 것이다.

 

하지만 속성 값에 대한 헷갈리는점이 있어서 정리해보려한다!

 

---

간단히 정리해보자면

 

display : 

               none : 보이지 않음 , 없는것처럼 반응 

               block: div , p , h , li 줄바꿈 크기지정 가능

               inline: span, b , i , a 줄바꿈 없음 , 크기 지정도 불가능

               inline-block : 줄바꿈 없음, 크기 지정 가능

---

display: none

말 그대로 보여주지 않는다!

 

이때 중요한게 visibility 에서 hidden 값과의 차이 일것이다!!

 

출처:https://doolyit.tistory.com/102

 

display:none은 해당 영역을 차지하지 않는다!

 

 

display: block

 div , p , h , li 태그 등이 이에 해당된다

 

기본적으로 가로 영역을 모두 채우며 줄바꿈이 된 것처럼 보인다 

 

width,height 속성을 지정 가능하며 항상 다음줄에 렌더링된다!

 

 

display: inline

span, b , i , a 태그 등이 해당된다

 

block과 달리 줄바꿈이 없고 width,height 지정 불가능하다 

 

줄바꿈 되지 않고 바로 오른쪽에 표시된다

 

 

display: inline-block

block 과 inline의 중간형태

 

줄바꿈이 되지 않지만 크기 지정 가능 

 

inline에 해당하는 태그들을 위한?