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>

같은 카테고리의 다른 글
CSS / Tutorial / 원 또는 타원 만드는 방법

CSS / Tutorial / 원 또는 타원 만드는 방법

CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.

CSS / Tutorial / 상속(inheritance)

CSS / Tutorial / 상속(inheritance)

CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다.

CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법

CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다.

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

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

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

CSS / Tutorial / 구분선 만드는 방법

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.

CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법

CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. 이를 반응형으로 만들고 싶다면 아래처럼 합니다.

CSS / Tutorial / 문법

CSS / Tutorial / 문법

CSS 문법은 선택자(selector), 속성(property), 값(value)의 조합으로 구성됩니다. 다음은 가장 간단한 CSS 코드입니다. h1 { color: red } h1, color, red 세 개의 단어가 있는데 각각 선택자, 속성, 값입니다.

CSS / Tutorial / 마우스 호버 효과 /  이미지 확대하는 방법

CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법

이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.

CSS / Tutorial / 표 꾸미기 / 배경색

CSS / Tutorial / 표 꾸미기 / 배경색

배경색은 background-color 속성으로 만듭니다. table, tr, th, td, thead, tbody, tfoot에 적용할 수 있습니다. 다음 표를 기본으로 하고, 배경색을 여러 곳에 추가해보겠습니다.

CSS / Tutorial / 마름모 만드는 방법

CSS / Tutorial / 마름모 만드는 방법

CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.