display 속성

2023. 6. 20. 22:42Front/CSS

1. display 속성

요소가 화면에 보이는 방식을 지정하는 속성 (요소의 속성을 변경시킴)

- inline: 태그를 인라인 형식으로 지정 (contents의 크기만큼 자리 차지), margin 적용 불가

- block: 태그를 블록 형식으로 지정 (contents가 있는 한 줄 전체 차지), 크기 지정, margin 적용 가능

- inline-block: inline 속성과 block 속성을 모두 가짐

- none: 화면에 출력 X, 공간 X (없는 태그 처럼 취급)

2. visibility 속성

요소가 화면에 보이게 할지 말지를 지정하는 속성

- visible: 화면에 보임

- hidden: 화면에서 안보이게 함

- collapse: 테이블 태그에서 사용하는 속성으로 테이블의 행과 열을 숨김

3. opacity 속성

- 요소의 투명도 조절

- 0.0(투명) ~ 1.0(불투명) 사이의 값으로 투명도 조절

- 부모의 Opacity값이 자식에도 적용