순서 없는 목록 ul과 li
ul 및 li 요소로 글머리 기호 목록을 만듭니다.
순서 없는 목록 ul과 li은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
순서 없는 목록이란 무엇입니까
순서 없는 목록은 항목을 글머리 points와 함께 표시하며 순서는 중요하지 않습니다:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>ul 요소
<ul>(순서 없는 목록) 요소가 목록을 감쌉니다. <li> elements만 직접 자식이어야 합니다:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<!-- ul = unordered list (bullet points by default) -->
<!-- li = list item -->
<!-- Never put text directly inside ul without li -->CSS로 글머리 기호 스타일 지정
CSS로 목록 표식을 제어합니다:
ul {
list-style-type: disc; /* default: filled circle */
/* circle, square, none */
}
/* Custom bullet with ::before */
ul li::before {
content: '→ ';
color: blue;
}
/* Remove all list styling: */
ul {
list-style: none;
padding: 0;
margin: 0;
}ul로 탐색 메뉴 만들기
탐색 메뉴는 의미론적으로 링크 목록입니다:
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>li에는 모든 콘텐츠를 포함할 수 있습니다
목록 항목에는 모든 흐름 콘텐츠를 담을 수 있습니다:
<ul>
<li>
<strong>HTML</strong>
<p>The structure of the web.</p>
</li>
<li>
<strong>CSS</strong>
<p>The presentation layer.</p>
</li>
</ul>인라인 목록
CSS로 목록 항목을 가로로 표시합니다:
<ul class="inline-list">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<!-- CSS: -->
<!--
.inline-list {
list-style: none;
padding: 0;
display: flex;
gap: 1rem;
}
-->ul의 의미론적 사용
순서 없는 목록의 일반적인 의미론적 사용 사례:
- 탐색 메뉴
- 기능 목록
- 태그 클라우드
- 관련 링크
- 레시피의 재료 목록
여러 항목에 ul과 p 중 무엇을 사용할까
서로 관련된 여러 항목이 있을 때는 별도의 문단보다 목록이 의미론적으로 더 적절합니다:
<!-- Bad: items that are actually a list -->
<p>- HTML</p>
<p>- CSS</p>
<p>- JavaScript</p>
<!-- Good: -->
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>list-style-image로 목록 표식 지정
사용자 지정 이미지를 목록 글머리 기호로 사용합니다:
ul {
list-style-image: url('/icons/check.svg');
}
/* More reliable: use background-image on li::before */
ul li {
list-style: none;
padding-left: 1.5rem;
background: url('/icons/check.svg') no-repeat left center;
background-size: 1rem;
}list-style 단축 속성
list-style 단축 속성은 유형, 위치 및 이미지를 설정합니다:
ul {
list-style: square inside; /* type + position */
list-style: none; /* remove bullets */
}
/* list-style-position: inside vs outside */
ul {
list-style-position: inside; /* bullet inside padding box */
/* outside = default, bullet outside text block */
}접근성
목록의 접근성 참고 사항:
- 화면 낭독기는 목록 유형과 항목 수를 알립니다
list-style: none을 사용하면 일부 화면 낭독기가 목록으로 알리지 않을 수 있습니다 — 의미를 유지하려면role="list"를 추가합니다
<ul style="list-style: none" role="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>빠른 확인
ul의 유효한 직접 자식 요소는 무엇 하나뿐입니까?
복습: 순서 없는 목록
순서 없는 목록의 핵심 내용:
<ul>은 순서가 중요하지 않은 목록을 감쌉니다<li>는 유일하게 유효한 직접 자식입니다- 기본 글머리 기호는 원형이며
list-style-type으로 변경합니다 - 탐색 메뉴는 의미론적으로 링크로 이루어진
<ul>목록입니다 - CSS로 글머리 기호를 제거했다면
role="list"를 추가합니다
자주 묻는 질문
“순서 없는 목록 ul과 li” 강의는 무료인가요?
네 — “순서 없는 목록 ul과 li” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“순서 없는 목록 ul과 li”에서 뭘 배우나요?
ul 및 li 요소로 글머리 기호 목록을 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“순서 없는 목록 ul과 li” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.