[CSS3] HTML/CSS 13일차

HTML / CSS

✔ Preview

transform, transition, 이미지맵 태그 사용 방법 정리

---

✍ Summary

Transform

: transform은 특정 요소의 회전, 크기 조절, 기울이기 등의 효과를 주는 속성이다.

#transform1 {
	transform: lotate(90deg) /* 시계 방향으로 90도 회전 */
}

#transform2 {
	transform: skewy(20deg) /* y축을 기준으로 20도 비틀기 */
}

#transform3 {
	transform: scale(1.5, 1.5) /* 가로 1.5, 세로 1.5 확대 */
}

 

Transition

: 속성의 변화가 있을 때, 값의 변화가 특정 시간(duration)동안 이루어지도록 하는 속성이다.

#box {
	width: 30px;
	height: 20px;
	border: 1px solid white;
    /* transition은 hover 이전의 원래 속성에 부여해야 함 */
	transition: width 2s, height 1s; /* width와 height의 변화속도를 다르게 설정 */
}

#box:hover {
	width: 100%;
    height: 170px;
}

 

 

이미지맵 태그

: 이미지(image)파일에 링크를 걸어주는 태그이다. 사각형, 원형, 다각형 등의 설정을 할 수 있으며 주로 지도나 노선도 등에 활용된다.

<img src="images/map.jpg usemap="#maptest">

<map>
	<area shape="rect" coords="20,72, 160, 280" href="https://www.naver.com"> <!-- 대각선으로 선이 그어지도록 사각형의 두 꼭짓점좌표(x,y) 작성 -->
	<area shape="circle" coords="250,138, 85" href="https://www.youtube.com"> <!-- 원의 중심좌표(x,y)와 반지름 작성 -->
	<area shape="poly" coords="340,123, 352,266, 409,284, 470,267, 480,123" href="https://www.tistory.com">
	<!-- 다각형의 특정 좌표부터 선으로 이어질 수 있도록 순서대로 좌표 작성 -->
</map>