리스트와 인용구 요소

준비물, 진행 순서, 포함 내용처럼 여러 항목을 나란히 보여 줘야 할 때는 문단으로 길게 쓰는 것보다 점이 찍힌 목록이 훨씬 읽기 쉽습니다. 수강생의 한마디나 대표 문구를 돋보이게 하고 싶을 때는 인용구가 어울립니다. 퍼널체인저스 에디터의 리스트와 인용구 요소는 둘 다 글만 입력하면 바로 페이지에 들어갑니다. 이 글에서는 두 요소를 찾는 곳, 넣는 방법, 항목을 늘리고 순서를 바꾸는 방법, 인용구의 배경색을 바꾸는 방법을 순서대로 안내합니다. 제목과 본문 텍스트를 넣고 고치는 방법은 별도 글에서 다룹니다.

1. 리스트와 인용구는 어디에 있나요

에디터 왼쪽 레일에서 요소 추가(+ 아이콘)를 누르면 요소 패널이 열립니다. 텍스트 카테고리에 제목, 소제목, 텍스트에 이어 리스트와 인용구가 있습니다. 넣을 섹션의 빈 곳을 먼저 눌러 선택해 두면, 두 요소 모두 그 섹션의 맨 아래에 들어갑니다.

2. 리스트 넣기

리스트를 누르면 리스트 추가 창이 열립니다. 입력칸 위에는 목록 항목 (줄마다 한 항목)이라는 안내가 있고, 칸에는 항목 1~3을 입력하라는 예시 문구가 미리 채워져 있습니다. 예시 문구를 지우고 항목을 한 줄에 하나씩 적으면 됩니다. 아래 미리보기에서 모양을 확인한 뒤 삽입을 누르세요.

• 줄과 줄 사이에 빈 줄을 넣어도 빈 줄은 항목이 되지 않습니다. 줄 앞뒤의 공백도 정리되어 들어갑니다.
• 입력칸이 비어 있으면 삽입 버튼이 눌리지 않습니다.
• 삽입된 목록은 점(●)이 붙은 목록이며 글자 크기는 15px입니다.

3. 인용구 넣기

인용구를 누르면 인용구 추가 창이 열리고 인용 텍스트를 적을 수 있습니다. 여러 줄을 입력하면 한 인용구 안에서 줄이 바뀝니다. 아래 예시처럼 첫 줄에 후기를, 둘째 줄에 말한 사람을 적어 두면 한 덩어리로 보입니다.

삽입하면 왼쪽에 굵은 보라색 선이 있고 연한 보라색 배경에 기울어진 글씨로 들어갑니다.

4. 항목 고치고, 늘리고, 순서 바꾸기

삽입한 뒤에는 목록의 항목 하나하나가 따로 선택됩니다. 항목의 글자를 누르면 그 항목이 선택되고, 요소 오른쪽에 툴바가 나타납니다. 선택된 항목 위에는 텍스트 편집 창도 함께 뜨는데, 태그 칸에는 <li>가 표시됩니다.

툴바에는 왼쪽으로 이동, 오른쪽으로 이동, 요소 설정 열기, 레이아웃 / 간격, 텍스트·폰트 편집, 링크 편집, 요소 복제, 요소 삭제 버튼이 있습니다. 목록에서는 다음처럼 씁니다.

1. 글자 고치기: 항목을 선택한 상태에서 텍스트·폰트 편집을 누르면 글자를 바로 고칠 수 있습니다. Esc를 누르면 편집이 끝납니다.
2. 항목 늘리기: 항목을 선택하고 요소 복제를 누르면 같은 문구의 항목이 바로 아래에 하나 생깁니다. 복사된 항목의 문구를 새 내용으로 고치세요.
3. 순서 바꾸기: 왼쪽으로 이동을 누르면 항목이 한 칸 위로, 오른쪽으로 이동을 누르면 한 칸 아래로 옮겨 갑니다. 맨 끝 항목에는 오른쪽으로 이동 버튼이 나타나지 않습니다.
4. 항목 지우기: 요소 삭제를 누르면 그 항목만 지워집니다.

아래 화면은 마지막 항목을 복제해 여분의 양말로 고친 뒤, 왼쪽으로 이동으로 한 칸 올린 모습입니다.

5. 인용구 배경색 바꾸기와 저장

인용구를 선택하고 툴바의 요소 설정 열기를 누르면 텍스트 설정 창이 열립니다. 이 창의 배경색에서 단색을 고르고 색 코드를 적으면 인용구 배경이 바뀝니다. 아래 화면은 처음의 연보라색을 연한 초록색 #ecfdf5로 바꾼 모습입니다. 같은 창에는 너비와 위치 이동도 있고, 글자 크기나 색은 인용구에서도 텍스트 편집 창으로 고칠 수 있습니다.

수정한 뒤 상단의 저장을 누르고 새로 고침하면 항목 구성과 인용구 색이 그대로 열립니다.

6. 목록 전체를 선택하려면

목록 전체를 한 번에 손보고 싶을 때는 항목을 선택하고 요소 설정 열기를 누른 뒤, 창 아래의 전체 속성 패널 열기 (효과·반응형·HTML) →를 누르세요. 오른쪽 속성 패널 머리의 상위 버튼을 누르면 선택이 목록 전체로 올라가고, 패널 제목이 컨테이너, 태그가 <ul>로 바뀝니다. 이 패널의 콘텐츠 탭에는 크기, 내용 정렬 (자식 요소), 배경색, 배경 이미지 항목이 있어 목록 전체의 너비와 배경을 정할 수 있습니다.

7. 이렇게 활용해 보세요

• 첫 수업 안내 페이지에 준비물, 진행 순서, 포함 내용을 리스트로 정리해 보세요. 항목을 한 줄씩 적기만 하면 되어 문구를 고칠 때도 편합니다.
• 수강 후기나 고객의 한마디는 인용구로 넣고, 둘째 줄에 말한 사람을 적어 출처를 함께 보여 주세요.
• 인용구 배경색을 페이지의 포인트 색과 같은 계열로 바꾸면 후기 섹션이 페이지 분위기와 어울립니다.
• 항목이 비슷한 목록은 한 항목을 복제해 문구만 바꾸면 빠르게 늘릴 수 있습니다.
• 순서가 중요한 안내는 항목을 먼저 적은 뒤 왼쪽으로 이동, 오른쪽으로 이동으로 순서를 맞춰 보세요.

8. 알아 두실 점

• 리스트는 점이 붙은 목록으로 들어갑니다. 숫자가 붙는 목록을 고르는 선택지는 요소 패널에 따로 없습니다.
• 리스트와 인용구는 한 번에 한 요소씩 삽입됩니다. 삽입 창에서 바로 들어가는 모양은 정해져 있고, 색이나 크기는 삽입한 뒤 고칩니다.
• 편집 화면에서 바꾼 내용은 상단의 저장을 눌러야 보관됩니다.
• 글자 크기, 굵기, 색, 정렬 같은 글자 꾸미기는 텍스트를 다룬 글과 같은 텍스트 편집 창을 씁니다.

요소 패널을 여는 기본 방법과 제목·텍스트 요소는 각각 별도 글에서, 컨테이너 배경과 여백 조절은 컨테이너를 다룬 글에서 이어서 안내합니다.