CSS 가상 요소를 활용해 삼각형 화살표 만들기

CSS 테두리 선으로 삼각형 화살표 만들기 내용을 먼저 읽고 보면 이해가 쉽습니다.

-> 테두리 선으로 삼각형 화살표 만들기

블록 요소의 테두리 선을 활용해 삼각형을 만들면, 만든 삼각형을 원하는 블록 요소 안에 넣은 후 위치를 잡는 배치 작업을 해야합니다.

원하는 위치를 잡는 과정은 마진(margin)과 "left", "top" 속성 등을 활용해 어렵지 않게 붙일 수 있지만, HTML에 태그가 추가되고, 위치를 잡는데 필요한 CSS를 더 작성해서 관리를 해야 합니다.

가상 요소(Pseudo Element) 를 활용하면 별도의 태그 추가 없이도 삼각형을 부착하고 싶은 대상에 바로 붙일 수 있기 때문에 여러가지 번거로운 작업을 줄일 수 있습니다.

가상 요소를 활용해 삼각형 화살표를 만드는 원리는 다음과 같습니다.

가상 요소로 위쪽 삼각형 화살표를 하나 만들어보겠습니다.

가상 요소를 부착할 태그를 하나 정의합니다. 가상 요소를 생성할 클래스 명은 "arrow-up" 으로 사용합니다.

<div class="arrow-up"></div>

"arrow-up" 클래스의 가상 요소 ":after" 를 정의합니다.

위치 속성이 절대 좌표("position: absolute;") 로 정의되기 때문에 가상 요소를 부착하는 요소의 왼쪽 위 모서리 부분에 화살표가 위치하게 됩니다.(이때 부착하는 요소의 위치 속성은 "relative" 여야 합니다.

.arrow-up:after{
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    border: 20px solid transparent;
    border-top-width: 0;
    border-bottom-color: purple;	
}

클래스에 테두리 속성이 "border-width", "border-top-width" 2개가 정의되어 있는데, 실수가 아니라 의도적으로 이렇게 한 것입니다.

CSS는 먼저 정의된 같은 속성을 오버라이드(덮어씀) 하는데, 앞의 테두리는 4면의 테두리를 모두 정의한 것이고, "border-top-width" 속성은 상단 테두리만을 재정의해서 오버라이드 하는 것입니다.

아래 부분에서 이 부분만을 따로 떼어내서 CSS 최적화를 다시 하게 됩니다.

이렇게 만든 화살표는 40x20px 크기로 만들어집니다.

만든 위쪽 화살표 CSS 를 4방향 화살표로 최적화해서 범용으로 사용할 수 있도록 다음처럼 작성을 합니다.

이렇게 작성한 화살표 CSS는 "arrow arrow-up" 과 같은 형식으로 화살표를 부착할 대상 요소에 클래스를 추가하는 것만으로 간편하게 사용할 수 있게 됩니다.

.arrow:after{
    content: ' ';
    height: 0;
    width: 0;
    position: absolute;
    border: 20px solid transparent;
}
.arrow-up:after{
    border-top-width: 0;
    border-bottom-color: purple;
}
.arrow-down:after{
    border-bottom-width: 0;
    border-top-color: purple;
}
.arrow-right:after{
    border-right-width: 0;
    border-left-color: purple;
}
.arrow-left:after{
    border-left-width: 0;
    border-right-color: purple;
}

삼각형의 크기 조절은 ".arrow:after" 가상 요소의 "border-width" 속성 값으로 할 수 있습니다.