position의 값이 fixed일 때 가운데 정렬하는 방법

CSS Tutorial

position의 fixed를 이용하여 요소의 위치를 고정시킬 수 있습니다. 예를 들어 상단에 고정되는 메뉴바를 만들 때 사용합니다. 그런데, fixed를 하면 요소가 한쪽으로 치우칩니다. 만약 가운데에 위치시키고 싶다면 어떻게 할까요? transform 속성으로 해결할 수 있습니다.

아래는 가운데에 위치한 두 요소가 있는 간단한 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-b {
        width: 400px;
        height: 100px;
        margin: 0px auto;
        background-color: #000000;
      }
      .jb-c {
        width: 600px;
        height: 200px;
        margin: 0px auto;
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <div class="jb-a">
      <div class="jb-b"></div>
      <div class="jb-c"></div>
    </div>
  </body>
</html>

위에 있는 요소를 position: fixed;를 이용하여 고정하면 왼쪽에 위치합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      .jb-a {
        position: relative;
      }
      .jb-b {
        width: 400px;
        height: 100px;
        margin: 0px auto;
        background-color: #000000;
        position: fixed;
      }
      .jb-c {
        width: 600px;
        height: 200px;
        margin: 0px auto;
        background-color: #666666;
      }
    </style>
  </head>
  <body>
    <div class="jb-a">
      <div class="jb-b"></div>
      <div class="jb-c"></div>
    </div>
  </body>
</html>

left: 50%;를 추가하여 시작 위치를 정가운데로 만듭니다.
transform: translateX( -50% );를 추가하여 요소 크기의 50%만큼 왼쪽을 이동합니다.

.jb-b {
  width: 400px;
  height: 100px;
  margin: 0px auto;
  background-color: #000000;
  position: fixed;
  left: 50%;
  transform: translateX( -50% );
}

Post Views: 1

CSS Tutorial

CSS / Tutorial / 세로 가운데 정렬하는 방법

CSS에서 텍스트의 가로 가운데 정렬은 text-align 속성을 이용합니다. 요소의 가로 가운데 정렬은 margin 속성을 이용합니다. 세로 정렬을 가운데로 하려면 어떻게 해야 할까요? 네 가지 방법을 소개합니다.

CSS / Tutorial / ul, ol 가운데 정렬하는 방법

목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.

CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.

CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법

마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

CSS / Tutorial / 마우스 호버 효과 / 텍스트 나오게 하는 방법

CSS로 특정 요소에 마우스를 올렸을 때 보이지 않던 특정 요소가 보이게 할 수 있습니다. 아래는 문단에 마우스를 올렸을 때 div 요소가 나오게 하는 예제입니다. div 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.