CSS - display, visibility 속성

완전 간단한 css display와 visibility  속성에 대해서 알아보자. 

display 속성은 크게 none, inline, block, inline-block가 있으며 각각의 의미는 이렇다;

 

display: none  → 요소가 완전히 사라짐

display: inline  → 인라인 성격으로 바뀜. 크기를 가질 수 없고, 세로로 쌓이지 않고 가로로 나열됨.

display: block  → 블록 성격으로 바뀜. 아래로 쌓임.

display: inline-block  → 크기는 가질 수 있지만 세로로 쌓이지 않고 가로로 나열됨.

 

visibility는 화면에 어떻게 보이는지를 설명하며, hidden으로 하게 되면 요소는 보이지 않지만 요소의 자리는 그대로 유지한다. 

 

백문이 불여일견인지라, 직접 해서 눈으로 보는 것이 제일 확실하다. 

 

이렇게 박스를 만든 후, 각각 display와 visibility 속성을 원하는대로 적용해서 확인해보자. 

 

content2에 display none속성을 적용하였더니, 주황색 박스와 그 자리가 흔적도 없이 사라진 것을 볼 수 있다. 

 

이번에 content4 초록색 박스에 visibility hidden 속성을 적용해 볼까? 요소는 사라지지만 자리는 그대로 유지한다고 배웠다. 

 

display inline, inlineblock을 한꺼번에 적용해 보았다. 

6번과 7번의 경우 블록에서 인라인으로 성격이 바뀌었기 때문에 크기를 가질 수 없게 되었다. 그래서 딱 자기 콘텐츠만큼(content6, content7)만 가졌고, 세로로 쌓이는 것이 아니라 옆으로 배치가 된다. 

8번의 경우 인라인블록의 속성을 가지게 되어 역시 옆으로 배치가 되었고, 크기는 계속 가지고 있다. (*width와 height값을 갖는다는 뜻)

 

헷갈리면 브라우저에서 마우스 우클릭 + 검사하기를 통해 정확한 크기를 보면 이해에 도움이 될 것이에용ㅎㅎ