순서있는 리스트(<ol>)

약 4분

본문 듣기

순서있는 리스트(ordered list) 만들기

안녕하세요, 여러분! 오늘은 HTML에서 순서있는 리스트를 만드는 방법에 대해 배워보겠습니다. 순서있는 리스트는 'ol' 태그를 사용하여 만듭니다. 이 태그는 리스트 항목의 순서가 중요할 때 사용됩니다. 예를 들어, 요리 순서, 단계별 지침 등을 표현할 때 유용합니다.

코드 html

<ol>
    <li>첫 번째 단계</li>
    <li>두 번째 단계</li>
    <li>세 번째 단계</li>
</ol>

위 코드는 아주 기본적인 순서있는 리스트입니다. 'ol' 태그 안에 'li' 태그를 사용하여 각 항목을 정의합니다. 만약 위 코드를 VS Code에 작성해 보신다면, 웹 브라우저에서 볼 때 순서가 매겨진 리스트를 확인할 수 있습니다.

리스트에 링크 추가하기

이제 리스트 항목에 링크를 추가하는 방법을 배워보겠습니다. 이 경우에는 'a' 태그를 이용하여 웹 페이지를 연결할 수 있습니다. 여러분의 리스트 항목에 정보를 제공하는 링크를 추가해보세요.

코드 html

<ol>
    <li><a href="https://www.example.com">첫 번째 단계</a></li>
    <li><a href="https://www.example.com">두 번째 단계</a></li>
    <li><a href="https://www.example.com">세 번째 단계</a></li>
</ol>

위 코드는 각 리스트 항목을 클릭하면 해당 링크로 이동할 수 있게 만들어 줍니다. 이렇게 하면 더 많은 정보를 사용할 수 있도록 링크를 추가할 수 있습니다. 여러분의 상상력을 발휘하여 유용한 링크를 추가해보세요!

핵심 요약 및 실습 문제

오늘 배운 내용을 요약해보면 :

'ol' 태그를 사용하여 순서있는 리스트를 만든다.
'li' 태그를 사용하여 각 리스트 항목을 추가한다.
목록에 링크를 추가하여 더 많은 정보를 제공할 수 있다.

이제 여러분은 비슷한 형식으로 자기만의 순서있는 리스트를 만들어 보세요! 예를 들어, 좋아하는 운동을 순서로 나열해보세요.

개인 프로젝트: 자기소개 페이지 만들기

간단한 개인 프로젝트로 자기소개 페이지를 만들어 보세요. 순서있는 리스트를 사용하여 다음과 같은 내용을 포함해보세요:

본인의 이름
나이
취미
관심 분야

이 정보들을 리스트 형식으로 작성하고 각 항목에 링크를 추가해 본인의 소셜 미디어 링크나 관련 정보를 넣을 수 있도록 해보세요. 자신만의 독특한 자기소개 페이지를 만들어 보면서 좀 더 재미있고 창의적인 HTML 학습이 되길 바랍니다!