css 로 세모영역만 클릭되게 만들기

§

css 로 세모만들기는 오래전에 이글을 통해 소개해 드렸었는데, 오늘 이렇게 만든 세모영역에만 링크가 걸리게 하는 방법이 없냐는 질문을 bastcode 님이 질문해오셨습니다.

일단 결론부터 말씀드리자면, 불가능합니다.

왜 예전기법에서 세모영역에만 링크를 걸어주는게 불가능한가? 저 글에도 써놨네요.

삼각형은 결국 border 중 하나만 보여주고 나머지는 감추는식으로 만들어 지는 것 입니다.

border 가 눈에 보이지 않게 감춰지는 것 이지, 실제 DOM 에서 존재하지 않는게 아니기 때문에 불가능 한 것 입니다.

제가 4년전 소개했던 세모만들기 css 기법은 매우 고전적인 방법이고 (네, front-end 에서는 2-3년만 지나도 그 기법은 고전이 되어 버립니다.) bastcode 님이 원하시는 기능을 하기 위해서는 일단 새로운 방식으로 세모를 만들어야 합니다.


<style>
.triangle_up {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* 삼각형의 넓이는 높이의 1.4 배 */
  position: relative;
  overflow: hidden;
}
.triangle_up a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: hotpink;
  transform-origin: 0 100%;
  transform: rotate(45deg);  
  transition: background-color .3s;
}

.triangle_up a:hover {
  background: dodgerblue;
}
</style>

<div class="triangle_up"><a href="#"></a></div>

https://jsfiddle.net/mspsys/ekmyfpx5/
(제가 사용하는 css editor 에서 overflow: hidden 이 제대로 먹지 않아서 삼각형에 cursor 를 놓고 스크롤 하면 모습이 깨집니다. 정확한 모습은 jsfiddle 에서 확인하세요.)

보시다시피 직사각형을 45도 틀어주고 overflow 는 hidden 을 줘서 삼각형 모습을 만들었습니다.

이렇게 삼각형을 만들면 삼각형이 반응형도 되고 삼각형 영역만 링크가 형성 됩니다. 그나저나 bastcode 님의 색상선택이 핫핑크.. ㅋㅋㅋ (원래 상남자들이 핑크를 좋아한답니다.)

반응형 삼각형의 높이와 넓이의 비율은 1.4 를 유지해줘야 합니다. 수학공식인데, 제가 geometry 를 고등학교때 배운게 30년 전이라…. 자세한 설명은 곤란… 이게 무슨 이유가 있는건지 아니면 원래 반응형 삼각형 비율은 그렇게 형성되는건지… 저도 잘 몰라요. ^^;;;

암튼 1.4 비율은 그냥 공식이니까 그런걸로 알고 넘어가고, 이공식으로 넓이를 30% 로 잡으시면 높이 (padding-bottom) 는21.284271% 로 잡아줘야겠죠?

아, bastcode 님이 만들고 싶은 삼각형 모습은 높이가 더 높고 폭이 더 좁은 모습이거든요. 더 뾰족하게.

그런경우는 어떻게 하나?

직사각형을 더 많이 틀어주고 45도 에서 60도로, 그리고 skewX 를 30도 주면 뾰족한 모습의 삼각형이 만들어 집니다.

<style>
.triangle_up2 {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* 삼각형의 넓이는 높이의 1.4 배 */
  position: relative;
  overflow: hidden;
}
.triangle_up2 a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: hotpink;
  transform-origin: 0 100%;
  transform: rotate(60deg) skewX(30deg);    
  transition: background-color .3s;
}

.triangle_up2 a:hover {
  background: dodgerblue;
}
</style>

<div class="triangle_up2"><a href="#"></a></div>

https://jsfiddle.net/mspsys/6xmwa24j/

이것도 분명 수학공식이 존재할텐데, 몇도를 더 틀을때 x-axis 는 몇도를 더 skew 하는식으로… 제가 수학이 약해서…. 그냥 dev console 열어서 대충 눈대중으로 맞춘 것 입니다. ㅋㅋㅋㅋ

정혹한 각도를 수학공식으로 뽑으신다면 더 정확한 수치를 댓글로 알려주시면 감사하겠습니다. (제 생각에는 1:2 비율을 유지해주면 되는 것 같습니다. 트는각도: x axis 를 skew 해주는 deg 가 1:2)

마지막으로 삼각형 뿐만 아니라 이런 다이아몬드 형태의 다각형 모습도 만들 수 있습니다.

<style>
.triangle_up3 {
    width: 20%;
    padding-bottom: 20%;
    position: relative;
    overflow: hidden;
    transform: rotate(-68deg);
}
.triangle_up3 a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: hotpink;
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}
.triangle_up3 a:hover {
  background: dodgerblue;
}
</style>

<div class="triangle_up3"><a href="#"></a></div>

https://jsfiddle.net/mspsys/0gbsndjg/

그런데, 이런 불규칙한 모습의 다각형은 그냥 svg 로 그리는게 훨씬 더 편합니다. css 가 svg 에 비해 더 가볍긴 하지만 코딩이 너무 복잡해지고, 나중에 내가 아닌 다른사람이 유지보수를 하게 되는 경우 시간도 많이 소요되고,.. 여러가지로 좋지 않습니다. (핵캬님 css 는 너무 난해하고 복잡해서 뭐가 뭔지 하나도 모르겠어요. css 좀 간단하게 작성하세요!! 라고 나중에 랭커님한테 한소리 듣지 않아도 됩니다. ㅋㅋㅋ)

아, 갑자기 이 질문이 생각났는데,

https://kopress.kr/topic/이미지맵-링크-모바일-상에서-장애/

지도같은 불규칙한 모습도 css 로 그려낼 수 있는가?

만화 캐릭도 css 로 그려내는데, 시간만 많으면 뭔짓은 못하겠습니까?

css 로도 지도 모습을 그려내는게 가능하지만, 시간관계상, 크로스브라우징, 유지보수 문제도 있고, 현실적인 해결방식이 아닙니다. (일루 열어서 지도하나 tracing 하는게 훨 빠르죠.)


하… 저 지금 진짜 바쁜데.. ㅠㅠㅠㅠ

1. svg 로 지도를 그리시고

2. svg 내부에 path 를 a href 태그로 감싸주시면 땡. 개간단한 작업입니다.

어떻게 설명을 더 드려야 할지요? ㅠㅠㅠㅠ

혹시라도 이 작업을 하셔야 하는 다른 분들을 위해서 (생각보다 사이트에 이런 지도작업을 해야 하는 경우가 많죠.)

svg 작성은 어떤 설명을 드릴 수 있는게 아니고 그냥 일루 (아도비 일루스트레이터) 나 다른 vector 프로그램을 사용하시는 법을 배우시면 되는 것 입니다. 그래픽작업 하실 줄 모르시면 오데이 같은 알바 사이트 가시면 하루일당이면 작업 해줄 알바생 많을 거에요.

http://www.5day.co.kr/main.php

사실 일루로 지도 tracing 만 하면 되는 간단한 작업입니다. 이부분이 강원도 맞나요? 지도 영역에만 링크가 생성되는 것을 확인하실 수 있을듯.

일루만 쓰실 줄 아시면 svg 로 아주 간단하게 할 수 있는 작업입니다.


일루도 쓸줄 모르고, 알바비도 주기 싫다. 그래서 구글맵/다음맵을 쓰는법을 알아보겠다. 이런 생각이 드시는 분들께.

구글맵으로 해결될 수 있는 문제가 있고, 없는 문제가 있습니다. 코프레스에 질문 올리셨던 분의 경우는 구글맵으로 해결할 수 있는 솔루션이 아니던데,

Bulletproof 님이 “(구글 또는 다음)지도 사용 준비” 라고 답변 쓰셨더라구요. ㅋㅋㅋ

뭐 다 그렇게 고생하면서 배우는 거라 생각되어 답변을 추가로 달지는 않았습니다.

구글맵/다음맵은 나의 사용도에 맞게 적용시켜주는게 쉽지 않고, 불가능한 경우도 많습니다. 내가 원하는 모습 (디자인) 이나 특수한 기능을 적용하는 건 불가능 합니다. 구글맵이라는 솔루션 안에서 내 상황에 맞게 커스토마이징 하는게 전부라서 제약이 많습니다.

구글맵이 대안이 될 수 있는 경우도 물론 존재합니다. 그렇지만 구글맵을 쓸수 있는 경우에도 svg 로 맵 그려넣고 링크달아주는 작업에 비해 구글맵 달고 커스토마이징 하는 작업이 시간도 더 많이 소요되고 더 까다로운 작업입니다.

아 물론 구글맵/다음맵 API 쓰면 사이트 로딩속도는 폭망. 특히 다음맵의 경우 로딩속도가 매우 느려지지만 구글맵도 만만치 않습니다.

저 같으면 그냥 알바비 주고, 세부맵을 알바생에게 그려달라고 할듯요. ^^;;

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , , ,

카테고리:

Ω

12 Comments

  • bastcode says:

    역시 매튜님 크으 -_-b
    정확히는 이등변 삼각형 이미지 인데 삼각형을 제외한 공간 까지 영역으로 들어가서 공백이 클릭이 된다는 문제 때문에 나온 이슈였습니다.
    일반적인 보더로는 안되어서 시작점과 끝점 구해서 충돌 공식 구해서 그리면 되지 않냐 부터 별별 고민 다했었는데 이렇게 시원하게 답변 해주시니 역시 익스퍼트 하십니다 크으~
    최근 이직한 회사가 back end 보다는 front end 파트 영역 비중이 높아서 다시 파고있는 중이거든요

  • Junho Park says:

    그냥 편하게 svg로 …

    • Matthew says:

      빙고. 코딩만 보면 svg 사용이 정답입니다. 그냥 a href 로 감싸주면 끝이니까요.

      하지만 svg 를 그릴 줄 모른다면 이 편한 방식을 본인 혼자서는 사용을 못하죠. 일루로 지도나 원하는 모습을 그려줄 사람이 필요해진다는 단점이 있습니다.

      svg 를 작성하는 방법을 구체적으로 설명해 달라는 분이 계셔서 본문에 그 부분도 추가 설명하긴 했는데,…

      하…. 일루로 그림그리는 법을 글로 설명하는게 가능한건지 잘 모르겠습니다. 저는 능력부족이라… ㅋㅋㅋ

      • Junho Park says:

        아 저는 벡터 그래픽툴 다루는데 능숙해서 그런지 훨씬 편하더라구요. 단순한 도형 말고 svg 코드로 복잡한 그림 그리는 건 불가능하다고 봐요 ㅋㅋ 일루가 일러스트레이터인가요?

        • Matthew says:

          네. 한국에서는 illustrator 를 “일루” 라고 해야 알아듣고, photoshop 은 “뽀샵” 이라고 해야 알아듣던데요? (대화할때) 제 발음이 후져서 그런 것 같습니다.. ㅠㅠㅠㅠ

          네. Inkscape 이나 일루 같은 vector 그래픽 툴 사용을 못하는 개발자들은 svg 를 코드로 작성하려는 시도를 하고 어느정도는 svg를 코딩해서 작성할 수 있기도 합니다. 그런데 그래봐야 동그라미, 세모, 네모 정도죠.

          대부분의 개발자들이 그렇듯 저도 일루는 잘 못합니다. 그래픽 디자이너가 일루 작업하는거 어깨너머로 보고 배운거라서요. 뽀샵도 거의 혼자 배운거긴 한데, 뽀샵은 워낙 많이 쓰다보니 꽤 능숙합니다.

          에효… 20년 가까이 뽀샵을 했는데 능숙하지 않으면, 제가 좀 문제가 있는거 겠죠? ㅋㅋㅋ

          • bastcode says:

            일본에선 포토샵을 포토쇼우? 이런식으로… 쿨럭….
            [난 무슨 포토 쑈… 갤러리 말하는 줄 알았…]

            뭐 하긴 한국에선 버터 가 빠다 가 되는 효과. ㅋㅋ

            뽀샵이나 이런 단어는 일종에 아웃포커싱 같은 단어이긴 하죠.
            아웃포커싱 사실 제대로된 단어 아닙니다.
            포커스가 맞는 상태를 ‘팬 포커스’ 이라고 부르고 포커스가 안 맞는 상태를 ‘셀렉티브 포커스’ 라고 부릅니다만… 아웃포커싱이라 해야 알아듣죠 ㅋㅋ

  • Kye-Jun Hong says:

    안그래도 며칠전에 삼각형 구식으로 만들었는데, 이런 방법도 있네요 ㅎ 배워갑니다.

Leave a Reply

Your email address will not be published. Required fields are marked *