HTML 목록 생성기

줄 목록에서 진짜 마크업으로

목록은 웹 어디에나 있습니다. 내비게이션 메뉴, 기능 항목, 단계별 안내, 재료 목록, 목차 같은 것들이죠. 이들의 태그를 손으로 입력하는 일은 번거롭고 실수하기 쉽습니다. 각 항목마다 하나의 ul 또는 ol 래퍼 안에 중첩된 자신만의 li 요소가 필요하고, 긴 목록을 내려가다 보면 닫는 태그를 빠뜨리기 쉽기 때문입니다. 이 생성기는 그 번거로움을 없애 줍니다. 한 줄에 한 항목씩 붙여넣으면 완전하고 올바르게 중첩된 구조를 대신 만들어 줍니다.

사고의 틀은 한 줄이 곧 한 목록 항목이라는 것입니다. 한 줄에 입력한 무엇이든 li의 텍스트가 되고, 도구는 그 전체 묶음을 선택한 컨테이너 요소로 감쌉니다. 줄을 재배치하거나 편집한 뒤 다시 생성하면 마크업이 즉시 따라옵니다.

순서 있는 목록 대 순서 없는 목록: 알맞은 요소 고르기

ul과 ol 사이의 선택은 겉치레가 아니라 의미의 문제입니다. 순서 없는 목록(ul)은 글머리 기호로 렌더링되며 항목의 순서가 중요하지 않음을 나타냅니다. 제품 기능의 모음 같은 경우죠. 순서 있는 목록(ol)은 번호로 렌더링되며 순서에 의미가 있음을 나타냅니다. 요리법의 단계나 순위 목록 같은 경우입니다. 스크린 리더는 이 둘을 다르게 읽어 주므로, 알맞은 것을 고르는 일은 단순한 시각적 선택이 아니라 접근성에 관한 결정입니다.

유용한 판별법이 있습니다. 의미를 바꾸지 않고 항목을 섞을 수 있다면 순서 없는 목록을 쓰고, 섞으면 내용이 틀려진다면 순서 있는 목록을 쓰세요. 순서, 순위, 번호 참조가 정보를 담을 때는 언제든 ol을 택하세요.

실제 예제

Apple, Banana, Cherry 세 줄을 입력하고 Unordered List를 고르면, 도구는 과일마다 하나씩 세 개의 li 요소를 담은 ul 요소를 만들어 내며, 들여쓰기되고 제대로 닫혀 있습니다. Ordered List로 전환하면 같은 세 줄이 ol이 되고, 브라우저는 이를 1. Apple, 2. Banana, 3. Cherry로 렌더링합니다. 어떤 태그도 열린 채 남지 않으며, 들여쓰기 덕분에 구조를 읽고 유지하기 쉽습니다.

원하는 번호에서 시작하는 번호 목록

순서 있는 목록이 꼭 1에서 시작할 필요는 없습니다. Advanced Options의 Start Number 입력란을 쓰면 ol에 start 속성이 작성되므로, 다른 콘텐츠에 끊겼던 번호 순서를 이어 가거나 이전 목록이 멈춘 데서 다시 시작할 수 있습니다. 예를 들어 시작을 5로 설정하면 첫 항목이 5로, 다음이 6으로, 이런 식으로 렌더링됩니다. 이것이 번호 매기기를 제어하는 깔끔하고 표준에 기반한 방법으로, 항목 텍스트에 숫자를 직접 입력해 흉내 내는 것보다 낫습니다. 후자는 목록을 다시 정렬해야 할 때 깨지기 때문입니다.

스타일을 위한 ID와 클래스 추가

Advanced Options는 CSS와 JavaScript를 위한 세 가지 연결 고리를 제공합니다. List ID는 ul이나 ol에 고유한 id를 붙여 주며, 정밀하게 겨냥하거나 앵커로 링크하고 싶은 일회성 요소에 이상적입니다. List Class는 컨테이너에 클래스를 적용해 가로 내비게이션 레이아웃이나 사용자 정의 글머리 기호 디자인 같은 공통 스타일을 물려받게 합니다. Item Class는 모든 li에 클래스를 적용하는데, 일관된 간격이나 아이콘처럼 각 항목이 같은 처리를 받아야 할 때 안성맞춤입니다.

클래스와 ID가 생성된 태그에 곧장 들어가므로, 마크업은 붙여넣는 순간 기존 스타일시트에 맞을 준비가 되어 있으며, 이후에 찾기 및 바꾸기를 할 필요가 없습니다.

빈 줄이 무시되는 이유

항목 사이에 실수로 빈 줄을 남겼거나 붙여넣은 원본에 후행 빈 줄이 있어도, 생성기는 빈 li를 만드는 대신 그 줄을 건너뜁니다. 이는 의도된 것입니다. 엉뚱한 빈 목록 항목은 빈 글머리 기호나 건너뛴 번호로 렌더링되어 페이지를 어지럽힐 테니까요. 규칙은 실제로 공백이 아닌 내용이 있는 줄만 목록 항목이 된다는 것이며, 그래서 느슨하게 정리된 텍스트를 먼저 손질하지 않고도 붙여넣을 수 있습니다.

시맨틱 목록이 SEO와 접근성에 중요한 이유

대시나 줄바꿈으로 구분한 문단 대신 진짜 목록 마크업을 쓰면 겉모습 이상의 이득이 있습니다. 검색 엔진은 ul과 ol 구조를 파싱해 묶인 콘텐츠를 이해하며, 제대로 된 목록은 단계와 방법 콘텐츠를 위한 리치 결과 같은 기능에 나타날 자격을 얻습니다. 보조 기술도 덕을 봅니다. 스크린 리더는 목록이 몇 개의 항목을 담고 있는지 알려 주고 사용자가 항목 단위로 이동하게 해 주는데, 이는 텍스트 문자로 글머리 기호를 흉내 낼 때는 불가능합니다.

요컨대 시맨틱 목록은 사람뿐 아니라 기계에도 구조를 전달합니다. 잠깐 시간을 들여 올바른 ul이나 ol 마크업을 생성하면, 손으로 서식을 흉내 낸 것보다 콘텐츠가 더 접근 가능하고, 더 잘 크롤링되며, 유지하기 쉬워집니다.