2022 04 25 CSS

hongwr·2022년 4월 25일
0

CSS

목록 보기
5/12
post-thumbnail

box-sizing

content-box

box-sizing의 기본값.
box의 size에는 영향을 주지 않고 변화된 것이 추가되는 것.

border-box

padding 등 전부 포함해서 box의 size내에서 해결하기 때문에, box-sizing: border-box를 실행하게 되면 충 박스에서 비율이 조절된다.

대부분 border를 사용한다.

    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .inner {
        width: 100%;
        height: 100%;
        background-color: blue;
      }
      .box2 {
        padding: 20px;
        box-sizing: content-box;
        border: 10px solid black;
      }
      .box3 {
        padding: 20px;
        box-sizing: border-box;
        border: 10px solid black;
      }
    </style>
  </head>
  <body>
    <h3>Box without padding</h3>
    <div class="box box1">
      <div class="inner"></div>
    </div>

    <h3>Box with padding</h3>
    <div class="box box2">
      <div class="inner"></div>
    </div>

    <h3>Box with padding, boder-box</h3>
    <div class="box box3">
      <div class="inner"></div>
    </div>
  </body>

position

<style>
      .outer {
        width: 200px;
        height: 200px;
        margin-bottom: 20px;
        background-color: green;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
      }
      .inner {
        width: 100%;
        height: 50%;
      }
      .inner1 {
        background-color: blue;
      }
      .inner2 {
        background-color: yellow;
      }

      .box1 .inner1 {
        position: relative;
        top: 30px;
        left: 100px;
      }

      .box2 .inner1 {
        position: absolute;
        top: 30px;
        left: 100px;
      }
    </style>
  </head>
  <body>
    <div class="outer">
      <div class="box box1">
        <div class="inner inner1">inner1</div>
        <div class="inner inner2">inner2</div>
      </div>
    </div>
    <div class="outer">
      <div class="box box2">
        <div class="inner inner1">inner1</div>
        <div class="inner inner2">inner2</div>
      </div>
    </div>
  </body>

static

position의 기본값

relative

원래 있던 자리는 그대로 유지하면서 이동한다.

다른 아이들이 재배치가 일어나지 않는다.

absolute

원래 있던 자리에서 튀어나오기 때문에 원래 있던 것들이 재배치가 일어난다.

근접한 부모값 중에 static이 아닌 부모를 기준으로 움직인다.
즉, box 안에서 움직이게 하려면 부모를 static이 아닌 다른 형태로 지정해야 한다.

.box {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative; ///여기가 중요
      }
      
.inner1 {
        background-color: blue;
      }
      
.inner2 {
        background-color: yellow;
      }
      
.box2 .inner1 {
        position: absolute;
        top: 30px;
        left: 100px;
      }
      
<div class="outer">
      <div class="box box2">
        <div class="inner inner1">inner1</div>
        <div class="inner inner2">inner2</div>
      </div>
</div>

.box {
        width: 100px;
        height: 100px;
        background-color: red;
        /* position: relative; */ 주석처리로 변경
      }

profile
코딩 일기장

0개의 댓글