[CSS] CSS로 삼각형, 꺽쇠(체크박스), 화살표, 스피너, 햄버거 메뉴 그리기

개요

작업하다 보면 아이콘으로 버튼, 로딩, 메뉴 등을 표현해야 하는 경우가 있다.

예전에는 대부분 포토샵 또는 이미지 파일로 backgroud-image 속성 또는 img 태그를 이용해 작업을 했다.

하지만 CSS 스킬이 발전함에 따라 CSS로 대체 가능한 아이콘들이 생겼다.

CSS로 대체하면 image를 로딩해야 하는 리소스, 용량 등에 대한 부담이 줄어들어 퍼포먼스 향상에 도움이 된다.

작업하면서 필요한 아이콘 5개 추려서 정리해봤다.

CSS로 도형 그리기

삼각형 만들기

CSS로 삼각형 이미지

<h2>삼각형 만들기</h2>
<div class="triangle triangle--top"></div>
<div class="triangle triangle--left"></div>
<div class="triangle triangle--right"></div>
<div class="triangle triangle--bottom"></div>

<style>
.triangle {
  display: inline-block;
  border: 40px solid transparent;
}
.triangle--left {
  border-left-color: red;
}
.triangle--right {
  border-right-color: red;
}
.triangle--top {
  border-top-color: red;
}
.triangle--bottom {
  border-bottom-color: red;
} 
</style>

코드를 보면 border 관련 속성들만 사용해서 만들었다.

40px보더를 적용하고 색상은 모두 투명으로 적용했다.

그다음 원하는 화살표 방향에만 red 색상을 적용해 화살표를 만들었다.

꺽쇠 만들기

CSS로 꺽쇠만들기(체크박스 인풋)

<h2>꺽쇠 만들기</h2>
<div class="check-icon"></div>
<div class="check-icon check-icon--apply-border"></div>
<div class="check-icon check-icon--apply-rotate"></div>
<div class="check-icon check-icon--apply-origin"></div>

<style>
.check-icon {
  width: 16px;
  height: 8px;
  border: 2px solid red;
  margin-bottom: 4px;
}
.check-icon--apply-border {
  border: 2px solid red;
  border-top: 0;
  border-right: 0;
}
.check-icon--apply-rotate {
  border: 2px solid red;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}
.check-icon--apply-origin {
  border: 2px solid red;
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
  transform-origin: 25% 25%;
}
</style>

이미지를 보면 총 4개의 아이콘을 순차적으로 보인다.

꺽쇠가 만드는 과정을 보여준다.

처음에는 직사각형을 만들고 border를 적용한다.(.check-icon)

그다음 border-top, border-right의 width값을 0으로 만들어 사용하지 않게 한다.(.check-icon--apply-border) 이렇게 하면 ㄴ 모양으로 보이게 된다.

이제 꺽쇠를 만들기 위해 rotate를 적용한다.(.check-icon--apply-rotate)

마지막으로 transform-origin를 추가해 rotate시에 기준점을 정한다.

transform-origin: 50% 50%

transform-origin: 25% 25%

화살표 만들기

CSS로 화살표 만들기

<h2>화살표 만들기<h2>
<div class="arrow"></div>
<div class="arrow arrow--left"></div>
<div class="arrow arrow--right"></div>
<div class="arrow arrow--top"></div>
<div class="arrow arrow--bottom"></div>

<style>
.arrow {
  width: 32px;
  height: 32px;
  position: relative;
  margin-bottom: 30px;
}
.arrow::before, .arrow::after {
  content: '';
  position: absolute;
}
.arrow::before {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  border-right: 0;
  border-bottom: 0;
}
.arrow::after {
  width: 48px;
  height: 1px;
  background: red;
  transform-origin: 0 100%;
  transform: rotate(45deg);
}
.arrow--left {
  transform: rotate(-45deg);
}
.arrow--right {
  transform: rotate(135deg);
}
.arrow--top {
  transform: rotate(45deg);
}
.arrow--bottom {
  transform: rotate(225deg);
}
</style>

화살표 만드는 방법은 정사각형을 만들고 보더를 가상선택자(::before) 적용 후 대각선 선(::after)을 만들어주면 된다. 코드를 보면서 살펴보자.

우선 .arrow 요소에 32px; 정사각형을 만들고 가상선택자 ::before를 사용해 border 속성을 만들고 왼쪽, 오른쪽을 0으로 border를 사용하지 않게 한다.

그다음, ::after 속성에 대각선을 만든다.

그 다음, 방향에 맞게 rotate를 수정하면 된다.

스피너 만들기

CSS로 스피너 만들기

<h2>스피너 만들기</h2>
<div class="spinner"></div>

<style>
.spinner {
  width: 40px;
  height: 40px;
  display: inline-block;
  border: 8px solid silver;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg) }
}
</style>

데이터 로딩할 때 로딩 시간에 빈 화면을 보여주면 사용자 입장에서 혼란을 야기할 수 있다.

이때 로딩 표시 스피너를 보여줘서 현재 동작중인 상태를 명시적으로 알려준다.

gif로 받아서 작업을 했지만 이제 CSS로 만들어보자.

우선, 정사각형을 만든 다음 border-radius: 50%를 줘서 동그라미 형태로 만든다.

border-top-color: transparent; 속성을 사용해 위에만 투명색으로 변경한다. 그럼 이미지와 같이 한 곳만 저렇게 투명색으로 된다.

마지막으로 animation을 사용해 360도 회전을 계속하게 한다.

햄버거 메뉴 만들기

CSS로 햄버거 메뉴 만들기

<h2>햄버거 메뉴 만들기</h2>
<div class="ham"></div>

<style>
.ham {
  width: 24px;
  height: 4px;
  background: black;
  box-shadow: 0 8px 0 black, 0 16px 0 black;
}
</style>

box-shadow를 활용한 햄버거 메뉴 만들기 코드이다.

첫 번째 줄은 width, height, background로 만들고, 두 번째, 세 번째 줄은 box-shadow를 활용해 만들었다.

 

box-shadow 속성 값은 아래 참고

/* offset-x | offset-y | blur-radius | color */

box-shadow: 10px 5px 5px black;

결론

시간적 여유가 되면 이미지 아이콘을 사용했던 코드를 CSS 코드로 변경하면 좋을 것 같다. 웹 성능이 먼저라면 디자이너와 잘 협의해서 CSS로 작업 가능하게 하는 것도 좋을 것 같다.

 

예제 링크

https://codepen.io/DUCKHEE/pen/powKqaw