[CSS] Display

Display

웹 페이지의 레이아웃을 결정하는 CSS의 중요한 속성 중 하나로, 해당 HTML 요소가 웹 브라우저에 언제 보이는가를 결정하는 속성이다. 모든 요소들은 단 하나의 display 값을 가진다. 여러 종류의 값이 있지만 대부분의 요소들은 inline과 block 중 하나를 가진다. 물론 원래의 기본 값을 CSS를 통해 바꿀 수 있다.

1. inline
2. block
3. inline-block
4. flex
5. list-item
6. none

inline

• inline-level 요소의 기본 값이다.
• 이 속성이 적용되면 해당 요소는 width와 height를 부여하더라도 적용되지 않는다.
• 하나의 단어나 강조 구문처럼 인식되므로, 태그 다음의 요소는 줄 바꿈 되지 않는다. (수평 정렬)

값	기본 display 값이 inline인 요소
display: inline;	<span> <a> <b> <i> <img> <button>

<img>의 특성

• 대체 요소(replaced element)라고 하는 특별한 요소이다.
• 다른 요소와 같은 줄에 있으면서도 가로, 세로 길이 조절이 가능하다.

block

• block-level 요소의 기본 값이다.
• 이 속성이 적용되면 해당 요소는 width와 height를 적용할 수 있다.
• 하나의 문단으로 처리되므로, 태그 다음에 나타나는 요소는 자동으로 줄 바꿈 된다. (수직 정렬)

값	기본 display 값이 inline인 요소
display: block;	<div> <h1>~<h6> <p> <nav> <ul> <li>

inline-block

• block-level 요소의 특성과 inline-level 요소의 특성을 혼합한 형태
  • block-level: 크기 지정 가능
  • inline-level: 문장으로 형성
• 결과적으로, 크기를 지정할 수 있는 inline-level 요소로 처리
• 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이를 설정해 주고 싶을 때 사용

---

visibility

HTML 요소가 웹 페이지에 표현될 것인지 표현되지 않을 것인지 결정하며, 웹 페이지에는 나타나지 않더라도 레이아웃 내에는 존재하게 하는 속성이다.
display의 none과 비슷하게 보이지만, none은 웹 페이지에 나타나지 않으면서 레이아웃에도 영향을 미치지 않는다. 그러나, visibility의 hidden을 값으로 주면, 시각적으로 보이지 않을 뿐, 여전히 웹 페이지의 레이아웃에는 존재한다.

값	설명
visibility: visible;	해당 HTML 요소가 웹 페이지에 나타남
visibility: hidden;	HTML 요소가 웹 페이지에 나타나지 않음 웹 페이지 레이아웃에는 여전히 존재
visibility: collapse;	동적인 테이블에서만 사용 가능 테이블의 테두리 한 줄만 보여 줌

---

opacity

HTML 요소의 투명도를 간단히 조절할 수 있는 속성으로, 속성 값은 0.0부터 1.0까지 설정 가능하다. 속성 값이 0에 가까울 수록 투명한 상태가 된다.

div {
	opacity: 0.5;
}