[CSS] display 와 visibility

가볍게 생각하고 넘겼다가 쓸 때마다 헷갈렸던 개념들은 주제별로 찾아보고 풀어서 다시 정리해두기.
강의를 들으면서 block과 inline-block의 구분, display : none;과 visibillity : hidden;의 구분이 헷갈려서 정리해본다.

🌱 inline-block은 왜 써야할까? 그냥 block으로 만들면 안되나?

📌 display : 요소를 어떻게 보여줄 것인지 정하는 속성

display : block;

div, p, h, li 태그 등이 기본적으로 block 속성을 가지고 있다.
각 요소마다 한 줄을 모두 차지한다.
크기, 여백과 관련한 속성을 모두 가질 수 있다.

display : inline;

span, strong, a 태그 등이 기본적으로 inline 속성을 가지고 있다.
각 태그 내 내용에 맞는 크기를 가진다.
크기, 여백과 관련한 속성을 가질 수 없는데, 양쪽 여백(padding, margin)은 가능하다.

display : inline-block;

inline과 같이 한 줄에 여러 요소가 들어갈 수 있도록 하면서 크기, 여백을 마음대로 지정해줄 수 있다.
inline 요소로서 한 줄 전체를 차지하지 않으면서도 크기를 마음대로 조절하도록 만들기 위해 사용!

display : none;

요소가 완전히 사라지게 한다.
요소가 원래 가지고 있던 영역을 모두 무시한다.

🌱 display : none;과 뭐가 달라?

📌 visibility : 요소를 보여줄지 말지 정하는 속성

visibility : hidden;

요소를 감춘다.
위의 display : none; 과는 다르게 요소가 원래 가지고 있던 영역을 그대로 차지하고 내용만 가린다.

visibility : visible;

요소를 보이게 한다.