HTML에는 다양한 유형의 목록이 있습니다. 먼저 글머리 기호 목록이 있습니다. 이 목록 유형에서는 개별 목록 항목에 글머리 기호라고 하는 글머리 기호 문자가 제공됩니다.
글머리 기호 목록은 ul 요소를 사용하여 도입됩니다. 개별 목록 항목은 li 요소로 레이블이 지정됩니다.
<p>포럼의 실제 주제</p> <ul> <li>CSS는 더 이상 설명하지 않습니다</li> <li>40년대 쇼룸 할리우드 스타일</li> <li>폴드아웃 목록 CSS</li> <li>pHP 연결/분리</li> <li>나의 작은 쇼룸 - 초보자가 팁을 묻습니다!</li> </ul>
브라우저에서 결과를 살펴보세요:
각 글 앞에 글머리 기호가 삽입됩니다. 기본적으로 어떻게 표시되는지는 브라우저에 따라 결정됩니다. 목록의 모양에 영향을 주는 데 사용할 수 있는 속성이 있지만 더 이상 사용하지 않아야 합니다. 대신 CSS 속성이 사용됩니다.
열거형 목록도 중첩할 수 있습니다. 먼저 다음 그림을 살펴보세요:
중첩이 무엇인지 명확하게 보여줍니다.
구문은 다음과 같습니다:
<ul> <li>자습서 <ul> <li>2D</li> <li>3D</li> <li>웹</li> </ul> </li> <li>동영상 교육 <ul> <li>3D</li> <li>미디어 디자인</li> <li>웹</li> </ul> </li> <li>팁</li> <li>상점</li> </ul>
따라서 목록 항목에는 다른 목록이 포함될 수 있습니다. 반드시 글머리 기호 목록일 필요는 없습니다. 실제로 이 튜토리얼에서 소개할 다른 목록 유형도 삽입할 수 있습니다.
참고로 HTML5에서 반드시 닫는 <li;;;;>를 사용해야 하는 것은 아닙니다. 하지만 가독성을 높이기 위해 항상 닫는 것이 좋습니다. 구문적으로도 다음과 같이 작성하는 것이 옳습니다:
<p>포럼의 현재 주제</p> <ul> <li>CSS는 계속되지 않습니다 <li>40 년대 쇼룸 할리우드 스타일 <li>폴드 아웃 목록 CSS <li>pHP 연결 / 연결 해제 <li>나의 작은 쇼룸 - 초보자가 팁을 묻습니다! </ul>
번호 매기기 목록
글머리 기호 목록 외에도 번호 매기기 목록도 정의할 수 있습니다. 여기에도 번호 매기기 목록이 무엇인지 보여주는 이미지가 있습니다.
따라서 목록 항목 앞에는 연속된 숫자가 표시됩니다. 번호 매기기 목록은 ol 요소로 도입됩니다.
다음 예시는 이 요소를 사용하는 방법을 보여줍니다.
<ol> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>XML</li> </ol>
글머리 기호 목록과 마찬가지로 개별 항목도 li 요소로 표시됩니다.
이론적으로 열거형 목록도 중첩할 수 있습니다.
<ol> <li>자습서 <ol> <li>2D</li> <li>3D</li> <li>웹</li> </ol> </li> <li>비디오 교육 <ol> <li>3D</li> <li>미디어 디자인</li> <li>웹</li> </ol> </li> <li>팁</li> <li>쇼핑몰</li> </ol>
그러나 브라우저의 결과는 냉정합니다.
다음 체계에 따른 번호 매기기가 이루어지지 않습니다:
튜토리얼 2D 1.1 3D 1.2 웹
- 비디오 튜토리얼 3D
2.1 미디어 디자인
2.2 웹 - 팁
- 상점
순수한 HTML로는 불가능합니다. 실제로 이러한 체계에 따라 콘텐츠에 자동으로 번호를 매기려면 CSS를 사용해야 합니다.
정의 목록
또 다른 목록 변형은 소위 정의 목록입니다. 다음은 이러한 목록이 브라우저에서 궁극적으로 어떻게 보이는지에 대한 예입니다:
정의 목록의 주요 적용 분야는 용어집입니다. 위에 표시된 출력으로 이어진 구문은 다음과 같습니다.
<dl> <dt>AM</dt> <dd>AM - 에어 메일</dd> <dd>AM - 에어 마샬</dd> <dd>AM - 암베르크</dd> <dd>AM - 아메리카늄</dd>
<dd>AM - Amstetten</dd> <dt>AN</dt> <dd>AN - 위의 이름</dd> <dd>AN - Access Node</dd> <dd>AN - Ancona</dd> </dl>정의 목록에는 항상 세 가지 요소가 있습니다. 목록은 dl 요소에 의해 도입됩니다. 이것이 외부 구조입니다. 정의할 표현식은 dt 요소로 특징지어집니다. 궁극적으로 이것이 정의 용어입니다. 정의 설명은 차례로 dd 요소를 통해 지정됩니다.
정의 목록을 중첩할 수도 있습니다. 이는 다른 목록 변형에 대해 표시된 것과 정확히 동일한 방식으로 작동합니다.
정의 목록이 기본적으로 표시되는 방식은 다시 브라우저에 의해 결정됩니다. 그러나 궁극적으로는 CSS를 사용하여 원하는 레이아웃을 직접 정의할 수 있습니다.
이전 HTML 버전에는 메뉴 및 디렉토리 목록도 있었습니다. 이를 위해 메뉴와 디렉토리라는 두 가지 요소가 사용되었습니다. dir 요소는 더 이상 HTML5에 포함되지 않습니다. 메뉴는 상황이 다릅니다. 이 요소는 새로 구현되었으며 향후 컨텍스트 메뉴 및 도구 모음에 사용할 수 있습니다. 다음은 W3C가 예상하는 일반적인 메뉴 애플리케이션의 예시입니다:
<menu type="toolbar"> <li> <menu label="File"> <button type="button" onclick="fnew()">새로 만들기...</button> <button type="button" onclick="fopen()">열기...</button> <button type="button" onclick="fsave()">저장</button> <button type="button" onclick="fsaveas()">다른 이름으로 저장...</button> <button type="button" onclick="fsaveas()">Save as...</button> </menu> </li> <li> <menu label="편집"> <버튼 유형="버튼" onclick="ecopy()">복사</button> <버튼 유형="버튼" onclick="ecut()">복사</button> <버튼 유형="버튼" onclick="ecut()">잘라내기</버튼> <버튼 유형="버튼" onclick="epaste()">붙여넣기</버튼> </menu> </li> <li> <menu label="도움말"> <li><a href="help.HTML">도움말</a></li> <li><a href="about.html">소개</a></li> </menu> </li> </menu>
그러나 현재 이 기능은 아직 어떤 브라우저에서도 지원되지 않습니다.
따라서 현재로서는 메뉴를 사용해서는 안 됩니다.
목록 디자인하기
목록에 대한 참고 사항. 많은 웹사이트는 목록 디자인에 해당 HTML 속성을 사용합니다. 예를 들어, 글머리 기호 목록의 항목 앞에 직사각형이 표시되도록 하기 위해 <ul type="square">를 사용할 수 있습니다.
번호 매기기 목록에도 번호 매기기 유형을 정의할 수 있습니다.
<ol type="A">
그러나 여기서 제공되는 모든 것을 사용해서는 안 됩니다. 해당 CSS 속성이 더 적합합니다. 따라서 실제로 이러한 속성을 사용하여 원하는 대로 목록을 사용자 정의해야 합니다. CSS에 대한 자세한 내용은 이 시리즈에서 이어집니다.
