안내 · 서식
정렬·폰트·도형 서식
무언가를 고르면 오른쪽에 서식 패널이 열려요. 고른 것에 맞는 칸만 보여서, 처음 봐도 어렵지 않아요.
1. 정렬과 간격
패널 맨 위의 정렬에는 버튼이 여섯 개 있어요. 왼쪽부터 왼쪽 맞춤, 가로 가운데, 오른쪽 맞춤, 위쪽 맞춤, 세로 가운데, 아래쪽 맞춤이에요. 버튼에 마우스를 올리면 이름이 보여요.
무엇을 기준으로 맞추나요
| 고른 개수 | 기준 | 예 |
|---|---|---|
| 2개 이상 | 고른 것끼리 | 카드 세 개의 윗선을 맞추기 |
| 1개 | 감싸는 상자 | 카드 안 제목을 카드 가운데로 보내기 |
하나만 골라서 맞출 때 기준이 되는 "감싸는 상자"는 배경색이나 테두리, 그림자가 있는 가장 가까운 바깥 상자예요. 그런 상자가 없으면 페이지 전체가 기준이 돼요. 정렬 버튼을 누르면 기준 상자가 잠깐 점선으로 표시되니 확인해 보세요.
간격 똑같이
세 개 이상을 골랐을 때 가로 간격 똑같이, 세로 간격 똑같이 버튼이 켜져요. 양 끝의 두 개는 그대로 두고, 그 사이에 있는 것들의 간격을 고르게 맞춰요.
2. 무료 한글 폰트 14종
글자가 들어 있는 것을 고르면 글자 칸이 열리고, 맨 위 목록에서 폰트를 바꿀 수 있어요. 목록의 폰트는 모두 구글 폰트에서 무료로 제공하고 상업적으로도 쓸 수 있는 폰트예요(SIL Open Font License).
| 폰트 | 느낌 | 잘 어울리는 곳 |
|---|---|---|
| 본고딕 | 깔끔하고 반듯한 고딕 | 본문, 표, 보고서 |
| 본명조 | 단정한 명조 | 제목, 인용문 |
| 나눔고딕 | 익숙하고 편안한 고딕 | 본문 |
| 나눔명조 | 부드러운 명조 | 긴 글, 소개문 |
| 나눔펜 | 펜으로 쓴 손글씨 | 메모, 포인트 문구 |
| 고운돋움 | 둥글고 다정한 고딕 | 안내문, 친근한 자료 |
| 고운바탕 | 붓맛이 나는 바탕 | 표지 제목, 감성적인 문구 |
| IBM Plex Sans KR | 단단한 기술 문서 느낌 | IT·데이터 자료 |
| 고딕 A1 | 또렷한 고딕 | 숫자가 많은 자료 |
| 함렡 | 현대적인 명조 | 세련된 제목 |
| 도현 | 굵고 힘 있는 제목체 | 큰 제목, 포스터 |
| 주아 | 동글동글 귀여운 제목체 | 행사, 아이들 대상 자료 |
| 검은고딕 | 아주 굵은 제목체 | 강조 한 줄 |
| 개구 | 장난스러운 손글씨 | 가벼운 공지, 이벤트 |
폰트를 바꾸고 HTML로 저장하면, 파일 안에 구글 폰트를 불러오는 줄이 함께 들어가요. 그래서 저장한 HTML을 열 때 인터넷이 연결되어 있어야 그 폰트로 보여요. 이미지(PNG)나 PDF로 저장하면 인터넷 없이도 그대로 보여요.
3. 글자 서식
- 크기: 숫자를 바꾸면 바로 적용돼요(px 단위).
- 굵게·기울임·밑줄: B, I, U 버튼을 눌러 켜고 꺼요. 일부 폰트는 굵은 글씨가 따로 없어서 굵게가 잘 티 나지 않을 수 있어요.
- 글자색: 색 동그라미를 누르거나, 색 상자를 눌러 원하는 색을 고르거나, 💧 스포이드로 화면의 색을 찍어요.
- 문단 정렬: 왼쪽·가운데·오른쪽 정렬 버튼이에요. 상자 안에서 글자가 놓이는 방향을 바꿔요.
- 줄 간격·자간: 줄 간격은 글자 크기의 배수(예: 1.6), 자간은 px 단위예요.
4. 상자 서식
카드, 버튼, 문단처럼 HTML 요소를 고르면 상자 칸이 보여요.
- 채우기: 배경색을 바꿔요. 없음을 누르면 투명해져요.
- 테두리: 색, 종류(실선·파선·점선·없음), 두께(0~12px)를 바꿔요. 테두리가 없던 상자도 두께를 올리면 실선 테두리가 생겨요.
- 모서리: 각진·둥근·알약·원 버튼으로 한 번에 바꾸고, 아래 슬라이더로 세밀하게 조절해요.
- 그림자: 없음·약하게·강하게 중에서 골라요.
5. SVG 도형 서식
아이콘이나 도표 안의 동그라미, 네모, 선 같은 SVG 도형을 클릭하면 그 도형 하나가 골라지고 SVG 도형 칸이 보여요.
- 채우기: 도형 안쪽 색. 없음을 누르면 속이 빈 도형이 돼요.
- 선: 테두리 색과 종류(실선·파선·점선).
- 두께: 선 두께를 0~20px 사이에서 조절해요.
도형의 모양 자체(네모를 별로 바꾸기 등)는 아직 바꿀 수 없어요.