10. 웹 개발 - HTML(5)

저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.
물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.
친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.
이 카테고리에서는 제가 관심 있어하는 웹 개발에 대해 말해보려고 합니다.

https://that-is-all.tistory.com/entry/studying-web3

3. 웹 개발을 위한 프로그램 두 가지

저는 대학에서 컴퓨터공학 학위를 공부하고 있는 대학생입니다.물론 어려운 내용도 배웁니다만, 그걸 어렵게 설명하고 싶진 않습니다.친구처럼, 젊은 선생님처럼 아주 쉽게 전달하고 싶습니다.

that-is-all.tistory.com

오늘은 HTML 문법 중 목록을 나타내는 방법에 대해 알아보려고 합니다.

아래는 공부할 예시 코드입니다.

(내용은 아무 의미 없으니 신경 쓰지 마세요. 혹은, 본인의 이야기를 채우셔도 상관없습니다.)

<!DOCTYPE html>

<html>

<head>
    <title>My IMAGINATION</title>
</head>

<body>
    <h1>Car - h1</h1>
    <p>
        A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily
        on roads, seat one to eight people, have four wheels, and mainly transport people rather than cargo. There
        are around one billion cars in use worldwide.
    </p>

    <h2>순서가 없는 목록 표시 - h2</h2>
    <ul>
        <li>순서가 없는</li>
        <li>목록은</li>
        <ul>
            <li>그런데</li>
            <li>특정 항목에만</li>
            <li>있는 것들도 순서 없게</li>
            <li>표시 가능함</li>
        </ul>
        <li>이렇게 점으로</li>
        <ol>
            <li>마찬가지로</li>
            <li>순서 있도록</li>
            <li>항목들을</li>
            <li>표시할 수 있음</li>
        </ol>
        <li>표시함</li>
    </ul>

    <h2>순서가 있는 목록 표시 - h2</h2>
    <ol>
        <li>순서가 있는</li>
        <li>목록은</li>
        <ul>
            <li>그럼 여기도</li>
            <li>순서 없게</li>
            <li>항목들을 나열할 수 있음</li>
        </ul>
        <li>이렇게 숫자로</li>
        <ol>
            <li>당연히 여기도</li>
            <li>순서 있게</li>
            <li>항목들을 나열할 수 있음</li>
        </ol>
        <li>표시함</li>
    </ol>
</body>

</html>

<h1> 속의 내용의 출처는 아래와 같습니다.

https://en.wikipedia.org/wiki/Car

Car - Wikipedia

From Wikipedia, the free encyclopedia Motorised passenger road vehicle A car, or an automobile, is a motor vehicle with wheels. Most definitions of cars state that they run primarily on roads, seat one to eight people, have four wheels, and mainly transpor

en.wikipedia.org

위 코드의 결과는 아래와 같습니다.

웹 페이지에 순서가 있는 목록을 표현하고 싶을 때, 순서가 없는 목록을 표현하고 싶을 때는

아래와 같은 요소를 사용하면 됩니다.

<ol> : 순서가 있는 목록(ordered list) - 숫자로 표시
<ul> : 순서가 없는 목록(unordered list) - 점으로 표시
<li> : 목록 내의 단일 아이템을 표시하는 태그

※※※ HTML 파일에는 아직 아무것도 하지 않았습니다. 그냥 텍스트지만 확장자가 HTML이라서 파일을 이렇게 볼 수 있는 겁니다. 이건 아무 데도 올리지 않았습니다. 이 파일에 담긴 컨텐츠는 어떤 웹사이트나 서버에도 공개되지 않습니다. 이 기기에서 저만 볼 수 있습니다. 온라인 콘텐츠가 아니니까요. ※※※

저작자표시 비영리 변경금지 (새창열림)

'지식 Spoon > 1. 웹 개발' 카테고리의 다른 글

11. 웹 개발 - HTML(6) - a 태그(href) (2)	2025.05.21
9. 웹 개발 - Visual Studio Code에서의 유용한 기능1 (0)	2025.05.19
8. 웹 개발 - HTML(4) - HTML 상용구 (4)	2025.05.16