본문 바로가기
웹언어/웹컨텐츠제작꿀팁-HTMLCSS중급편

[웹컨텐츠제작꿀팁] 5강 Hover Effect(마우스오버효과) 이렇게 써라!

OSSAM 2021. 10. 30. 02:56
728x90
반응형

 

 

 

 

 

 

 

 

 

 

** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요!

https://www.youtube.com/watch?v=PBLIwR58Ex8 

 

 

 

 

 

 

 

 

 

 

 

 

 

** 이번에는 웹사이트에 많이 사용되는 Hover Effect 수업을 해보도록 하겠습니다.

 

** 사용될 이미지 : 출처 - pixabay

 

** 이미지를 다운받아 실습해보세요!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

1. overscale - 확대 효과

 

 

 

 

 

## HTML코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>hover 효과</title>
        <style>
            
        </style>
    </head>
    <body>
        <div class="gallery">
            <h3>유럽여행 갤러리</h3>
            <ul>
                <li>
                    <a href="#">
                        <img src="images/img01.jpg" alt="이미지01">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img02.jpg" alt="이미지02">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="images/img03.jpg" alt="이미지03">
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

- 전체를 한 챕터로 묶기 위해  <div class="gallery"></div> 로 묶었습니다. 

- 그리고 컨텐츠가 두개 이상 나열되면 리스트태그로 묶어주세요.

- 그리고 이미지 클릭 시 다른 페이지로 이동도 되서  <a> 태그로 묶기도 했지만,  :hover 선택이나  :focus 를 선택할 때  <a> 태그를 쓰는 것이 좋습니다.

 

 

 

 

## CSS코드

/* base */
*{ padding: 0; margin: 0; } /* 여백제거 */
li{ list-style: none; } /* 기호제거 */

.gallery{
  width: 940px; 
  border: 3px solid black;
  margin: 0 auto; /* 블록요소 가운데처리 */
  overflow: hidden; /* float받은 자손이나 후손의 높이도 인식 */
}
.gallery h3{
  width: 100%; height: 50px;
  text-align: center;
  /* 높이와 줄간격을 같게 하면 한줄 텍스트 가운데 처리 */ 
  line-height: 50px;
}
.gallery li{
  float: left;
  width: 300px; height: 200px;
  margin-right: 20px;
}
.gallery li:last-child{ margin-right: 0; }

.gallery a{
  display: block;
  width: 100%; height: 100%;
  overflow: hidden; /* 자손이 현재 요소보다 클때 안보이게 처리 */
}

/* CSS변화가 있을때 시간차를 줌 */
.gallery img{ transition: 0.3s; }
.gallery a:hover img, .gallery a:focus img{ /* a태그에 마우스를 올렸을 때 */
  transform: scale(1.2);
}

-  .gallery img{ transition: 0.3s; } 를 사용한 것은 이미지가 커지는 것에 시간차를 주기 위해 사용합니다.

-  .gallery a{ overflow: hidden; } 이 코드를 작성하지 않으면 이미지가 커질때 다른 이미지를 침범하기 때문에 반드시 부모요소보다 이미지가 커질때 넘어가는 것을 막아주세요.

-  .gallery a:hover img{ } 이렇게 선택하는 것은 a태그에 마우스를 올렸을 때 이미지를 선택하는 것입니다. 

-  .gallery a:focus img{ } 이렇게 선택하는 것은 a태그에 초점을 받았을 때 이미지를 선택하는 것입니다.

   => 이것은 잘 사용하지 않을 수 있으나, 웹접근성에서 초점이동시에도 동일한 효과를 줘야 한다면 사용해야 합니다. 

- 설명이 이해가 안가시는 분은 위의 유튜브 영상을 보시면 좋습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. overbg - 이미지 위에 bg처리(검정색)

 

 

 

 

## HTML코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>hover 효과</title>
        <style>
            
        </style>
    </head>
    <body>
        <div class="gallery">
            <h3>유럽여행 갤러리</h3>
            <ul>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img01.jpg" alt="이미지01">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img02.jpg" alt="이미지02">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img03.jpg" alt="이미지03">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

- 이미지 위에 bg처리를 해야해서  <figure> 태그로 한번 더 묶었습니다.

-  <figure> 태그를 작성하면 이미지에 대한 설명이나 제목인  <figcaption> 태그를 사용할 수 있기 때문입니다.

   <figcaption> 태그를 사용해서 이미지위에 올라가는 bg를 처리합니다.

 

 

 

 

 

## CSS코드

*{ padding: 0; margin: 0; }
li{ list-style: none; }

.gallery{
  width: 940px; margin: 0 auto;
  border: 3px solid black;
  overflow: hidden;
}
.gallery h3{
  width: 100%; height: 50px;
  line-height: 50px; text-align: center;
}
.gallery li{
  float: left;
  width: 300px; height: 200px;
  margin-right: 20px;
}
.gallery li:last-child{ margin-right: 0; }

.gallery a{
  display: block; /* 영역적용위해 사용 */
  width: 100%; height: 100%;

  overflow: hidden;

  position: relative; /* absolute의 기본기준은 body로 처리 - 현재 요소로 기준변경 */
}

.gallery figure{
  width: 100%; height: 100%;
}
.gallery figcaption{
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.7);

  position: absolute; /* 이미지와 겹치게 처리 */
  top: 0; left: 0;

  color: #fff; text-align: center;
  line-height: 200px;

  opacity: 0; /* 처음엔 안보이고 */

  transition: 0.3s;
}

.gallery a:hover figcaption, .gallery a:focus figcaption{
  /* 마우스를 올리면 보이게 처리 */
  opacity: 1;
}

-  .gallery a{ } 파트까지의 CSS는 위의 overscale과 같습니다.

- 추가된  <figure> 태그에는  .gallery figure{ width: 100%; height: 100%; } 를 줘서  <a> 태그의 영역을 상속받도록 처리했습니다.

-  .gallery figcaption{ }  역시 부모 전체 영역을 상속 받도록  width: 100%; height: 100%; 를 줬고, 검정색 배경색에 투명도를 주기 위해  background-color: rgba(0,0,0,0.7); 로  rgba( ) 함수를 사용했습니다.

-  .gallery figcaption{ } 는 이미지 위에 올라가야 하므로  position: absolute; top: 0; left: 0; 를 줘서 겹치도록 했습니다.

- 하지만  absolute 의 기본 기준은  <body> 태그이므로,  .gallery a{ } 에  position: relative; 를 줘서 a태그가 기준으로 바뀌게 해줬습니다. 

-  .gallery figcaption{ } 는 위에 올라가는 bg기 때문에 처음에 안보이게 처리하기 위해  opacity: 0; 을 줬습니다.

- 그리고 자연스럽게 나타나야하기 때문에 CSS변화에 시간차를 주기 위해  .gallery figcaption{ } 에  transition: 0.3s; 을 줬습니다.

- 그리고 마우스를 올렸을 때와 초점받았을 때 보이게 하도록 마지막 코드를 작성했습니다. 

  .gallery a:hover figcaption, .gallery a:focus figcaption{ opacity: 1;  } 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형

 

 

 

 

 

 

 

 

 

 

 

 

 

 

3. overbg - 사각형line처리

 

 

 

 

 

## HTML코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>hover 효과</title>
        <style>
            
        </style>
    </head>
    <body>
        <div class="gallery">
            <h3>유럽여행 갤러리</h3>
            <ul>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img01.jpg" alt="이미지01">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img02.jpg" alt="이미지02">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img03.jpg" alt="이미지03">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

- HTML은 위의 overbg와 같습니다.

- 예전에는 라인을 주기 위해 태그를 더 썼으나 최근에는 컨텐츠 전후선택자인  :after 나  :before 를 쓰는 것을 선호합니다.

위와 같이 사용하면 됩니다.

 

 

 

 

 

## CSS코드

*{ padding: 0; margin: 0; }
li{ list-style: none; }

.gallery{
  width: 940px; margin: 0 auto;
  border: 3px solid black;
  overflow: hidden;
}
.gallery h3{
  width: 100%; height: 50px;
  line-height: 50px; text-align: center;
}
.gallery li{
  float: left;
  width: 300px; height: 200px;
  margin-right: 20px;
}
.gallery li:last-child{ margin-right: 0; }

.gallery a{
  display: block; /* 영역적용위해 사용 */
  width: 100%; height: 100%;

  overflow: hidden; /* 넘어가는 자손을 안보이게 처리 */

  position: relative; /* figcaption의 앱솔루트 기준을 현재 요소로 변경 */
}

.gallery figcaption{
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.7);
  color: #fff; text-align: center;
  line-height: 200px;

  position: absolute; /* 기본기준 : body */
  top: 0; left: 0;

  opacity: 0; /* 처음에 안보이게 처리 */

  transition: 0.3s; /* 변화되는 CSS에 시간차를 줌 */
}

/* 테두리 */
.gallery figcaption:after{
  content: ''; /* 비워둠 */
  display: block;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border: 1px solid #fff;
  box-sizing: border-box;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto; /* 기준에서 정가운데 오도록 처리 */
}

.gallery a:hover figcaption, .gallery a:focus figcaption{
  opacity: 1;
}

-  .gallery figcaption{ }  파트까지의 CSS는 위의 overbg와 같습니다.

-  .gallery figcaption:after{ } 으로 테두리를 새로운 컨텐츠로 생성합니다. 

-  :after 나  :before 선택자를 사용하면 꼭  content: ''; 속성을 사용해야 합니다. 하지만 텍스트 컨텐츠를 넣은 것은 아니므로 따옴표를 사용하여 비워둡니다.

- 그리고  :after 나  :before 선택자는  display 의 기본값이  inline 요소입니다. 그래서 영역이 들어가지 않기 때문에 display: block; 으로 변경해줍니다.

-  .gallery figcaption:after{ } 의 영역을 작성할 때  calc( ) 함수를 썼는데 그 이유는 이미지 사이즈가 언제든지 바뀔 수 있기 때문에 절대적인 수치로 작성하면 매번 수정해야해서 그렇습니다. 

-  calc( ) 함수 내부에 사칙연산자 사용시 다른 값과 반드시 띄어쓰기인 공백을 적용해주세요. 

- 그리고 사이즈가 매번 같지 않기 때문에 역시 위치는 부모의 정가운데로 와야 합니다. 그리고 bg위에도 테두리가 올라와야하기 때문에  position: absolute; 를 통해 위에 겹치도록 해줍니다. 

-  position: absolute; 를 받은 요소가 가운데 오려면  left: 0; right: 0; top: 0; bottom: 0; margin: auto; 를 주면 됩니다.

- 그리고 역시 a태그에 마우스를 올리거나, 초점을 받으면 보이도록 합니다. 

    .gallery a:hover figcaption, .gallery a:focus figcaption{ opacity: 1;  } 

  =>  .gallery figcaption:after{ } 는 어차피  .gallery figcaption{ }  의 자손이기 때문에 따로 투명도 조절을 하지 않아도 됩니다. 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. overbg - 사각형 교차line처리

 

 

 

 

 

## HTML코드

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>hover 효과</title>
        <style>
            
        </style>
    </head>
    <body>
        <div class="gallery">
            <h3>유럽여행 갤러리</h3>
            <ul>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img01.jpg" alt="이미지01">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img02.jpg" alt="이미지02">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <figure>
                            <img src="images/img03.jpg" alt="이미지03">
                            <figcaption>자세히보기</figcaption>
                        </figure>
                    </a>
                </li>
            </ul>
        </div>
    </body>
</html>

- HTML은 위의 overbg와 같습니다.

- 예전에는 라인을 주기 위해 태그를 더 썼으나 최근에는 컨텐츠 전후선택자인  :after 나  :before 를 쓰는 것을 선호합니다.

위와 같이 CSS에서 작성할 예정입니다.

 

 

 

 

## CSS코드

*{ padding: 0; margin: 0; }
li{ list-style: none; }

.gallery{
  width: 940px; overflow: hidden; /* float를 받은 자손의 높이 인식 */
  margin: 0 auto;

  border: 3px solid black;
}

.gallery h3{
  width: 100%; height: 50px;
  text-align: center; line-height: 50px;
}

.gallery li{
  float: left; /* 수평나열 처리 */
  width: 300px; height: 200px;
  margin-right: 20px;
}
.gallery li:last-child{ margin-right: 0; }

.gallery a{
  display: block; /* 영역을 주기 위해 요소를 변경 */
  width: 100%; height: 100%; /* 부모 영역 상속 */
  position: relative; /* figcaption의 앱솔루트를 기준을 현재 요소로 변경 */
}

.gallery figcaption{
  width: 100%; height: 100%; 
  background-color: rgba(0,0,0,0.7);
  color: #fff; text-align: center; line-height: 200px;

  position: absolute; /* 기본기준 : body */
  left: 0; top: 0;

  opacity: 0; /* 처음에 안보이게 처리 */
  transition: 0.3s; /* css변화를 시간차 처리 */
}


/* 수평선 */
.gallery figcaption:before{
  content: ''; /* 비워둠 */
  display: block;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;

  transition: 0.3s;
}

/* 수직선 */
.gallery figcaption:after{
  content: ''; /* 비워둠 */
  display: block;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  margin: auto;
  transition: 0.3s;
}

.gallery a:hover figcaption, .gallery a:focus figcaption{
  opacity: 1;
}

.gallery a:hover figcaption:before, .gallery a:focus figcaption:before{
  height: calc(100% - 80px);
}
.gallery a:hover figcaption:after, .gallery a:focus figcaption:after{
  width: calc(100% - 80px);
}

-  .gallery figcaption{ }  파트까지의 CSS는 위의 overbg와 같습니다.

-  .gallery figcaption:before{ } 로 수평선을 만들거고,  .gallery figcaption:after{ } 로 수직선을 만들겁니다.

-  :after 나  :before 선택자를 사용하면 꼭  content: ''; 속성을 사용해야 합니다. 하지만 텍스트 컨텐츠를 넣은 것은 아니므로 따옴표를 사용하여 비워둡니다.

- 그리고  :after 나  :before 선택자는  display 의 기본값이  inline 요소입니다. 그래서 영역이 들어가지 않기 때문에 display: block; 으로 변경해줍니다.

- 영역을 작성할 때  calc( ) 함수를 썼는데 그 이유는 이미지 사이즈가 언제든지 바뀔 수 있기 때문에 절대적인 수치로 작성하면 매번 수정해야해서 그렇습니다. 

-  .gallery figcaption:before{ } 는 수평선이므로 테두리를  border-top: 1px solid #fff; border-bottom: 1px solid #fff; 를 처리해줍니다. 

-  .gallery figcaption:after{ } 는 수평선이므로 테두리를  border-left: 1px solid #fff; border-right: 1px solid #fff; 를 처리해줍니다.

- 그리고 사이즈가 매번 같지 않기 때문에 역시 위치는 부모의 정가운데로 와야 합니다. 그리고 bg위에도 테두리가 올라와야하기 때문에  position: absolute; 를 통해 위에 겹치도록 해줍니다. 

-  position: absolute; 를 받은 요소가 가운데 오려면  left: 0; right: 0; top: 0; bottom: 0; margin: auto; 를 주면 됩니다.

- 그리고 역시 a태그에 마우스를 올리거나, 초점을 받으면 보이도록 합니다. 

    .gallery a:hover figcaption, .gallery a:focus figcaption{ opacity: 1;  } 

  =>  .gallery figcaption:after{ } 는 어차피  .gallery figcaption{ }  의 자손이기 때문에 따로 투명도 조절을 하지 않아도 됩니다. 

- 수평선과 수직선도 마우스를 올리면 자연스럽게 안쪽으로 들어오게 처리하기 위해 크기를 변경해줍니다. 

- 수평선은 높이가 줄면 돼서  .gallery a:hover figcaption:before, .gallery a:focus figcaption:before{  height: calc(100% - 80px); } 로 처리합니다. 

- 수직선은 폭이 줄면 돼서  .gallery a:hover figcaption:after, .gallery a:focus figcaption:after{ width: calc(100% - 80px); } 로 처리합니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
반응형
저작자표시 비영리 변경금지

'웹언어 > 웹컨텐츠제작꿀팁-HTMLCSS중급편' 카테고리의 다른 글

[웹컨텐츠제작꿀팁] 번외편 - 새해맞이 윷놀이 만들기  (0) 2022.02.02
[웹컨텐츠제작꿀팁] 6강 Board Preview 이렇게 써라!  (0) 2022.02.02
[웹컨텐츠제작꿀팁] 4강 로그인창 이렇게 써라!  (2) 2021.10.19
[웹컨텐츠제작꿀팁] 3강 체크박스 모양변경, 이렇게 써라!  (0) 2021.10.11
[웹컨텐츠제작꿀팁] 2강 텍스트네비게이션 이렇게 써라!  (0) 2021.10.11

'웹언어/웹컨텐츠제작꿀팁-HTMLCSS중급편' Related Articles

티스토리툴바