16. static, relative, z-index, imagemap

https://github.com/upcake/Class_Examples

교육 중에 작성한 예제들은 깃허브에 올려두고 있습니다. 

---

▲예제 01. position: static

 - 기본값, top, left는 의미가 없고 위치를 지정하지 않을 때와 같다.

 - 다른 태그와의 관계에 의해 자동으로 위에서 아래로 배치

 

 

▲예제 02. position: relative

 - relative는 위 태그의 마지막 지점 다음 줄을 시작점으로 갖는 속성이다. 즉, 새 줄에서 시작한다.

 

 

▲예제 03. static과 relative

 - relative가 static이 끝나는 지점에서 시작하는 것을 알 수 있다.

 

 

▲예제 04. relative 활용

 - absolute는 body의 margin에 영향을 받기 때문에 relative가 위치를 잡기 조금 더 편할 수 있다.

 

 

▲예제 05. 깊이값 z-index

 - z-index는 깊이 값이며 높을수록 위로 올라온다.

 

 

▲예제 06. imagemap

 - usemap 속성과 coords 속성을 이용한 imagemap을 통해 원하는 영역에 링크를 걸 수 있다.

 - circle은 원형이며 중심 좌표, 반지름을 좌표값으로 갖는다.

 - rect는 직사각형이며  좌상 꼭짓점과 우하 꼭짓점을 좌표값으로 갖는다.

 - poly는 다각형이며 꼭짓점의 좌표를 좌표값으로 갖는다.

 

 

▲문제. imagemap 활용