-
hover 태그 활용하기Coding 2022. 6. 13. 08:17
HTML에서 페이지에 다른 특정 페이지를 호출할 때는 기본적으로 a태그를 사용한다. a태그는 링크의 기능을 가지고 있는 태그다. 링크를 거는 것은 간단하나 a태그에 몇가지 속성이 존재한다. 총 4개의 속성이 존재하는데 link, visited, hover, active가 있으며 css에서 해당 속성을 활용해 링크에 특정 액션을 인식할 수 있어 스타일을 지정하는데 활용한다.
a:link 해당 링크를 방문하기 전 상태
a:visited 해당 링크를 방문한 뒤 상태
a:hover 해당 링크에 마우스를 올렸을 때 상태
a:active 해당 링크를 클릭했을 때 상태
icon hover 이펙트에서는 css를 이용해 9가지의 효과를 해볼 수 있으며 해당 효과는 아이콘 이미지가 아닌 아이콘이 출력되는 폰트를 사용해 색상을 변경하고 스타일을 주는 방법이 있다.
기본(화살표) cursor:default 포인터(손모양) cursor:pointer 십자선(초점) cursor:crosshair 물음표 cursor:help 이동 cursor:move 모래시계 cursor:wait 화살표(동,동서) cursor:e-resize 화살표(서,동서) cursor:w-resize 화살표(남,남북) cursor:s-resize 화살표(북,남북) cursor:n-resize 손+모래시계 cursor:progress 열사이즈조절 cursor:row-resize 행사이즈조절 cursor:col-resize 휠스크롤 cursor:all-resize 드롭금지 cursor:no-drop background css 속성
효과의 각 속성과 작동원리에 대해 알아볼 필요가 있다.
마우스 오버 효과
overscale
<div class="image"> <ul> <li> <a href="#"> <img src="이미지주소" alt="이미지01"> </a> </li> </ul> </div> /* CSS변화가 있을때 시간차를 줌 */ .image img{ transition: 0.3s; } .image a:hover img, .image a:focus img{ /* a태그에 마우스를 올렸을 때 */ transform: scale(1.2); }- .image img{ transition: 0.3s; } 이미지가 커지는 것에 시간차를 주기 위해 사용
- .image a{ overflow: hidden; } 이 코드를 작성하지 않으면 이미지가 커질때 다른 이미지를 침범하기 때문에 반드시 부모요소보다 이미지가 커질때 넘어가는 것을 막아줌
- .image a:hover img{ } a태그에 마우스를 올렸을 때 이미지를 선택
- .image a:focus img{ } 이렇게 선택하는 것은 a태그에 초점을 받았을 때 이미지를 선택하는 것
웹접근성에서 초점이동시에도 동일한 효과를 줘야 한다면 사용해야 합니다.
이미지 위에 bg처리
overbg
<div class="image"> <ul> <li> <a href="#"> <figure> <img src="이미지주소" alt="이미지01"> <figcaption>자세히보기</figcaption> </figure> </a> </li> </ul> </div> .image figure{ width: 100%; height: 100%; } .image 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; } .image a:hover figcaption, .image a:focus figcaption{ /* 마우스를 올리면 보이게 처리 */ opacity: 1; }- .image a{ } 파트까지의 CSS는 위의 overscale과 같음
- 추가된 <figure> 태그에는 .image figure{ width: 100%; height: 100%; } 를 줘서 <a> 태그의 영역을 상속받도록 처리
- .image figcaption{ } 역시 부모 전체 영역을 상속 받도록 width: 100%; height: 100%; 를 줬고, 검정색 배경색에 투명도를 주기 위해 background-color: rgba(0,0,0,0.7); 로 rgba( ) 함수를 사용
- .image figcaption{ } 는 이미지 위에 올라가야 하므로 position: absolute; top: 0; left: 0; 를 줘서 겹치도록 함
- 하지만 absolute 의 기본 기준은 <body> 태그이므로, .image a{ } 에 position: relative; 를 줘서 a태그가 기준으로 바뀌게 해줌
- .image figcaption{ } 는 위에 올라가는 bg기 때문에 처음에 안보이게 처리하기 위해 opacity: 0; .
- 그리고 자연스럽게 나타나야하기 때문에 CSS변화에 시간차를 주기 위해 .image figcaption{ } 에 transition: 0.3s;
- 그리고 마우스를 올렸을 때와 초점받았을 때 보이게 하도록 마지막 코드를 작성
.image a:hover figcaption, .image a:focus figcaption{ opacity: 1; }
'Coding' 카테고리의 다른 글
파이썬 자료형이란 무엇 (0) 2022.07.03 Next.js-웹과 애플리케이션-React-DOM-HTML로 이어지는 스토리 (0) 2022.06.29 파이썬이란 (0) 2022.06.28 개발 framework 와 Next.js (feat. 인기있는 기술) (0) 2022.06.27 reading-tine.js 읽는시간 표시 (0) 2022.06.06 npm install 이란 (0) 2022.06.03 Sass(SCSS) 개념 (0) 2022.06.03 깃허브 사이트 생성하기전 해야하는 것 (Jekyll과 Git 설치) (0) 2022.06.01