오늘은 배운 것을 응용하여 아래와 같은 이미지 버튼들을 만들어 보았다.
해당 이미지는 사실 <a>태그를 이용한 링크이다.
클릭하면 y축으로 5px만큼 이동하여 마치 버튼을 누른듯이 동작한다.
<body>
<a class="btn moon" href="#moon"></a>
<a class="btn flower" href="#flower"></a>
<a class="btn beach" href="#beach"></a>
<a class="btn dove" href="#dove"></a>
<a class="btn balloons" href="#balloons"></a>
</body>먼저 body안에 <a>태그로 5개의 링크를 만들었다.
위와 같이 만들어진다. 이 링크들에 예쁜 이미지를 씌우기 위해 background-image 속성을 사용할 것이다.
우선, 모든 링크들은 다음과 같은 특성을 가진다
- 크기는 가로 250px 세로 250px
- 원형의 이미지
- 테두리에 그림자같은 효과가 있다
head 안의 style태그에 다음과 같이 작성한다.
<style>
.btn {
display: inline-block;
width: 250px;
height: 250px;
border-radius: 100%;
background-position: center center;
box-shadow: 3px 3px 5px gray;
margin: 10px;
}
</style>.btn은 모든 링크들이 공유하는 클래스이다.
1) display 속성으로 각각의 링크들이 inline-block level을 가지도록 설정하였다.
기본값은 inline level인데 그러면 자신의 컨텐츠만큼 부피를 갖기 때문에 이런 모양이 된다.
또한 block level로 설정하면 줄바꿈을 하기때문에, 줄바꿈 없이 전체만큼 부피를 갖는 inline-block level로 설정하였다.
2) width, height 속성으로 이미지의 크기를 250px, 250px로 설정하였다.
3) 기본적으로 이미지는 사각형이다.
border-radius 속성을 주면 테두리를 동그랗게 바꿀 수 있다. 100% 값을 주면 완전한 원형이 된다.
4) 이미지는 보통 중앙에 중요한 컨텐츠가 담긴다.
background-position: center center; 하면 전체이미지에서 중간부분을 잘라서 가져오게 된다.
5) box-shadow 속성은 테두리 부분을 그림자처럼 보이게 한다.
이렇게 모든 버튼은 위와 같은 특성들을 공유한다.
개별적으로 다른 부분, 이미지와 같은 경우는 각각 다음과 같이 처리한다.
이 때 background-image 속성을 사용할 것이다. 해당 속성은 url로 이미지를 삽입한다.
<style>
.btn.moon {
background-image: url('moon.jpg');
}
.btn.flower {
background-image: url('flower.jpg');
}
.btn.beach {
background-image: url('beach.jpg');
}
.btn.dove {
background-image: url('dove.jpg');
background-position: right;
}
.btn.balloons {
background-image: url('balloons.jpg');
}
</style>
링크는 재미있는 특성을 가지고 있는데, 상태마다 다른 액션을 취하도록 만들 수 있다.
- link: 방문 전 링크 상태
- visited: 방문 후 링크 상태
- hover: 마우스를 오버했을 때 링크 상태
- active: 클릭했을 때 링크 상태
위와 같은 특성을 이용하여 클릭했을 때 이미지를 동적으로 만들어보자
.btn:hover{
/* 마우스 오버할때 X방향으로 10PX 이동 */
transform: translateX(10px);
}
.btn:active{
/* 눌렸을때 Y방향으로 5PX 이동 */
transform: translateY(5px);
}이미지에 마우스를 오버하면 달아나듯 x축(오른쪽)으로 이동하며
클릭하면 눌려진듯 y축(아래)로 이동하는 모션을 확인할 수 있다.
이렇게 해서 움직이는 다섯개의 이미지가 만들어졌고, 클릭하면 각 링크가 가리키는 페이지로 이동한다.
'프로젝트' 카테고리의 다른 글
| web) video 태그를 사용하여 표현한 4계절 (0) | 2022.01.02 |
|---|---|
| mysql) TodayILearn (0) | 2021.12.22 |
| HTML 미니 프로젝트 : BEAUTEFUL POEM (0) | 2021.12.17 |
