HTML 목록 태그는 웹페이지에 목록을 만드는 데 사용됩니다. 정렬된 목록, 정렬되지 않은 목록 및 설명 목록의 세 가지 유형의 목록을 만들 수 있습니다.
웹 페이지를 구축할 때 정보를 올바른 형식의 목록으로 표시할 수 있습니다. 예를 들어, 목록 형식으로 표시하려는 학생 이름 목록이 있거나 목록 형식으로 지정하려는 일련의 블로그 게시물이 있을 수 있습니다.
HTML에서 , 목록을 만들 수 있는 내장 함수가 있습니다. 이 튜토리얼에서는 HTML을 다룰 것입니다. 목록 유형 및 웹 페이지에 구현하는 방법.
HTML 목록 유형
HTML에는 세 가지 유형의 목록이 있습니다. , 각각은 특정한 목적과 코드를 가지고 있습니다. 다음과 같습니다.
Ordered list:특정 순서의 항목 목록을 만드는 데 사용됩니다.Unordered list:순서가 없는 항목의 목록을 만드는 데 사용됩니다.Description list:항목 및 설명 목록을 만드는 데 사용됩니다.
목록은 텍스트 내부, 줄 바꿈 뒤 또는 nested list을 생성하기 위해 다른 목록 내부에 배치하든 상관없이 웹페이지의 모든 부분에 나타날 수 있습니다. . HTML에서 이 세 가지 유형의 목록을 만드는 방법을 분석해 보겠습니다. .
HTML 목록:정렬됨
Ordered lists HTML에서 사용 목록의 순서가 필요할 때. 예를 들어 특정 순서로 발생해야 하는 일련의 지침이 있는 경우 순서가 지정된 목록을 사용하는 것이 좋습니다. Ordered lists 번호가 매겨진 목록입니다.
Ordered lists <ol> 사용 태그 및 목록의 각 항목은 <li>를 사용합니다. 꼬리표. 다음은 정렬된 목록의 예입니다.
<ol> <li>Mix 100g plain flour, 2 eggs, 300ml milk, and 1tbsp sunflower oil in a bowl.</li> <li>Leave the mix to rest for 30 minutes.</li> <li>Set a medium-size frying pan over a medium heat and wipe it with oiled kitchen paper.</li> <li>Pour batter mixture into the pan and cook on each side for one minute.</li> </ol>
위의 예에서는 팬케이크의 기본 레시피를 만들었습니다. 이 목록의 각 단계는 순서대로 발생해야 하므로 순서가 지정된 목록을 선택했습니다. 다음은 코드의 출력입니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
Ordered lists 숫자 1부터 시작하여 오름차순으로 이동합니다. 그러나 목록을 다른 번호에서 시작하려면 start를 사용할 수 있습니다. 속성:
<ol start="5"> <li>Move the pancake onto a plate (repeat steps 2-4 if you are making multiple pancakes).</li> <li>Spread butter on your pancakes, maple syrup, lemon, or any other topping.</li> <li>Enjoy your pancakes!</li> </ol>
새 목록은 다음과 같이 나타납니다.
HTML 목록:정렬되지 않음
목록 항목의 순서가 중요하지 않은 항목 목록을 만들고 싶다면 HTML unordered를 사용할 수 있습니다. 목록 태그. Unordered list을 만들 수 있습니다. <ul> 사용 태그 및 각 목록 항목은 주문 목록과 같이 <li>로 시작합니다. 태그.
다음은 Unordered list의 예입니다. :
<ul> <li>Alex</li> <li>Carol</li> <li>Lucy</li> <li>Shawn</li> </ul>
목록은 다음과 같이 나타납니다.
HTML 목록:설명 목록
목록을 작성할 때 목록의 각 항목에 대한 설명을 포함할 수 있습니다. 예를 들어, 학생 이름 목록이 있는 경우 성적을 추가할 수 있지만 기본 목록 텍스트의 일부로 추가하지 않을 수 있습니다.
Description list입니다. 들어오세요. Description list 각 요소에 대한 설명이 있는 항목 목록입니다. Description list <dl>를 사용하여 생성됩니다. 태그에서 목록의 주요 요소는 <dt>를 사용합니다. 태그 및 정의는 <dd>를 사용합니다. 태그.
다음은 Description list의 예입니다. HTML에서 :
<dl> <dt>Economy Class</dt> <dd>Standard seats, no meal service.</dd> <dt>First Class</dt> <dd>Luxury seats, catered meal service.</dd> </dl>
코드는 다음 목록을 반환합니다.
보시다시피 비행기 클래스 이름은 목록 형식으로 표시되고 해당 이름에 대한 설명은 각 항목 아래에 나타납니다. 각 설명도 들여쓰기되어 목록 항목과 구분됩니다.
결론
목록은 HTML의 필수 태그입니다. , 개발자가 올바른 형식으로 정보를 표시할 수 있습니다. 목록은 일반적으로 사용자가 읽기에 더 편안하며 목록을 사용하면 개발자가 정보 구조를 더 잘 제어할 수도 있습니다.
이 자습서에서는 HTML의 목록을 분류했습니다. , 세 가지 유형의 HTML 중 하나를 만드는 방법 목록:ordered (li ol 태그), unordered (ul li 태그) 및 description (dt dd 태그). 이제 HTML로 목록을 만드는 중입니다. 프로처럼!