Display ⭐

맹뿌·2021년 5월 31일
0

CSS3

목록 보기
5/10

① display 속성 ⭐

display 속성을 상속되지 않음

  • block : block 특성을 가지는 요소로 지정
  • inline : inline 특성을 가지는 요소로 지정
  • inline-block : inline-block 특성을 가지는 요소로 지정
  • none : 해당 요소를 화면에 표시하지 않음. (공간조차 사라짐)

1. block 레벨 요소

따로 설정하지 않아도 일반적으로 태그가 갖게 되는 기본값.

  • 항상 새로운 라인에서 시작
  • 화면 크기 전체의 가로폭을 차지 (width 100%)
  • width, height, margin, padding 속성 지정이 가능
  • block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있음

block 레벨 요소의 예시) div, h1 ~ h6, p, ol, ul, li, hr, table, form

<head>
  <style>
    div:nth-of-type(1) {
      background-color: #FFA07A;
      padding: 20px;
    }
    div:nth-of-type(2) {
      background-color: #FF7F50;
      padding: 20px;
      width: 300px;
    }
  </style>
</head>

2. inline 레벨 요소

컨텐츠를 감쌀 정도의 크기만 갖게 됨.

  • 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있음
  • width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없음. 상, 하 여백은 line-height로 지정
  • inline 레벨 요소 뒤에 공백이 있는 경우, 정의하지 않은 space(4px)가 자동 지정
  • inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없음

inline 레벨 요소의 예시) span, a, strong, img, br, input, select, textarea, button

3. inline-block 레벨 요소

inline과 block의 특성을 합쳐놓은 속성.
기본적으로 inline의 속성을 지니고 있으나(content 너비만큼 가로폭 차지), 임의로 크기 변경이 가능.

  • block 레벨 요소처럼 width, height, margin, padding 프로퍼티를 모두 정의할 수 있음
  • 상, 하 여백을 margin과 line-height 두가지 속성 모두를 통해 제어할 수 있음
  • inline-block 레벨 요소 뒤에 공백이 있는 경우, 정의하지 않은 space(4px)가 자동 지정
<ul>
  <li>one</li
  ><li>two</li
  ><li>three</li>
</ul> /* → 공백 제거 방법 */

② visibility 속성

요소를 보이게 할 것인지 보이지 않게 할 것인지를 정의

  • visible : 해당 요소를 보이게 함 (기본값)
  • hidden : 해당 요소를 보이지 않게 한다. display: none;과 다르게 해당 요소의 공간은 사라지지 않고 남아있다.
  • collapse : table 요소에 사용하며 행이나 열을 보이지 않게 함
  • none : table 요소의 row나 column을 보이지 않게 함

③ opacity 속성

요소의 투명도를 정의.
0.0 (투명) ~ 1.0 (불투명)

div:hover, img:hover {
  opacity: 1.0;
}

🎁 참조 및 출처

profile
무엇이든 할 수 있고, 무엇이든 될 수 있는

0개의 댓글