예제 및 동작 원리

약 5분

본문 듣기

HTML의 기초 이해하기

안녕하세요! 이번 강의에서는 HTML의 기본 개념과 다양한 태그에 대해 알아보겠습니다. HTML은 웹 페이지를 만들기 위한 언어로, 우리가 웹에서 보는 모든 내용을 구성하는 기본적인 뼈대 역할을 합니다.

대부분의 웹 페이지는 HTML로 작성되며, 이를 통해 제목, 문단, 리스트 등 다양한 정보를 표현할 수 있습니다. 이제 HTML의 기본 태그들에 대해 알아볼까요?

1. 리스트 만들기

리스트는 정보를 나열할 때 유용하게 사용됩니다. HTML에서는 두 가지 주요 리스트 형식이 있습니다: 순서 리스트와 무순서 리스트입니다.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 번째 리스트</title>
</head>
<body>
    <h1>나의 좋아하는 과일</h1>
    <ul>
        <li>사과</li>
        <li>바나나</li>
        <li>체리</li>
    </ul>

    <h2>나의 장래희망 리스트</h2>
    <ol>
        <li>프로그래머</li>
        <li>디자이너</li>
        <li>웹 개발자</li>
    </ol>
</body>
</html>

위의 코드를 살펴보면, <ul> 태그는 무순서 리스트(순서 없이 나열)이고, <ol> 태그는 순서 리스트(번호를 매겨서 나열)입니다. 각 리스트 항목은 <li> 태그로 묶어줍니다. 이 코드를 VS Code에 입력하고 웹 브라우저에서 확인해 보세요!

2. 하이퍼링크 만들기

하이퍼링크는 웹 페이지에서 다른 페이지로 연결해주는 링크입니다. 링크를 사용하면 사용자가 클릭할 수 있는 버튼 같은 역할을 하죠.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 링크 페이지</title>
</head>
<body>
    <h1>좋아하는 웹사이트</h1>
    <ul>
        <li><a href='https://www.google.com'>Google</a></li>
        <li><a href='https://www.github.com'>GitHub</a></li>
        <li><a href='https://www.wikipedia.org'>Wikipedia</a></li>
    </ul>
</body>
</html>

위의 코드는 링크를 만들어 주는 <a> 태그를 사용하고 있습니다. href 속성은 원하는 웹페이지의 URL 주소를 지정합니다. 이 코드를 통해 여러 웹사이트에 쉽게 연결되는 링크를 추가할 수 있습니다. VS Code에서 실행하고 직접 클릭해 보세요!

정리 및 실습

이번 시간에는 리스트와 링크에 대해 배워보았습니다. 다음의 실습 문제를 직접 풀어보며 여러분의 실력을 확인해보세요!

실습 문제

나만의 리스트를 만들어 보세요. 구성 항목은 '나의 취미'입니다.
다양한 웹사이트를 링크해 줄 수 있는 나만의 링크 페이지를 만들어 보세요.

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

이제까지 배운 내용을 바탕으로 여러분의 자기소개 페이지를 만들어 보세요! 이 페이지에는 여러분의 이름, 좋아하는 것들, 그리고 여러분이 좋아하는 웹사이트에 대한 링크를 포함해보세요. 자신만의 스타일로 꾸며보는 것도 잊지 마세요!