display, visibility, opacity 프로퍼티

:D ·2021년 10월 20일
1

💁 CSS 기본

목록 보기
3/5
post-thumbnail

1. display

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

1.1 block

  • 항상 새로운 라인에서 시작한다.
  • 화면 크기 전체의 가로폭을 차지한다. (width: 100%)
  • width, height, margin, padding 프로퍼티 지정이 가능하다.
  • 예) div,h1 ~ h6,p,ol,ul,li,hr,table,form

1.2 inline

  • 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다. 즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
  • content의 너비만큼 가로폭을 차지한다.
  • width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.
  • 예) span,a,strong,img,br,input,select, textarea,button

1.3 inline-block

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

  • 기본적으로 inline 레벨 요소와 흡사하게 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있다.
  • block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있다. 상, 하 여백을 margin과 line-height 두가지 프로퍼티 모두를 통해 제어할 수 있다.
  • content의 너비만큼 가로폭을 차지한다.

2. visibility

  • visible: 해당 요소를 보이게 한다 (기본값)
  • hidden: 해당 요소를 보이지 않게 한다.
  • collapse: table 요소에 사용하며 행이나 열을 보이지 않게 한다.
  • none: table 요소의 row나 column을 보이지 않게 한다. IE, 파이어폭스에서만 동작하며 크롬에서는 hidden과 동일하게 동작한다.

    💁 display: none;은 해당 요소의 공간까지 사라지게 하지만 visibility: hidden;은 해당 요소의 공간은 사라지지 않고 남아있게 된다.

3. opacity

opacity 프로퍼티는 요소의 투명도를 정의한다. 0.0 ~ 1.0의 값을 입력하며 0.0은 투명, 1.0은 불투명을 의미한다.

reference

profile
강지영입니...🐿️

0개의 댓글