순서없는 리스트(<ul>)

약 5분

본문 듣기

HTML의 순서 없는 리스트(<ul>)

안녕하세요! 오늘은 HTML의 순서 없는 리스트에 대해 알아보겠습니다. 순서 없는 리스트는 목록을 만들 때 사용되는 태그로, 주로 항목의 순서가 중요하지 않을 때 유용합니다. 예를 들어, 장바구니에 담은 물건 리스트나 좋아하는 영화 목록을 만들 때 사용할 수 있습니다.

순서 없는 리스트를 만들기 위해서는 <ul> 태그를 사용합니다. 이 태그는 "unordered list"의 약자입니다. 그리고 각 항목은 <li> 태그를 사용해 정의합니다. 이제 실제 코드를 보면서 함께 해볼까요?

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>순서 없는 리스트</title>
</head>
<body>
    <h1>좋아하는 과일</h1>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>오렌지</li>
    </ul>
</body>
</html>

위 코드를 VS Code에 입력하고 실행해보세요. 브라우저에 좋아하는 과일 목록이 순서 없이 나타나는 것을 확인할 수 있습니다. 각 과일 항목은 <li> 태그로 감싸져 있습니다. 이러한 방식으로 원하는 만큼 항목을 추가할 수 있습니다.

이제 여러분의 리스트를 커스터마이즈 해볼까요? 리스트 항목에 링크를 추가할 수 있습니다. 이를 통해 사용자에게 더 많은 정보를 제공할 수 있죠. 아래 코드를 참고해보세요.

코드 html

<ul>
    <li><a href="https://ko.wikipedia.org/wiki/%EC%82%AC%EA%B0%80">사과</a></li>
    <li><a href="https://ko.wikipedia.org/wiki/%EB%B0%98%EB%82%98">바나나</a></li>
    <li><a href="https://ko.wikipedia.org/wiki/%EC%98%A4%EB%A0%8C%EC%A7%80">오렌지</a></li>
</ul>

이 코드를 실행하면 각 과일 이름이 링크로 바뀌고, 클릭 시 해당 과일에 대한 위키피디아 페이지로 이동할 수 있습니다. 맞춤형 링크로 여러분의 리스트를 더 유용하게 만들 수 있죠!

이제 우리가 배운 내용을 정리해 볼까요? 순서 없는 리스트는 목록을 만들 때 매우 유용하며, 쉽게 항목을 추가하고 링크를 추가하여 더 많은 정보를 제공할 수 있습니다. HTML 페이지에서 리스트는 콘텐츠를 정리하는 데 도움을 주죠.

자, 이제 여러분의 실습 시간을 가져볼까요? 다음 문제를 풀어 보세요:

자신이 좋아하는 영화 3편을 목록으로 만들어 보세요.
각 영화 제목에 IMDb 링크를 추가하세요.

이 실습을 통해 리스트를 만드는 것과 링크를 추가하는 연습을 해보세요.

마지막으로, 간단한 개인 프로젝트를 해보세요. 자기소개 페이지를 만들어보는 것입니다. 자신의 이름, 취미, 관심사를 나열하고 관련 링크를 추가해보세요. 이 과정을 통해 여러분만의 멋진 웹 페이지를 만들 수 있습니다!

이 여정을 통해 여러분이 HTML의 기본 개념을 확실히 익히고, 더 나아가 멋진 웹 페이지를 만들 수 있는 기초를 다질 수 있기를 바랍니다. 계속해서 공부해 나가세요!

순서없는 리스트(<ul>)

HTML의 순서 없는 리스트(<ul>)

댓글 0