[CSS] display, visibility

inline 요소 : <span>, <b>, <a>, <img>와 같이 줄 속에 끼워 넣는 요소

block 요소 : <p>, <div>, <ol>, <ul>, <table>과 같이 해당 요소가 속한 줄은 가로 화면 전체 100%를 차지하며 앞뒤로 줄 바꿈이 된다.

 

display는 요소를 어떻게 표시할지 선택하는 속성이다.

1. display: inline

- 기본값, 앞뒤로 줄바꿈 되지 않는다.

 

2. display: block

- 요소를 block요소처럼 표시한다.

- 요소 앞뒤로 줄바꿈 된다.

 

3. display: none

- 박스가 생성되지 않는다.

- 공간을 차지하지 않는다.

- 스크린리더기에 읽히지 않아, 웹 접근성에 좋지 않다.

 

4. display: inline-block

- 요소는 inline인데, 내부는 block처럼 표시함

- 박스모양이 inline처럼 옆으로 늘어선다.

---

visibility는 어떤 요소를 보이게할지 숨길지 결정하는 요소이다.

1. visibility: visible (기본값)

- 요소가 그대로 보인다.

2. visibility: hidden

- 요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남는다.

3. visibility: collapse

- <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨긴다.

- IE, Firefox에서만 작동한다.

- <table> 이외에 사용시 hidden 상태처럼 만든다.