[css] display, visibility, opacity

display, visiblity, opacity

이 세가지에 대해서 정리를 하게 된 이유는 프로젝트 진행중 display : none이라고 적힌 css를 확인하후 none이니까 당연히 안보이지 라는 생각을 했다. 하지만 찾아보니 display와 visiblity가 다른 것처럼 내가 생각했던것 과는 분명한 차이점이 있다는 것을 확인할 수 있었다.

display

display 프로퍼티는 layout정의에 자주 사용되는 중요한 프로퍼티이다.

프로피터값 키워드	설명
block	block타입이 가지는 요소
inline	inline 특성을 가지는 요소
inline-block	inline-block특성을 가지는 요소
none	해당 요소를 화면에 표시하지 않는다.(공간조차 사라진다.)

display프로퍼티는 상속이 되지 않는다.

block 레벨 요소

block특성을 가지는 요소는 아래와 같은 특성을 가진다.

• 항상 새로운 라인에서 시작한다.
• 화면 크기 전체의 가로폭을 차지한다.(width:100%)
• width, height, margin, padding, 프로퍼티 지정이 가능하다.
• block 레벨 요소 내에 inline 레벨 요소를 포함 할 수 있다.
• block 레벨 요소
  * div
  • h1~h6
  • p
  • ol
  • ul
  • li
  • hr
  • table
  • form

inline 레벨 요소

inline 특성을 가지는 요소는 아래와 같은 특징을 갖는다.

• 새로운 라인에서 시작 x, 문장의 중간에 들어갈 수 있다. 즉 줄을 바꾸지 않고 다른 요소와 함게 한 해에 위치한다.
• content의 너비만큼 가로폭을 차지한다.
• width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다.
• inline 레벨 요소 뒤에 공백(엔터, 스페이스 등) 이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.
• inline 레벨 요소내에 block레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block레벨 요소에 포함되어 사용한다.
• inline 레벨 요소 예
  * span
  • a
  • strong
  • img
  • br
  • input
  • select
  • textarea
  • button

inline-block 레벨 요소

block과 inline레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다.

• 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
• block레벨 요소처럼 width, hieght, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-heigth 두가지 프로퍼티 모두를 통해 제어할 수 있다.
• content의 너비만큼 가로폭을 차지한다.
• line-block 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 space(4px)가 자동 지정된다.

visibility 프로퍼티

프로퍼티값 키워드	설명
visible	해당 요소를 보이게 한다 (기본값)
hidden	해당 요소를 보이지 않게 한다. display: none;은 해당 요소의 공간까지 사라지게 하지만 visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.
collapse	table 요소에 사용하며 행이나 열을 보이지 않게 한다.
none	table 요소의 row나 column을 보이지 않게 한다. IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작한다.

opacity 프로퍼티

opacity 프로퍼티는 요소의 투명도를 정의한다. 0.0 ~ 1.0의 값을 의마한다. 0은 투명 1은 불투명을 의미한다.

참조

poeima web