서서히 길어지는 선 만드는 방법

CSS Tutorial

마우스를 올리면 선이 그려지는 효과를 만들어봅니다.

위쪽 가로 방향으로 선 그리기

다음과 같이 사각형을 만듭니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
      }
      .jb {
        width: 400px;
        height: 400px;
        margin: 40px auto;
        border: 10px solid #dadada;
      }
    </style>
  </head>
  <body>
    <div class="jb">
    </div>
  </body>
</html>

:before를 이용하여 선이 시작하는 위치를 정합니다.
position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.

.jb {
  width: 400px;
  height: 400px;
  margin: 40px auto;
  border: 10px solid #dadada;
  position: relative;
}
.jb:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #444444;
}

:hover를 이용하여 마우스를 올리면 긴 선으로 바뀌도록 합니다.
여기까지 코딩하면 마우스를 올렸을 때 바로 선이 길어집니다.

.jb:hover:before {
  width: 420px;
}

transition 속성을 추가하여 애니메이션 효과를 줍니다.

.jb:before {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px;
  display: block;
  width: 10px;
  height: 10px;
  background-color: #444444;
  transition: all linear 0.5s;
}

전체 코드는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
      }
      .jb {
        width: 400px;
        height: 400px;
        margin: 40px auto;
        border: 10px solid #dadada;
        position: relative;
      }
      .jb:before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        display: block;
        width: 10px;
        height: 10px;
        background-color: #444444;
        transition: all linear 0.5s;
      }
      .jb:hover:before {
        width: 420px;
      }
    </style>
  </head>
  <body>
    <div class="jb">
    </div>
  </body>
</html>

아래쪽 가로 방향으로 선 그리기

:after를 이용하여 아래쪽에도 같은 효과를 넣습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
      }
      .jb {
        width: 400px;
        height: 400px;
        margin: 40px auto;
        border: 10px solid #dadada;
        position: relative;
      }
      .jb:before {
        content: "";
        position: absolute;
        top: -10px;
        left: -10px;
        display: block;
        width: 10px;
        height: 10px;
        background-color: #444444;
        transition: all linear 0.5s;
      }
      .jb:hover:before {
        width: 420px;
      }
      .jb:after {
        content: "";
        position: absolute;
        bottom: -10px;
        right: -10px;
        display: block;
        width: 10px;
        height: 10px;
        background-color: #444444;
        transition: all linear 0.5s;
      }
      .jb:hover:after {
        width: 420px;
      }
    </style>
  </head>
  <body>
    <div class="jb">
    </div>
  </body>
</html>

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 요소 안에 텍스트가 있지만, 텍스트가 아닌 이미지 등 다른 것도 가능합니다.