2022. 04. 26 CSS

hongwr·2022년 4월 25일
0

CSS

목록 보기
6/12
post-thumbnail

CSS

<style>
      .box {
        width: 200px;
        height: 100px;
        background-color: beige;
      }

      .inner {
        width: 50%;
        height: 50%;
        background-color: blue;
      }

      .inner1 {
        margin: auto;
      }

      .box2 {
        text-align: center;
      }

      .inner3 {
        transform: translate(50%, 50%);
      }

      .box4 h1 {
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <h3>margin: auto</h3>
    <div class="box box1">
      <div class="inner inner1"></div>
    </div>
    <h3>text-align: center</h3>
    <div class="box box2">
      <button>Text</button>
    </div>
    <h3>translate(50%, 50%)</h3>
    <div class="box box3">
      <div class="inner inner3"></div>
    </div>
    <h3>Text centering</h3>
    <div class="box box4">
      <h1>Text<br />Text</h1>
    </div>
  </body>

margin: auto

블럭레벨의 태그를 사용할 때 수평 가운데로 넣고 싶다면 margin:auto를 사용하면 된다.

text-align: center

text 말고 다른 정렬을 할 때도 많이 쓴다.
center를 이용하면 가운데 정렬이 가능하지만 블록레벨의 태그에 적용하면 되지 않는다
이럴 때는 margin: auto를 이용해야 한다.

transform

transform: translate(50%, 50%);
수직, 수평 가운데 정렬
자기 자신의 사이즈만큼 이동한다. (그냥 중간으로 이동하는 게 아님)
ex) 가로 세로 200px이라면 원래 브라우저 왼쪽 모서리에 붙어있어야 할 사각형에서 50%인 100px만큼 움직인 것.

하지만 이 경우에는 부모가 따로 있어서 부모의 범위 안에서 절반을 간 것이지만, 만약에 부모가 없고 그냥 화면상에서 translate를 이용하여 가운데로 옮기려고 한다면 position을 일단 먼저 설정을 하고 top과 left를 50%를 설정한다.

이렇게 하면 사각형의 왼쪽 모서리가 하면 가운데에 가게 되는데, 그렇게 되면 이제 transform을 이용하여 가운데로 옮기면 된다

position: absolute;
top: 50%;
left: 50%
width: 200px;
height: 200px;
transform: translate(-50%, -50%)

line-height

text 및 button 등 블록레벨이 아닌 태그를 수직, 수평 가운데 정렬을 하고 싶을 때 사용한다

수평은 text-align: center를 이용
수직은 line-height를 이용하는데, 이때 부모 박스만큼 수치를 주면 수직 중간으로 간다.

텍스트의 수직 크기를 부모 박스의 수직 높이만큼 맞추겠다는 뜻.

profile
코딩 일기장

0개의 댓글