CSS로 사각형 요소를 원형으로 바꾸기

[ CSS 목차 보기 ]

이번 포스트에서는 CSS만을 이용하여 HTML 요소를 원 형태로 바꾸는 방법을 알아보겠습니다.^{[참고2. 요소의 개념]} 모든 요소들은 기본적으로 네모 형태를 가지는데, 이러한 네모 형태의 모서리는 border-radius: 50%를 이용하면 둥글게 처리할 수 있습니다. 또한 width와 height를 다르게 설정하면 타원 형태가 될 수도 있고, 이러한 원형 형태의 요소를 프레임으로 사용하여 정말 다양한 곳에 응용을 할 수 있습니다.

[1] CSS만으로 원 만들기

예제 목표

사각형 형태의 요소를 원 형태로 바꾸는 것에 대해 알아봅니다. 여기서는 div 요소를 이용하여 원을 그리지만, 다른 요소들도 똑같은 방법으로 원 형태로 바꿀 수 있습니다.

전체 코드

먼저 전체 코드와 그 결과를 보겠습니다.

코드 설명

코드에 대한 설명은 아래 카드를 넘기면서 단계적으로 볼 수 있습니다.

• 구현 목표
  • 래퍼와 원이 될 div를 만들어 보겠습니다.
• <div class=”wrapper”>
  • 예제를 둘러쌀 래퍼에 해당합니다. 래퍼를 만드는 이유는 [참고3. 래퍼 개념과 기본설정] 포스트에 자세히 나와 있으니, 참고하시면 되겠습니다.
• <div class=”circle”>
  • 원이 될 div에 해당합니다.
• 구현 결과
  • 아직은 CSS를 넣지 않았기 때문에 아무런 출력물이 없습니다.

• 구현 목표
  • div.circle의 테두리선을 최종적으로 원으로 바꿀 것인데, 지금 단계에서는 사각형을 만들어 보겠습니다.
• .circle의 CSS [참고1. 클래스 선택자]
  • 여백 관련 설정
    • margin: 0 auto; margin의 위/아래를 0으로 설정하고, 좌우를 auto로 설정합니다. 좌우를 auto로 설정하면, 좌우 여백의 크기를 같게 하라는 의미입니다. 즉, 이렇게 함으로써 수평 가운데 정렬할 수 있습니다. 자주 쓰는 패턴이니 기억해 두면 좋겠습니다.
  • 크기 관련 설정
    • width: 100px; height: 100px; 테두리의 크기를 100x100px로 설정하기 위해 width와 height을 100px로 넣겠습니다. 이는 나중에 원으로 가로와 세로의 크기와 같습니다.
  • 테두리선 관련 설정
    • border: 15px solid rgb(163, 151, 198); 테두리선을 15px 실선, 그리고 색깔을 보라색으로 설정하겠습니다.
• .wrapper의 CSS [참고1. 클래스 선택자]
  • 래퍼의 기본적인 프로퍼티를 설정합니다. 이렇게 설정하는 이유는 [참고3. 래퍼 개념과 기본설정] 포스트에 자세히 설명해져 있습니다.

• 구현 목표
  • 앞에서 만든 사각형 테두리를 드디어 원형으로 바꿔보겠습니다.
• .circle의 CSS [참고1. 클래스 선택자]
  • 테두리선 관련 설정
    • border-radius: 50%; 테두리선의 모서리를 둥글게 처리할 때 border-radius를 사용합니다. 만약 곡률값을 width와 height의 50%로 넣어주면, 완벽한 원을 만들 수 있습니다.
• 구현 결과
  • 사각형 형태였던 div.circle이 완벽한 원이 되었습니다.

[2] 응용

[2.1] 스피너

• 스피너 또는 로더
  웹사이트에서 페이지를 로딩할 때, 로딩되서 페이지가 나올 때까지 “로딩 중”이라는 것을 알리는 것을 스피너(Spinner) 또는 로더(Loader)라고 부릅니다. 한쪽 border만 색깔을 다르게 하여, 원을 회전시키면 간단한 스피너를 구현 할 수도 있습니다.^{[참고4. 회전하는 원 스피너]}

[2.2] 원 문자

• 원 문자 / 원 테두리 문자
  원 문자란, 글자 주위에 원형의 테두리를 가지고 있는 것을 말합니다. 글자들마다 원형 테두리를 그리면, 원 문자를 구현 할 수 있습니다.^{[참고5. CSS로 원 문자 만들기]} 제목과 같이 강조하고 싶은 글자들은 이렇게 만들 수 있겠습니다.

[2.3] SNS 아이콘

• 원 형태의 아이콘
  원을 그릴 수 있다면, 원 형태의 아이콘 또는 버튼을 만들 수 있습니다. 대표적인 예로, 원 형태의 SNS 버튼을 많이들 보셨을 것입니다. Font Awesome의 글자체를 CDN으로 받고, 원형의 요소에 넣기만 하면 아래와 같은 예쁜 SNS 아이콘을 쉽게 만들 수 있습니다.^{[참고6. SNS 아이콘 쉽게 만들기]}

[3] CSS로 만들 수 있는 다른 도형

클릭하시면 관련 포스트를 볼 수 있습니다.

참고
[1] 클래스 선택자
[2] 요소란?
[3] 래퍼 개념과 기본 설정
[4] 회전하는 원 스피너
[5] CSS로 원 문자 만들기
[6] SNS 아이콘 쉽게 만들기
[ CSS 목차 보기 ]