원안 에 텍스트 넣 기 - 신현석 ( Hyeonseok Shin ) 
 원안 에 텍스트 넣 기 
 H 3 2012 메인 페이지 에 는 글자 가 원안 에 들어가 는 독특 한 디자인 이 사용 되 었 다 . CSS 에 는 원 으로 글자 를 배치 시키 는 기능 은 없 기 때문 에 고민 이 되 는 부분 이 었 다 . 가장 간단 하 게 는 텍스트 를 모두 가운데 정렬 한 다음 에 모양 에 많 게 줄 바 꿈 을 해 주 면 구현 이 가능 하 다 . 하지만 세션 의 제목 이 나중 에 변경 될 수 도 있 다는 얘기 를 듣 고 이런 노가다 성 해결책 말 고 다른 방법 을 찾아보 기 로 하 였 다 . 
 모양 이나 사진 의 외곽 선 을 따라서 글자 가 배치 되 는 디자인 은 잡지책 에서 도 쉽 게 볼 수 있 다 . 문제 는 HTML 요소 는 모두 사각형 으로 그려지 기 때문 에 이러 한 모양 정보 를 넣 을 수 없 다는데 있 다 . 하지만 점 이 만나 서 선 이 되 듯이 테이블 태그 로 그림 그리 듯이 . .. 는 아니 고 박스 의 크기 를 잘 조절 하 면 성능 과 모양 사이 에서 적절 한 타협점 이 있 을 수 있 다는 생각 이 들 었 다 . 텍스트 배치 는 노멀 플로우 ( normal flow ) 에 영향 을 미치 는 플롯 ( float ) 을 사용 하 면 되 겠 다는 생각 을 하 고 손 으로 값 을 계산 에서 테스트 를 해 봤 다 . 
 아이디어 는 간단 하 다 . 텍스트 가 들어가 야 할 원 을 빼 고 는 나머지 공간 을 플롯 된 박스 로 채우 는 것 이 다 . 그러면 텍스트 는 자연 스럽 게 원 안 에 배치 될 것 이 다 . 박스 를 번갈 아서 왼쪽 , 오른쪽 으로 배치 하 면서 박스 길이 만 적절 하 게 조절 하 면 원 모양 을 그리 는 것 이 가능 했 고 텍스트 도 잘 배치 가 됐 다 . 브라우저 호환 성 도 IE 8 이상 은 합격 이 었 다 . 처음 에 는 IE 8 이상 에서 만 정상 적 으로 보였 는데 지금 은 호환 성 에 문제 있 는 부분 들 을 수정 해서 여기 서 제공 하 고 있 는 코드 는 IE 6 이상 에서 잘 작동 하 는 것 을 확인 하 였 다 . 
 너비 를 구했 으니 이제 적절 한 간격 으로 y 에 해당 하 는 박스 를 왼쪽 , 오른쪽 으로 번갈 아서 넣 어 주 면 된다 . 전체 코드 는 아래 와 같 다 . 
 < title > 원안 에 텍스트 넣 기 </ title > 
 후렴 : 무궁화 삼천리 화려 강산 
 가을 하늘 공활 한 데 높 고 구름 없이 . 
 밝 은 달 은 우리 가슴 일편 단심 일세 . 
 대한 사람 대한 으로 길 이 보전 하세 </ div > 
 아래 와 같이 랜더 링 된다 . 녹색 으로 칠 해진 div 색 을 없애 면 원 하 는 대로 원 모양 으로 텍스트 가 배치 된 것 을 볼 수 있 다 . 
 이 글 은 kth 개발자 블로그 에 실린 글 입니다 . 
 윤정근 2012 - 11 - 08 08 : 11 
 ㅡ . ㅡ 아 쒸 . 위 에서부터 차근차근 읽 고 있 었 는데 . ..... 싸인 , 코 싸인 에서 포기 . ... 배신 당한 느낌 . ㅋㅋ 
 rootbox 2012 - 11 - 08 11 : 11 
 누 가 . . 사칙 연산 만 알 면 사 는데 지장 없 다 했 는가 . . ㅠ 
 아 , .,,, 2013 - 01 - 16 16 : 01 
 수능 때 삼각함수 완전 포기 하 고 봤 는데 캔버스 도 그렇 고 큰일 났 다 . .. ㅠㅠ