HTML 의 ul 태그는 항목이 일반적으로 글머리 기호 목록으로 렌더링되는 순서가 없는 목록을 생성하는 데 사용됩니다. 이 랩에서는 HTML 을 사용하여 순서가 없는 목록을 만드는 방법을 안내하고 ul 태그 구문 및 사용법의 예시를 제공합니다.
참고:
index.html에서 코딩을 연습할 수 있으며, Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단 모서리에 있는 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.
새 프로젝트 폴더에 index.html 파일을 생성하고 코드 편집기에서 파일을 엽니다.
html, head, body 태그를 추가하여 HTML 문서의 기본 구조를 만듭니다. head 태그 안에 title 태그를 추가하고 문서 제목을 "HTML Unordered List Lab"으로 설정합니다.
<!doctype html>
<html>
<head>
<title>HTML Unordered List Lab</title>
</head>
<body>
<!-- Add content here -->
</body>
</html>body 태그 안에 ul 태그를 사용하여 순서가 없는 목록을 만듭니다. 목록 항목을 추가하려면 ul 태그 안에 li 태그를 사용합니다.
<ul>
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>ul 태그는 특별한 속성을 가지고 있지 않지만, 전역 속성 (global attributes) 과 이벤트 속성 (event attributes) 을 지원합니다. 다음은 ul 태그에 class 속성을 추가하는 예시입니다.
<ul class="my-list">
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul>ul 태그의 스타일을 지정하려면 CSS 를 사용할 수 있습니다. 다음 예시에서는 list-style-type을 'square'로 설정하고 여백 (margin) 을 추가합니다.
<style>
ul {
list-style-type: square;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 50px;
}
</style>
<ul class="my-list">
<li>This is the first item in the list</li>
<li>This is the second item in the list</li>
<li>This is the third item in the list</li>
</ul><li> 태그 안에 다른 <ul> 태그를 배치하여 순서 없는 목록을 다른 순서 없는 목록 안에 중첩시킬 수 있습니다. 다음은 중첩된 순서 없는 목록의 예시입니다.
<ul>
<li>This is the first item in the parent list</li>
<li>
This is the second item in the parent list
<ul>
<li>This is a nested item</li>
<li>This is another nested item</li>
</ul>
</li>
<li>This is the third item in the parent list</li>
</ul>이 랩에서는 HTML 에서 ul 태그를 사용하여 순서 없는 목록을 만드는 방법을 배웠습니다. 또한 ul 태그에 속성 (attribute) 과 CSS 스타일을 추가하는 방법도 배웠습니다. ul 태그는 항목의 글머리 기호 목록을 만드는 데 사용된다는 것을 기억하십시오. ul 태그는 시작 및 종료 태그가 필요하며, 목록 항목은 ul 태그 내에서 li 태그를 사용하여 추가해야 합니다. li 태그 안에 다른 ul 태그를 배치하여 순서 없는 목록을 다른 순서 없는 목록 안에 중첩시킬 수 있습니다.
