내가 만든 사이트는 일단 기본적으로 매우 밋밋하다. 어떤 효과를 줘야 할까 생각하다가, 마우스 오버 효과를 주면 어떨까 하는 생각이 들었다. 일단 기본은 이렇다.
여기 보면 아래에 제품 링크들에 대해 커서를 갖다대면 색깔을 바꾸도록 하려고 한다. 다행히 이 기능은 css에 hover라는 기능으로 구현되어 있었다. 아래와 같이 간단하게 구현이 가능하다.
// <head>태그의 <sytle>안에 아래와 같은 내용을 삽입한다.
.container {
width: 800px;
height: 70px;
}
.container:hover {
background: #DDECEE;
}
// 이제 정의된 container 클래스를, 적용하고 싶은 부분에 해당 클래스를 명시해준다.
<ul class="guiz-awards-row container">
<li class="guiz-awards-title"><a href="${link}" target="_blank">">${title}</a>
<div class="guiz-awards-subtitle">${source} / ${date}</div>
</li>
</ul>
width와 height가 색깔이 변하는 범위(크기)를 설정하는 것이고, background가 바뀔 색깔을 정의하는 것이다.
결과는 다음과 같다.
마우스 커서를 갖다대면 위와 같은 색으로 변한다. 깔끔하니 좋다.
'SCC 9기' 카테고리의 다른 글
| [SCC 9기] - Project TIL : DB 중복제거와 짧은 데이터 제거 (0) | 2020.08.31 |
|---|---|
| [SCC 9기] - Project TIL : 웹폰트 적용하기 (0) | 2020.08.31 |
| [SCC 9기] - Project TIL : 뷰포트 (0) | 2020.08.31 |
| [SCC 9기] - Project TIL : mariadb 내용을 딕셔너리 형태로 재생성 (0) | 2020.08.27 |
| [SCC 9기] - Project TIL : mongodb 에서 mariadb로 전환 (0) | 2020.08.25 |