제목·소제목·텍스트 요소 넣고 고치기

페이지에 큼직한 제목을 넣고, 그 아래에 소제목과 설명 글을 붙이는 일은 에디터에서 가장 자주 하는 작업입니다. 이 글에서는 제목, 소제목, 텍스트 요소를 넣는 방법과 이미 있는 글자를 고치는 방법, 글자를 누르면 나타나는 텍스트 편집 창의 항목, 그리고 제목과 일반 텍스트가 어떻게 다른지를 화면에서 확인한 대로 정리합니다. 요소 패널 전반과 미니툴바, 속성 패널의 구조는 별도 글에서 다룹니다.

1. 제목·소제목·텍스트 넣기

왼쪽 레일의 + 아이콘(요소 추가)으로 요소 패널을 열면 텍스트 카테고리에 제목, 소제목, 텍스트, 리스트, 인용구가 있습니다. 이 가운데 제목, 소제목, 텍스트를 누르면 "제목 추가", "소제목 추가", "텍스트 추가" 창이 열립니다. 글을 입력하면 아래 미리보기에 바로 보이고, 삽입을 누르면 페이지에 들어갑니다. 텍스트는 여러 줄을 입력할 수 있고, 입력한 줄바꿈이 그대로 줄바꿈으로 들어갑니다. 입력칸에는 "새 제목을 입력하세요"처럼 안내 문구가 미리 채워져 있으니 지우고 적으시면 됩니다.

섹션을 선택해 둔 채 삽입하면 그 섹션의 맨 아래에 들어갔습니다. 세 요소는 처음 들어갈 때 모양이 서로 다릅니다.

• 제목: 28px 굵은 글씨, 가운데 정렬로 들어갑니다. 화면에서 확인한 태그는 <h2>입니다.
• 소제목: 20px 굵은 글씨, 왼쪽 정렬이며 태그는 <h3>였습니다.
• 텍스트: 16px, 행간 1.7의 본문이며 태그는 <p>였습니다.

2. 글자를 직접 고치기

캔버스의 글자를 눌러 바로 고칠 수 있습니다. 확인한 동작은 다음과 같습니다.

• 아무것도 선택하지 않은 상태에서 글자를 한 번 누르면 곧바로 편집이 시작되었습니다.
• 섹션이 이미 선택된 상태에서는 첫 번째 클릭이 요소를 고르고, 요소 옆에 툴바가 나타났습니다. 이때 같은 글자를 한 번 더 누르거나 더블클릭하면 편집이 시작되었습니다. 툴바의 텍스트·폰트 편집(T 모양) 버튼으로도 시작할 수 있습니다.
• 편집 중에는 요소 위에 텍스트 편집 창이 뜹니다.
• Esc 키, 요소 바깥 클릭, 창 오른쪽 위의 편집 종료(×)로 편집을 끝냅니다.

글 중간에서 Enter를 누르면 줄이 바뀌었고, Shift+Enter도 줄바꿈이 되었습니다. 다만 글 맨 끝에서 Enter만 누르면 눈에 보이는 새 줄이 생기지 않아서 Shift+Enter를 썼습니다.

3. 텍스트 편집 창의 항목

아래 번호는 그림의 번호와 같습니다.

1. 태그 선택: <p>, <h1>~<h4>, <span>, <li>, <button> 중에서 고릅니다.
2. 글꼴: 기본값은 "기본 (글로벌 폰트)"이고, 고딕, 명조, 디스플레이/제목, 손글씨/캘리, 영문 묶음의 글꼴이 목록에 있습니다.
3. 크기: px 단위로 직접 입력합니다.
4. 굵기: 가는, 보통, 중간, 굵음, 최굵 중에서 고릅니다.
5. 정렬: 왼쪽, 가운데, 오른쪽.
6. 굵게, 기울임, 밑줄, 취소선: B, I, U, S 버튼입니다.
7. 행간: 줄 사이 간격 숫자를 입력합니다.
8. 색상: 색상 칸을 누르면 색상 선택기가 열립니다.
9. 그라데이션: 7가지 색 조합 버튼입니다. "텍스트 선택 시"라고 적혀 있고, 글자를 선택하지 않으면 흐리게 표시됩니다.
10. 색상 제거: 적용한 색을 지웁니다.
11. 링크: 선택한 글자에 주소를 걸고, 새 탭 여부를 고른 뒤 적용합니다.

글자를 드래그로 선택한 뒤 버튼을 누르면 선택한 부분에만 적용되고, 선택이 없으면 요소 전체에 적용되었습니다. 예를 들어 "친절해서"만 선택해 그라데이션을 누르자 그 단어만 색이 바뀌었고, 크기와 가운데 정렬은 문단 전체에 적용되었습니다.

4. 제목과 일반 텍스트는 무엇이 다를까요

태그 선택에서 <p>를 <h4>로 바꿔 보았습니다. 글자 크기는 22px 그대로 유지되었으니, 태그를 바꾼다고 모양이 저절로 바뀌지는 않고 크기와 굵기는 따로 정해야 합니다. 달라진 점은 속성 패널입니다. 속성 패널 머리에는 <h2>와 <h4>가 제목으로, <p>가 텍스트로 표시되었습니다. 스타일 탭의 타이포그래피에서 제목에는 폰트 두께가, 텍스트에는 줄 간격이 나옵니다. 나머지(폰트 크기, 텍스트 색상, 텍스트 정렬, 텍스트 스타일, 자간, 그림자와 글로우)는 두 종류가 같았습니다.

5. 이렇게 활용해 보세요

• 페이지의 큰 제목은 제목 요소로, 부제나 설명은 소제목과 텍스트로 나누어 넣어 보세요.
• 강조하고 싶은 단어 하나만 선택해 그라데이션이나 색상을 입힐 수 있습니다.

6. 알아 두실 점

• 태그 선택 목록에는 <h5>, <h6>이 없습니다.

미니툴바의 각 버튼과 속성 패널의 탭 구조는 별도 글에서 이어서 다룹니다.