display, visible, opacity
작성일 : 2025.03.19
display / visibility / opacity의 공통적인 부분에서 보이게 하느냐 안보이게 하느냐
가시성을 결정짓는 요소들이랍니다
한번 각각의 속성에 대해서 알아보도록 하겠습니다.
1. display
display는 레이아웃에서 자주 사용되는 요소입니다.
기본적으로 HTML은 block 또는 inline 특성을 갖습니다.
| display 요소 | 설명 | 예시태그 |
|---|---|---|
| block | 블록박스-가로영역모두차지 / 줄바꿈o | div / p / h / ul / li / hr / ol / table h1~h6 / form |
| inline | 인라인박스-글자화영역 / 줄바꿈x | span / b / i / a / br / button / textarea / img / input |
| inline-block | block과 inline의 짬뽕 / 줄바꿈x / 크기조정o | |
| none | 해당요소를 화면에서 없애버림 (영역조차사라짐) |
block 속성정리
- 새로운 라인에서 시작
- 화면 크기 전체의 가로영역을 모두 차지한다. (width: 100%)
- width, height, margin, padding 지정이 가능하다.
- block 요소 안에 inline 요소를 포함할 수 있다.
- width , height 요소를 미지정하면 자동적으로 width:100% height:auto 값으로 나타난다.
inline 속성정리
- 새로운 라인에서 시작하지 않기때문에 중간에 들어갈 수 있다.
- 콘텐츠(문자 등등)의 너비가 가로폭을 결정한다.
- width, height, margin-top/bottom를 지정할 수 없다. 이 경우에는 line-height로 지정해준다.
- inline 요소 내에 block요소를 포함할 수 없다.
inline-block 속성정리
- 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
- block과 inline요소의 특징을 모두 갖는다.
- block 레벨 요소처럼 width, height, margin, padding 지정 할 수 있다. line-heigh로도 가능하다.
- inline속성과 같이 콘텐츠의 width가 너비를 결정한다.
2. visibility
visibility 속성은 요소를 보이게 할 건지 안보이게 할 건지를 지정합니다.
| visibility 속성 | 설명 |
|---|---|
| visible | 해당요소를 보이게 한다. |
| hidden | 해당요소를 보이지않게 한다. ( 공간은 사라지지않음) |
| collapse | table요소에 사용하며 행이나 열을 보이지않게 한다. |
| none | table 요소의 row나 column을 보이지 않게 한다. |
3. opacity
opacity는 투명도를 조절하는 것과 같습니다.
범위는 0.0(투명100%) ~ 1.0(투명 0%) 로 값을 조절합니다.
tip
기억해야하는 사항
display: none; = 요소보이지않음 + 차지하고있던 영역까지 없어짐
visibility : hidden // opacity : 0 ; = 요소 보이지 않음 + 차지하고 있던 영역은 남아있음