CSS3 속성

HTML, CSS, JS

CSS3 속성

himzei 2022. 8. 30. 10:21

크기단위

% : 백분율 단위

em: 배수단위

px : 픽셀

색상단위

#000000 : HEX코드단위

rgb(red, green, blue) RGB 색상단위

rgba(red, green, blue, alpha) RGBA 색상단위

hsl(hue, situration, lightness) HSL 색상단위

hsla(hue, situration, lightness, alpha) HSLA 색상단위

URL단위

파일을 지정할때는 URL단위를 사용

background-image: url("desrt.jpg")

width속성과 height속성

박스의 가로 세로 크기의 지정

margin속성과 padding 속성

박스 바깥쪽 및 안쪽 여백 지정

box-sizing 속성

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>box-sizing</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
      }
      div:nth-child(1) {
        margin: 10px;
        padding: 10px
      }
      div:nth-child(2) {
        margin: 10px;
        padding: 10px;
        box-sizing: content-box;
      }
      div:nth-child(3) {
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
  </body>
</html>

display 속성

display : none - 태그를 화면에서 보이지 않게 만듦

display : block - 태그를 한 줄씩 세로로 배치

display : inline - 태그를 한 줄내 가로로 배치, margin속성과 padding속성이 좌우로만 적용, width, height 적용안됨

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
        display: inline;
      }
      div:nth-child(1) {
        margin: 10px;
        padding: 10px
      }
      div:nth-child(2) {
        margin: 10px;
        padding: 10px;
        box-sizing: content-box;
      }
      div:nth-child(3) {
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>

display : inline-block : 한 줄내 가로로 배치, margin속성과 padding속성이 상하좌우로 다 적용

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        background: red;
        border: 10px solid black;
        display: inline-block;
      }
      div:nth-child(1) {
        margin: 10px;
        padding: 10px
      }
      div:nth-child(2) {
        margin: 10px;
        padding: 10px;
        box-sizing: content-box;
      }
      div:nth-child(3) {
        margin: 10px;
        padding: 10px;
        box-sizing: border-box;
      }
    </style>

visibility 속성

대상을 보이거나 보이지 않게 지정

display 속성의 none키워드와 달리 영역을 유지한 채로 보이지 않게만 만듦

visibility: collapse - 테이블 태그를 보이지 않게 만듦

visibility: visible - 태그를 보이게 만듦

visibility: hidden - 태그를 보이게 만듦

<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 100px;
    background: red;
    border: 10px solid black;
  }
  div:nth-child(1) {
    margin: 10px;
    padding: 10px
  }
  // 두번째 박스에 적용
  div:nth-child(2) {
    visibility: hidden;
    margin: 10px;
    padding: 10px;
    box-sizing: content-box;
  }
  div:nth-child(3) {
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
</style>

display : none 과 visibility : hidden 비교

<style>
  * {
    margin: 0;
    padding: 0;
  }
  div {
    width: 100px;
    height: 100px;
    background: red;
    border: 10px solid black;
  }
  div:nth-child(1) {
    margin: 10px;
    padding: 10px
  }
  div:nth-child(2) {
    display: none;
    margin: 10px;
    padding: 10px;
    box-sizing: content-box;
  }
  div:nth-child(3) {
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
  }
</style>