다른 이미지 보여주는 방법

이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다.

1 display 속성 이용하기
2 opacity 속성 이용하기

display 속성 이용하기

다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      h1 {
        text-align: center;
      }
      img {
        max-width: 100%;
      }
      .jb-a {
        width: 400px;
        margin: 0px auto;
      }
    </style>
  </head>
  <body>
    <h1>Hover Effect</h1>
    <div class="jb-a">
      <img src="images/image-01.jpg" alt="" class="jb-b">
      <img src="images/image-02.jpg" alt="" class="jb-c">
    </div>
  </body>
</html>

position 속성을 이용해서 두 이미지가 겹치게 만듭니다.

.jb-a {
  width: 400px;
  margin: 0px auto;
  position: relative
}
.jb-c {
  position: absolute;
  top: 0px;
  left: 0px;
}

두 번째 이미지를 보이지 않게 한 후, 마우스를 올렸을 때 나타나도록 합니다.

.jb-c {
  position: absolute;
  top: 0px;
  left: 0px;
  display: none;
}
.jb-a:hover .jb-c {
  display: block;
}

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

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        box-sizing: border-box;
        font-family: Consolas, monospace;
      }
      h1 {
        text-align: center;
      }
      img {
        max-width: 100%;
      }
      .jb-a {
        width: 400px;
        margin: 0px auto;
        position: relative
      }
      .jb-c {
        position: absolute;
        top: 0px;
        left: 0px;
        display: none;
      }
      .jb-a:hover .jb-c {
        display: block;
      }
    </style>
  </head>
  <body>
    <h1>Hover Effect</h1>
    <div class="jb-a">
      <img src="images/image-01.jpg" alt="" class="jb-b">
      <img src="images/image-02.jpg" alt="" class="jb-c">
    </div>
  </body>
</html>

opacity 속성 이용하기

display 속성을 이용하면 이미지가 바로 바뀝니다. 만약 서서히 나타나고 사라지는 효과를 주고 싶다면 opacity 속성을 사용합니다.

.jb-c {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  transition: opacity 0.5s linear;
}
.jb-a:hover .jb-c {
  opacity: 1;
}

CSS / Tutorial / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 과 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다.

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

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

CSS / Tutorial / 변수 사용하는 방법

CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.

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

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

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

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

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

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

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

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

CSS / Tutorial / 삼각형 만드는 방법

CSS의 border 속성으로 삼각형을 만들 수 있습니다. 여러 형태의 삼각형을 만들고, 그 삼각형을 회전하는 방법을 알아봅니다.

CSS Tutorial / !important

CSS에서 !important는 특정 스타일 규칙이 다른 모든 스타일 규칙보다 우선 적용되도록 강제하는 데 사용됩니다. 이 키워드는 일반적인 스타일 우선 순위를 무시하고, 해당 스타일이 다른 어떤 스타일보다도 높은 우선순위를 가지도록 합니다.

CSS / Tutorial / 문법

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