툴팁 뾰족이(▲)

18829 단어 CSSCSS

CSS 시리즈는 Scss를 사용하는 것을 전제로 진행된다.

이번에 만들어 보고자 하는 요소는 툴팁 뾰족이(▲)이다.
위와 같은 툴팁 뾰족이(▲)는 어떻게 만들 수 있을까?

이를 오로지 CSS를 이용해서 간단하게 만들 수 있다.

우선 이를 만들기 위해서는 border 에 대한 이해가 필요하다.

다음 소스 코드를 보자.

/* style.css */
div {
 width: 0;
 heigth: 0;
 border: 4px solid white;
 border-top-color: red;  /* border의 위쪽 color를 지정하고 싶을 때 사용할 수 있다. */
 border-rigth-color: yellow; /* 위와 동일하게 border의 오른쪽 color를 지정한다. */
 border-bottom-color: teal;  /* 위와 동일 */
 border-left-color: tomato;  /* 위와 동일 */
}
<!-- index.html -->
<body>
  <div></div>  
</body>

이러한 상태는 다음과 같이 나타난다.

약간 당황스러울 수 있다. 우리가 평소에 border는 그냥 border 라고 생각했는데 말이다.
생각보다 우리는 border를 어떤 식으로 css에서 처리하는지에 대해 정확히 알고 있지 못한 걸수도 있다.

이게 뭔일이지? 라고 생각이 들 수 있을 것 같아 조금 더 빠른 이해를 위해 코드를 약간 수정해보도록 한다.

위와 같은 생김새는 우리가 div에 width 와 heigth를 0으로 설정했기 때문에 그런 것인데, 만약 평소대로 우리가 하던 방식처럼 각각 값을 설정해주도록 해보자.

div {
 width: 10px;
 heigth: 10px;
 border: 4px solid white;
 border-top-color: red;  
 border-rigth-color: yellow; 
 border-bottom-color: teal;  
 border-left-color: tomato;  
}

위처럼 width와 heigth 값을 주면 이제는
다음과 같이 생기게 된다.

자 이제 우리가 여기서 내릴 수 있는 결론은 다음과 같다.

border가 그려질 때, 서로 맞닿아 있는 부분에서는 위처럼 사선으로 처리가 된다는 사실을 알 수 있다.

그리고 이 원리를 활용하면 우리가 만들어야 할 뾰족이(▲) 또한 굉장히 쉽게 만들 수 있다.

그럼 이제 직접 만들어 보도록 하자.

기본적인 세팅은 끝나있는 상태이며 이는 다음과 같은 모습이라고 하자.

위 이미지의 컨테이너의 클래스는 '.my-menu-content'다.
이제 우리는 위 컨테이너에 가상 요소 ::before를 주도록 하자.

.my-menu {
  $button-size: 32px;
  $tooltip-size: 12px;

  position: relative;
  
  &-content {
  	@include pos-center-x;
  	top: $button-size + $tooltip-size + 8px;
  	border-radius: 4px;
  	opacity: 0;
 	 // ... 생략
  
   &::before {
       display: block;  // width와 heigth 값을 주고자 한다면, display: block을 설정.
       width: 0;
       height: 0;
       border-top: $tooltip-size solid transparent;
       border-right: 10px solid transparent;
       border-bottom: $tooltip-size solid $black;
       border-left: 10px solid transparent;
       content: '';  // content는 가상요소 사용시 필수요소이다.
    }
  }
}

이제 천천히 위의 코드를 살펴보며 짚고 넘어가야 하는 부분들을 체크해보자.

첫째로, ::before 혹은 ::after와 같은 가상요소를 사용할시에는 무조건 css property로 content가 따라와야한다.

둘째로, 가상요소는 inline 요소이기 때문에, width와 heigth 값을 주고자 한다면, display: block을 설정해줘야한다.

셋째로, width, height 0으로 설정해준다.

넷째로, border는 네 면 모두 설정해준다. 다만 배경색상은 bottom 빼고 모두 transparent로 설정해준다 이에 대한 이유는 밑에서 설명한다. 또한 top과 bottom의 width값은 서로 같아야 하고, 동일하게 right와 left의 width 값도 동일해야 한다. 그래야만 대칭인 삼각형이 나온다.

다섯째로, 우리가 만들고자 하는 뾰족이의 배경색상은 하얀색이다. 이를 만들기 위해서는 border-bottom을 선택해야 할 것이고, 이것의 배경색상을 하얀색으로 설정해주면 된다. 다만 우선은 눈에 잘 보이게 black 색상을 준다.

자 여기까지 했다면 한번 확인해보자. 어떻게 생겨있을까?

아주 귀여운 border 가 만들어진 것을 확인할 수 있다.

우선은 위까지의 단계까지 도달했다면 이제 저 뾰족이의 배경색상을 하얀색으로 바꾸어 주고, 위치만 잘 가운데로 조절해주면 될 것 같다.

지금 위의 뾰족이 같은 경우에는 'my-menu-content' 라고 하는 클래스의 자식이다.

그렇다면 위 뾰족이는 'my-menu-content' 를 기준으로 해서 가운데로 와야할 것이다.
근데 'my-menu-content'는 이미 pos-center-x 를 가지고 있다. 따라서 우리도 마음 편하게 가상요소에게도 pos-center-x 를 때려주도록 하자.

그러면 다음과 같이 가운데로 딱 위치한 것을 확인할 수 있다.

그리고 이제 위치를 올려주기만 하면 될 것 같다.
top: -24px;
위에서 $tooltip-size와 같이 변수를 선언해주었기 때문에 이를 활용한다면 위 코드는 다음과 동일하다.
top: -#{$tooltip-size * 2};

그리고 다시 현재 상태를 봐보도록 하자.

나름대로 가운데로 잘 들어온 듯 하다.
이제 배경색만 하얀색으로 바꿔주면 될까 ?
배경색상을 이제 바꿔보도록 하자.

음 잘 들어왔긴 한데 살짝 문제가 생긴 것 같지 않은가?
컨테이너에만 border 가 들어와 있는 상태인데, 사실 뾰족이 또한 border가 필요하다.

근데 우리가 이 뾰족이를 무엇으로 만들었나..? 가상 요소로 만들었지 않은가?
굉장히 난처하다.
이건 또 어떻게 해결 할 수 있을까?

위와 같은 상황에선 우리는 바로 꼼수를 써야만 하는 것이다.
어떻게 할 것이냐..?
다음과 같이 가상요소 ::after 도 만들어 버리는 것이다.

자 다음 소스코드를 봐보자.

&::before,
    &::after {
      @include pos-center-x;
      top: -#{$tooltip-size * 2};
      display: block;
      width: 0;
      height: 0;
      border-top: $tooltip-size solid transparent;
      border-right: 10px solid transparent;
      border-bottom: $tooltip-size solid transparent;
      border-left: 10px solid transparent;
      content: '';
    }

    &::after {
      top: -#{$tooltip-size * 2 - 2px};
      border-bottom-color: hotpink;
    }

위 소스 코드를 보면 우선 ::before와 함께 ::after 또한 만들어주었다. 그리고 나서 ::after 친구한테는 따로 추가적인 선언을 좀 더 해주고 있다.

::after 같은 경우에는 위치를
::before 보다 한 칸 적게, 즉 -2px을 해주었다. 또한
border-bottom-color: hotpink; 로 배경색상을 설정해보았다.

이렇게 하면 다음과 같은 모습이 나오게 된다.

가상요소 ::after 가 위의 분홍색인데, 살짝 아래로 쳐지면서 덕분에 ::before 는 오히려 border 같은 역할을 해주고 있는 것을 볼 수 있다.

자 이제 우리가 어떻게 해주어야 할 지 점점 감이 온다. 위와 같은 느낌으로 이제 마무리만 해주면 될 듯 하다..!

::before 에는 border-bottom-color 를 기존의 컨테이너와 동일한 border 색상으로 주면 될 듯 하고, ::after 는 border-bottom-color 을 하얀색으로 준다면 우리가 원하는 툴팁 뾰족이(▲)의 모습이 나올 것 같다.

다음 소스 코드는 최종 코드이다.

.my-menu {
  $button-size: 32px;
  $tooltip-size: 12px;

  position: relative;
  
  //...생략
  
  &-content {
    @include pos-center-x;
    top: $button-size + $tooltip-size + 8px;
    border-radius: 4px;
    opacity: 0;
    // ...생략

    &::before,
    &::after {
      @include pos-center-x;
      top: -#{$tooltip-size * 2};
      display: block;
      width: 0;
      height: 0;
      border-top: $tooltip-size solid transparent;
      border-right: 10px solid transparent;
      border-bottom: $tooltip-size solid transparent;
      border-left: 10px solid transparent;
      content: '';
    }

    &::before {
      border-bottom-color: $border;
    }

    &::after {
      top: -#{$tooltip-size * 2 - 2px};
      border-bottom-color: $white;
    }
  }
}

위에서 설명한 것처럼 ::before 에는 border-bottom-color 를 기존의 컨테이너와 동일한 border 색상으로 주었으며, ::after 에는 border-bottom-color 을 하얀색으로 주었다.

이제 우리의 뾰족이를 확인해보도록 하자.

드디어 우리의 툴팁 뾰족이가 원하는 디자인 대로 나오는 것을 확인할 수 있다.
뾰족이의 주변에도 안정적으로 border가 원하는 색상으로 잘 나오고 있으면서도 아주 이쁘게 잘 만들어진 것을 확인할 수 있다.

JS 연산 & 조건 / 객체 / DOM API
#53. REST API & GraphQL

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage