5. 다양한 요소(element)

  z-index

z-index는 중첩된 요소의 쌓이는 순서를 지정한다. 작은 번호가 바닥으로, 큰 번호가 위로 올라간다.

  opacity

opacity는 투명도를 지정하는 속성이다. 범위는 0.0(완전 투명) ~ 1.0(완전 불투명, 기본값)을 가진다.

  overflow

overflow는 영역 요소에 비해 내부 콘텐츠 요소의 너비와 높이 길이가 큰 경우 사용한다.

 

속성값)

• visible : 기본값. 그대로 둠. (아무 조치 안 함)
• hidden : 넘친 콘텐츠를 숨김. (제거)
• scroll : 넘친 콘텐츠를 숨기고, 스크롤바를 붙임. (항상 붙임)
• auto : 안 넘치면 그대로, 넘치면 스크롤바를 붙임.

=> 콘텐츠가 text인 경우에는 auto, image일 경우에는 hidden을 주로 사용한다.

  float

float는 요소의 위치를 지정하는 방법이다. 속성값은 left와 right가 있다.

 

1. clear

clear은 요소의 float 속성을 지우는 속성이다. float를 left로 설정했으면 clear도 left로 설정한다.

both는 방향을 고려하지 않고 둘 다 지우는 속성값이다.

 

2. clearfix

clearfix는 요소의 앞 또는 뒤에 float를 제거하는 가상의 박스를 추가하는 방식이다.

float의 오류를 제어하는 데 많이 사용한다.

예전에 영역 분할을 할 때 div태그로만 사용해 뒤엉켰을 경우 자주 사용했다.

 

float 사용에는 주의가 필요하며, 문서를 여러 영역으로 분할하고 각 영역별로 float를 사용하는 것을 추천한다.

  display와 visiblity

1. display

display는 요소의 표시 여부와 방법을 지정하는 속성이다. 화면 상에서 요소를 삭제/표시하고 인라인/블록/인라인 블록 형식으로 표시하도록 지정한다.

 

속성값)

• none : 화면 상에서 요소를 삭제. (자리까지 없앰)
• block : 요소를 블록 형식으로 표시.
• inline : 요소를 인라인 형식으로 표시.
• inline_block : 요소가 인라인과 블록 두 가지 형식을 모두 가짐.
• table : 요소를 표 형식으로 표시(clearfix에서 사용)
• flex : 컨테이너 요소에 설정하여 내부 요소를 flexbox 형식으로 제어.
• gird : 컨테이너 요소에 설정하여 내부 요소를 grid 형식으로 제어.

 

2. visiblity

visiblity는 요소를 보이거나 숨기는 속성이다. 속성값은 visible(기본값)과 hidden이 있다.

 

3. 'display: none;' vs 'visiblity: hidden;'

숨긴다는 것은 요소가 차지할 공간은 유지하되 보이지 않게 한다는 것을 의미하고, 제거한다는 것은 요소가 차지하는 공간까지 없애는 것을 의미한다. 따라서 display none은 요소를 제거한다는 것이 되고, visiblity hidden은 요소를 숨긴다는 것이 되겠다.