THE JINYA
HTML, CSS로 다각형 div 구현 및 호버링하기 본문
[오픈SW플랫폼 11주차 그룹 실습 과제-개발블로그 작성]
우리 팀이 잇화의 UI를 디자인할 때 가장 신박한 기능이라고 생각했던 부분이 홈 화면과 맛집 리스트 상단의 지도였다.
보통 지도 기능은, 네이버 지도같이 실제 지도 API를 삽입하는 경우가 많다.
하지만 우리가 잇화의 기본 테마를 생각할 때 중점적으로 뒀던 점이 심플함과 뽀짝함이었고, 이미 검색 기능을 비롯한 구현해야 할 여러 기능이 있는 상황에서 지도 API까지 삽입하면 심플함에서 벗어날 것 같다고 생각했다.
그래서 신촌, 정문, 후문, 아현, 교내로 학교 주변을 나누고 추상화시킨 지도를 구상했다.
각 영역을 클릭하면 해당 영역의 맛집 리스트로 이동시키고, UX를 위해 영역마다 호버링을 적용시키기로 했다.
사실 영역 모양이 사각형이었다면 그리 어렵지 않게 구현할 수 있었을 것이다.
배치 또한 기준이 되는 영역을 하나 정해서 해당 영역 div에 relative를 주고, 나머지 영역을 absolute를 주면 간단히 해결될 것이었다.
하지만 문제는 영역의 모양이 사각형을 (매우) 벗어나 있다는 것이었다.
그냥 div만 먹인다면 모양은 그럴싸할 지 몰라도, 클릭이나 호버링 기능이 제대로 작동하지 않을 것이 분명했다.
다각형 div 구현
구글링을 한 결과, css에서 div의 모양을 다각형으로 조정해준다면 된다는 것을 알게 되었다.
https://velog.io/@pandati0710/html-canvas-%EB%8B%A4%EA%B0%81%ED%98%95-hover-event-%EA%B5%AC%ED%98%84
html canvas 다각형 hover event 구현
서론 cavas에서 다각형 그리기 다각형 hover event 구현하기 결론
velog.io
꼭짓점의 좌표를 사용하면 된다는 것이었는데.. 뭔가 기하나 벡터 등등이 쓰이는 듯 해 다시 구글링을 했다..
https://merrily-code.tistory.com/130
[CSS] : clip-path 속성으로 원하는 도형 그리기
개인적으로는 색과 "선" 을 잘 사용하는 것이 감각적인 페이지 디자인의 성패를 결정한다고 생각하는데요, 사실 CSS에서 직사각형이 아닌 도형을 다루는게 마냥 쉽지는 않습니다. 😂 예를 들어
merrily-code.tistory.com
CSS의 clip-path 속성을 활용해 다양한 모향의 도형을 그릴 수 있는데,
웹사이트 clippy에서 이것을 매우 간편하게 할 수 있었다.
clip path : 이미지나 요소를 말 그대로 클립(잘라내기)할 수 있는 속성으로, 이것을 활용해 다각형을 쉽게 그릴 수 있다.
정문 영역을 예로 들어 설명해보자면,
1. 배경영역이 투명화되어있는 이미지 파일을 준비한다.
2. 이미지 크기를 확인한다. 예시 이미지의 경우 827 * 463 픽셀이었다.
3. clippy에서 이미지에 맞게 도형 모양과 Demo Size를 지정한다.
예시 이미지의 역 표지판 부분으로 인해 나의 경우에는 꼭지점이 9개인 Nonagon을 선택했고, 827이 입력되지 않았으므로 비율이 맞도록 410 * 230으로 입력했다.
4. 이미지 모양과 꼭지점이 맞도록 조정하면 끝!
clip-path: polygon(79% 2%, 80% 8%, 99% 3%, 80% 87%, 67% 100%, 7% 56%, 1% 28%, 68% 9%, 69% 3%);
하단의 코드를 CSS 파일에 붙여넣으면 영역에 딱 맞게 div가 조정되어 문제없이 클릭과 호버링을 할 수 있게 된다.
이런 방식으로 나머지 영역을 구현해 완성한 모습은 이렇다.
자세히 보면, 몇몇 영역의 테두리 부분이 어색한 것을 볼 수 있는데 이는 clippy에서 제공하는 모양이 꼭짓점이 12개인 도형이 최대였기에 어쩔 수 없었다. (ㅜㅜ)
그렇지만 얼추 괜찮은 것 같으니 만족..^^
다각형 div 배치
처음에는 교내 영역(ECC가 그려진 곳)을 기준 div로 두고 relative 속성을 주었는데,
그렇게 하니 교내 영역을 클릭했음에도 후문 영역(횡단보도 있는 곳)의 다각형 조정 전의 div와 겹치는 부분에서 클릭이 작동되지 않는 문제가 발생했다.
https://aboooks.tistory.com/83
[html/css] z-index 속성으로 배치 순서 결정하기
[html/css] z-index 속성으로 배치 순서 결정하기 어제는 레이아웃이나 배치를 정렬하는 position 속성에 대해 배웠습니다. position 속성으로 정렬하기 (static, relative, absolute, fixed 차이) 그런데 이렇게 배
aboooks.tistory.com
또다시 구글링을 통해 z-index 속성으로 자리가 겹치는 div의 배치 순서를 결정할 수 있다는 것을 알게되었다.
z-index는 position 속성이 적용된 div에서만 가능하다.
.mapbtn_sch {
position: relative;
z-index: 50;
}
.mapbtn_back {
position: absolute;
z-index: 1;
}
z-index에 입력한 수가 높을수록 더 앞에 온다. 따라서 해당 코드대로였다면 교내 영역 div가 후문 div보다 앞으로 배치되어야 했으나 어째선지 문제는 그대로였다.
relative-absolute는 부모 자식 관계에서만 쓸 수 있는 속성이라 교내 버튼이 후문 버튼보다 윗 단계에 있었는데, 아마 그 이유로 인하여 z-index 속성이 안 먹힌 것 같다.
그래서 그냥 기준이 되는 투명 div를 하나 만들고, 그 자식으로 지도 영역 div를 넣는 것으로 수정했다.
그렇게 해서 css에 z-index 속성을 동일하게 적용하니, 교내 버튼의 클릭과 호버링이 잘 작동되지 않는 문제가 해결되었다.
지도 호버링
호버링은 CSS에서 hover 속성을 추가한 요소를 만들면 된다.
해당 요소에 색이나 모양 속성을 추가하면 호버했을 때 바뀌는 모습을 볼 수 있다.
.container {
width: 800px;
height: 800px;
background: gold;
}
.container:hover {
background: silver;
}https://codingbroker.tistory.com/47
[HTML, CSS] 마우스 커서 올릴 때 (오버) 효과주는 방법 - hover
html에서 마우스 커서를 올렸을때(hover) effect를 주는 방법입니다. 금색 네모가 있습니다 해당 요소의 style에 :hover를 추가합니다 마우스 커버를 올리면(hover) 백그라운드 색상이 silver로 변합니다.
codingbroker.tistory.com
다만 이미지 자체의 색을 바꾸는 것과 글씨를 추가하는 것은 구현하는 방법을 찾지 못했기에 호버 후 영역 이미지를 호버링 코드에 추가하는 방식을 택했다.
html 파일의 img 태그에 onmouseover="this.src='호버 후 이미지 주소'" onmouseout="this.src='호버 전 이미지 주소'"를 추가하기만 하면 된다!
<a href="/restaurant/list" class="mapbtn_sch">
<img class="sch" height="150px" src="/static/교내.png" onmouseover="this.src='/static/교내호버.png'" onmouseout="this.src='/static/교내.png'">
</a>
끝~~