---

CSS 원 문자

[ CSS 목차 보기 ]

CSS만으로 원 문자를 구현할 수 있다. 먼저 요소^{[참고1. 요소, 노드 태그 개념]}를 이용하여 원을 그릴 수만 있으면, 원 문자를 쉽게 만들 수 있다.^{[참고2. CSS만으로 원 그리기]}

[1] 한 글자 원 테두리 만들기

[1.1] 기본 구현

• 예제 목표
  원형의 테두리를 만들기 앞서서, 글자와 네모테두리를 그린다.

• HTML
  <div id=”wrapper”></div> <!– 예제 코드를 둘러싸고 있는 기본 래퍼이다.^{[참고3. 래퍼 개념과 기본 설정]} –>
  <div class=”circle”>원</div> <!– 글자를 포함하고 있는 div 요소를 만든다. 이 div가 원형의 테두리가 되는 것이다. 이 테두리를 CSS에서 선택하기 위해 클래스를 circle로 설정해 주었다. –>
• .circle의 CSS^{[참고4. 클래스 선택자]}
  font-size: 3em; // 내용물의 글자 크기를 3em으로 설정한다.
  color: rgb(56, 150, 128); // 내용물의 글자 색깔을 지정한다.
  border: 2px solid rgb(56, 150, 128); // 테두리선을 표시한다.
• #wrapper의 CSS
  display: flex; // 자식 요소 div.circle을 정렬을 하기 위해 flex 지정을 한다.
  justify-content: center; // 자식 요소 div.circle을 가운데 정렬을 지정한다.
  그 외의 부분은 래퍼의 기본 설정에 해당한다.^{[참고3. 래퍼 개념과 기본 설정]}
• 구현 결과
  div.circle의 테두리선을 원형을 아직 설정하지 않았기 때문에 “원” 글자를 둘러싼 네모가 표시된다. 재미있는 점은 div.cicle은 display: block 속성을 기본적으로 가지고 있어서 한 줄 전체를 채운 네모가 되어야 하는데 내용물을 둘러싼 크기의 네모가 생성되었다는 점이다. 이는 부모 요소 div.wrapper의 display 프로퍼티를 flex로 설정함으로써 크기 속성이 바뀌기 때문이다.

[1.2] 원 테두리 만들기

• 예제 목표
  위에서 네모 테두리로 설정된 div.circle을 원 형태로 바꾸고, 글자들을 원의 가운데에 정렬하는 방법과 원의 크기를 설정한다.

[1.2.1] 원 그리기

• 예제 목표
  div.circle을 원 형태로 단순히 바꾸고, “원” 글자를 가운데 정렬한다. 추가적인 원 크기 설정은 다음 섹션에서 다룬다.

• HTML
  위의 예제와 동일하다.
• .circle의 CSS
  border-radius: 50%; // 테두리 모서리의 곡률을 50%로 지정함으로써 원을 만든다.^{[참고5. CSS만으로 원 그리기]}
  display: flex; // 자식 요소인 “원” 글자를 정렬하기 위해 flex로 설정한다.
  justify-content: center; // 수평 가운데 정렬하기 위해 center로 설정한다.
  align-items: center; // 수직 가운데 정렬하기 위해 center로 설정한다.
• 구현 결과
  .circle의 CSS에서 border-radius: 50%으로 설정하였기 때문에 네모였던 div.circle이 원으로 변하였다. 하지만 아직 크기 설정을 하지 않아서 타원 형태로 표시 된다. 그리고 .circle의 flex설정으로 수평, 수직 가운데 설정을 해서 “원”이라는 글자가 타원 테두리의 중간에 위치하다. 글자체마다 줄에 위치하는 지점이 달라서, 타원의 수직 가운데에 위치 안 한것처럼 보일 수 있다.

[1.2.2] 원 크기 설정

• 예제 목표
  원 테두리를 글자의 크기에 맞게 설정한다. 크기는 크기 속성인 width와 height로 하면 되는데, 글자를 원 안에 맞게 하기 위해서는 약간의 계산이 필요하다.
• 크기 계산
  Figure 1에 나타나 있듯이, “원” 글자가 들어가 있는 줄의 높이가 1em이다. 이를 이용해서 글자를 둘러싼 원의 지름 2r은 1em / 0.71 임을 계산할 수 있다. 삼각함수를 잘 모를지라도, 결론적으로 1em을 0.71로 나눠주면 원하는 원의 크기를 만들 수 있다는 것만 기억하면 된다.

• HTML
  위의 예제랑 동일하다.
• .circle의 CSS
  width: calc(1em / 0.7); // 산수 계산을 하기 위해 calc함수를 사용하였다. calc 함수를 사용할 땐, 띄어쓰기에 유의해야 한다. 1em과 / 사이에는 띄어쓰기가 들어가고, /와 0.7사이에도 띄어쓰기가 들어간다. 여기선 그냥 0.7로 나눠졌는데, 위에서 계산한것 처럼 더 정확히는 0.71로 나눠줘야 한다.
  height: calc(1em / 0.7); // 높이를 설정한다. calc의 띄어쓰기에 유의한다.

• 구현 결과
  최종 구현결과로 “원”이라는 글자를 완벽하게 둘러싼 원 테두리를 만들었다.

[2] 여러글자 원 테두리 만들기

• 예제 목표
  클래스 선택자를 이용하여, 여러 글자들에 원 테두리를 형성한다. 그리고 flex를 사용할 때 주의할 점에 대해서 알아본다.

• HTML
  위의 섹션 [1]에서 구현한 예제와 동일하다. 원하는 글자들 <div class=”circle”></div>로 둘러싸주면 된다.
• #wrapper의 CSS
  flex-shrink: 0; 화면이 원형 글자들보다 좁아지면 원형 테두리가 찌그러지기 시작하는데, 그 이유는 flex로 설정되어 있고 flex-shrink의 기본값이 1로 되어져 있기 때문이다. 이것을 방지하기 위해서 flex-shrink를 0으로 설정한다.
• 구현 결과
  여러 글자들에 원 테두리가 생성되었다. 섹션 [1]에서 알아본 내용들과 동일하므로 특별히 설명할 부분은 없다.

[3] 그림자 효과 넣기

• 예제 목표
  만들어진 원 문자에 그림자 효과를 넣어서 더욱 정교하게 만들 수 있다.
• HTML
  위의 [2.1] 예제와 동일하다.
• .circle의 CSS
  box-shadow: 2px 2px 5px rgb(193, 193, 193); // 그림자 효과를 가로, 세로방향 2px 씩 주고, blur를 5px로 설정한다. 그리고 색깔을 회색계통을 설정해주었다.

참고
[1] 요소, 노드 태그 개념
[2] CSS만으로 원 그리기
[3] 래퍼란?
[4] 클래스 선택자
[5] CSS만으로 원 그리기
[ CSS 목차 보기 ]