CSS 프로퍼티(2)

seul_velog·2021년 11월 18일

CSS

목록 보기

4/10

1. display 프로퍼티

CSS 의 display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.
요소를 블록(block)과 인라인(inline) 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정한다.
화면에 어떻게 드러나게 할지를 결정하는 프로퍼티로써, 즉 '요소의 크기를 어떻게 결정할 것인가'에 대한 정의를 결정하는 속성이다.
display 프로퍼티는 상속되지 않는다.
display 의 속성 값은 block, inline, inline-block, none 이 있다.
블록과 인라인 요소와 같이 display 속성의 기본값이 있지만, css를 통해 다르게 보여지도록 바꿀 수 있다.

1-1. block 레벨 요소

항상 새로운 라인에서 시작한다.
일반적으로 설정하지 않아도 div가 갖게되는 기본값이다. (태그에 따라 기본값이 다를 수 있다.)
기본적으로 width가 자신의 컨테이너의 100%가 된다. (= 화면 크기 전체의 가로폭을 차지한다.)
→ 따라서 div{ Width: 100% } 과 같이 중복적으로 적용할 필요가 없다.
width, height, margin, padding 프로퍼티 지정이 가능하다.
block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.

block 레벨 요소 예
div
h1 ~ h6
p
ol
ul
li
hr
table
form
+) HTML5에서 새로 추가된 엘리먼트로 header, footer, section 등이 있다.

1-2. inline 레벨 요소

block 태그와 다르게 줄바꿈이 되지 않고(새로운 라인에서 시작하지 않음) 문장의 중간에 들어갈 수있다.
content의 너비만큼 가로폭을 차지한다.(컨텐츠를 감싼다)
width, height, margin-top, margin-bottom 프로퍼티를 지정할 수 없다. 상, 하 여백은 line-height로 지정한다.
inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다. inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.

block 레벨 요소 예
span
a
strong
img
br
input
select
textarea
button

1-3. inline-block 레벨 요소

block과 inline 레벨 요소의 특징을 모두 갖는다. inline 레벨 요소와 같이 한 줄에 표현되면서 width, height, margin 프로퍼티를 모두 지정할 수 있다. 즉, 기본적으로는 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있다.
줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치시킬 수 있으며, content의 너비만큼 가로폭을 차지한다. (inline)
width, margin, padding 프로퍼티를 모두 정의할 수 있다.(block)

1-4. none

해당 요소를 화면에 표시하지 않는다. 공간(크기) 자체도 차지하지 않는다.

 ▼ HTML
<!DOCTYPE html>
<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
    <div class="block_div">I am block</div> 
    <div class="inline_div">I am inline</div> 
    <div class="inline-block_div">I am inline-block</div>
    <div class="none_div">I am none</div> 
  </body>
</html>

 ▼ CSS
 body div {
  font-size: large;
  margin-bottom: 50px; }
.block_div {
  display: block;
  background-color: gray;} 
.inline_div {
  display: inline;
  width: 800px;
  background-color: aqua; } 
.inline-block_div {
  display: inline-block;
  width: 250px;
  background-color: blueviolet; }
.none_div {
  display: none;
  background-color: red; }

▼ result

2. visibility 프로퍼티

visibility 프로퍼티는 요소를 표시하거나 숨길지 정의한다. 즉, 요소의 렌더링 여부를 결정한다.
숨겨진 요소는 페이지의 공간을 차지한다.
visibility 의 속성 값은 visible, hidden, table, none 이 있다.

visible
: 해당 요소를 보이게 한다.(기본값)
hidden
: 해당 요소를 보이지 않게 한다. (display: none;은 해당 요소의 공간까지 사라진다.)
table
: table 요소에 사용하며 행이나 열을 보이지 않게 한다.
none
: table요소의 row나 column을 보이지 않게 한다. 크롬에서는 hidden과 동일하게 동작한다.

3. opacity 프로퍼티

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

▼ HTML / CSS
<!DOCTYPE html>
<html>
<head>
  <style>
    div, img {
      float: left;
      width: 150px;
      height: 150px;
      margin: 5px;
      background-color: pink;
      color: white;
      opacity: 0.4;
      transition: opacity 1s;
    }
    div:hover, img:hover {
      opacity: 1.0;
    }
  </style>
</head>
<body>
  <div>opacity: 0.4</div>
  <img src="cat.jpg" alt="cat">
</body>
</html>