[CSS] visibility, opacity, overflow, float, clear, z-index의 속성

< 박스의 가시성에 대한 속성 >

1. visibility: visivle; → 보임, 영역o (기본값)

visibility: hidden; → 보이지x, 영역o

2. opacity: 1; → 보임, 영역o (기본값)

opacity: 0; → 보이지 x, 영역o

3. display: block; → 보임, 영역o

display: none; → 보이지x, 영역 사라짐

 

# opacity 속성: 요소의 투명도를 지정

- 투명도: 0(투명) ~ 1(불투명,기본값)

- 배경뿐만아니라 글자도 함께 투명해짐

 

# overflow 속성: 문단에서 영역을 벗어나는 텍스트를 나타내는 속성

- overflow: visible; 넘치는 텍스트를 그대로 보여줌

- overflow: hidden; 넘치는 텍스트 숨김

- overflow: scroll; 넘치는 텍스트는 스크롤하여 보여줌

- overflow: auto; 넘칠 때는 스크롤, 넘치지 않으면 스크롤x

 

# float 속성

- float: left; 화면의 왼쪽으로 배치

- float: right;

- float: none; 기본값

 

# clear 속성

- clear: left; float의 left로 지정한 속성을 삭제

- clear: right; float의 right로 지정한 속성을 삭제

- clear: both; float의 left와 right 속성 모두 삭제

 

# 웹에서의 요소는 나중에 생성한 것이 이전에 생성한 것보다 위에 나타남

# z-index 속성: 요소가 겹쳤을 때 위치를 지정하는 속성

- 기본값: auto

- z-index의 값이 큰 요소가