CSS만으로 X 버튼 만드는 두가지 방법

 

디자이너에게 전달받은 디자인을 GUI 작업을 할 때 많이 사용되는 부분 중 하나가 X(닫기) 버튼입니다. 

이걸 모두 이미지로 관리하자니 모양이나 크기만 조금 다를 뿐인데 리소스 관리적인 부분에서 상당히 비효율적인 부분이 발생하게 됩니다. 

 

이때 X(닫기) 버튼을 이미지가 아닌 CSS로 만들어서 관리하면 이슈 대응도 편리하고 리소스적인 부분도 중복되지 않아서 효율적입니다. 

 

CSS로 X 버튼을 만드는 방법입니다. 

 

첫 번째 방법 :  content: "\00d7"를 활용

가상 선택자(before, after)에 content: "\00d7"; 만 추가해주면 아주 간단하게 X 버튼이 만들어 집니다. 크기는 font-size로 조정하면 되고 크기를 키울수록 굵기가 자동으로 굵어집니다.

다만 이 방법은 굵기의 세밀함을 조정하기가 쉽지 않고 기본 폰트의 영향도를 받습니다. 

.btn__close {display:inline-block;} 
.btn__close:after {display: inline-block; content: "\00d7"; font-size:14px;}

 

두 번째 방법 : transform: rotate(45 deg)를 활용

디자이너의 의도를 정확하게 반영할 수 있어서 첫번째 방법보다 이 방법을 추천합니다. 가상 요소에 개별의 막대를 만드로 해당 막대를 기울이고 교차하여 X 모양을 만드는 방법입니다. 

이 방법은 굵기 및 크기(길이)를 조절(width:1px)할 수 있는 장점이 있습니다. 또한 각각 막대를 사용해서 만들기 때문에 햄버거 메뉴나 클릭 시 모션을 넣어야 하는 경우 유용하게 사용이 가능합니다.

.btn__close {position:relative; padding-right:15px;} 
.btn__close:before, .btn__close:after {position: absolute; right:7px; top:6px; content:''; height: 8px; width:1px; background-color: #222;} 
.btn__close:before {transform: rotate(45deg);} 
.btn__close:after {transform: rotate(-45deg);}

 

 

 

스타일은 GUI에 맞게 커스텀하여 사용하시면 됩니다. 

감사합니다.

 

 

출처 : https://hongpage.kr/51