CSS / 마우스 오버 효과 / 서서히 길어지는 선 그리기

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

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

  • 다음과 같이 사각형을 만듭니다.
<!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;
}

.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>

Related Posts

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

CSS / calc() - 속성값을 사칙연산으로 정할 수 있게 하는 함수

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 font-size: calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다. 버전 : CSS Level 3 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...

CSS / 표(table) 꾸미기 / 테두리 만들기

CSS / 표(table) 꾸미기 / 테두리 만들기

테두리 만드는 속성 테두리는 border 속성으로 만듭니다. table, th, td 요소에 적용할 수 있습니다. tr 요소에는 적용되지 않습니다. 기본 모양 아무런 꾸밈을 하지 않았다면 기본 모양은 테두리가 없는 것입니다. th 요소는 보통 굵은 글씨에 가운데 정렬이 기본 모양입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> ...

CSS / white-space / 공백 처리 방법 정하는 속성

CSS / white-space / 공백 처리 방법 정하는 속성

개요 white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고 initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다.   스페이스와 탭1 줄바꿈2 자동 줄바꿈3 normal 병합 병합 O nowrap 병합 병합 X pre 보존 보존 X pre-wrap 보존 보존 O pre-line 병합 보존 O 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 ...

CSS / 링크 꾸미기

CSS / 링크 꾸미기

선택자 링크는 <a> 태그로 만듭니다. 따라서 <a> 태그를 선택하여 꾸밉니다. 예를 들어 a { color: red; } 는 링크의 색을 빨간색으로 만듭니다. 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성

CSS / border-spacing / 표(table)의 테두리와 셀(td)의 테두리 사이의 간격 정하는 속성

개요 border-spacing으로 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 정합니다. 기본값 : 2px 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 border-spacing: length | initial | inherit length : 길이를 입력합니다. 값이 한개면 모든 간격에 같은 값을 사용하고, 값이 두개면 첫번째 값은 좌우, 두번째 값은 상하의 간격으로 사용합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 ...

CSS / 변수 사용하기

CSS / 변수 사용하기

CSS 변수 CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수 선언 --variable-name: value; 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다. 변수 사용 property: var( --variable-name ) 예제 기본 변수 --my-color-1을 red로 설정하고 사용합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> :root ...

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성

CSS3의 transform 속성으로 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있습니다. IE는 버전 10 이상부터 지원한다는 것에 주의합니다. transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 문법 transform: rotate( angle ) transform: rotateX( angle ) transform: rotateY( angle ) angle에는 각의 크기를 입력합니다. 단위는 deg, rad, grad, turn 등을 사용합니다. turn은 1회전, 즉 360deg를 의미합니다. 예제 마우스를 올렸을 때 회전합니다. 회전하는 ...

CSS / color / 글자 색 정하는 속성

CSS / color / 글자 색 정하는 속성

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / line-height / 줄 높이 정하는 속성

CSS / line-height / 줄 높이 정하는 속성

개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다.  percentage : 글자 크기의 몇 %로 줄 ...

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

CSS / background-origin / 배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성

개요 HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3 문법 background-origin: border-box | padding-box | content-box | initial | inherit; border-box : 테두리 영역 왼쪽 위부터 채웁니다. padding-box : 안쪽 여백 영역 왼쪽 ...