GENERAL TRACK

나의 첫 웹 페이지

AI가 생성한 HTML과 CSS로 개인 프로필 페이지를 만들어 보세요.

1HTML 기초: 태그란 무엇일까요?

페이지를 만들기 전에 한 가지 핵심 개념을 이해해 봅시다. 바로 HTML 태그입니다. 태그를 상자에 붙은 라벨이라고 생각해 보세요. 각 태그는 그 안에 어떤 종류의 콘텐츠가 들어 있는지 브라우저에게 알려 줍니다.

태그는 라벨이 붙은 상자와 같습니다

<h1>

큰 제목 (챕터 제목 같은 것)

<p>

텍스트 문단

<ul> + <li>

항목이 있는 글머리 기호 목록

모든 태그는 열리고 닫힙니다: <h1>content</h1>. 브라우저는 이 태그들을 읽고 그에 맞게 콘텐츠를 표시합니다. 코드 실행 을 클릭해 확인해 보세요:

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Understanding Tags</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>This is a list item</li>
    <li>This is another item</li>
  </ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>Understanding Tags</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
  <ul>
    <li>This is a list item</li>
    <li>This is another item</li>
  </ul>
</body>
</html>

Output

Your guide

2AI로 프로필 페이지 만들기

3나만의 것으로 만들기

4한 단계 위로: CSS로 현대적인 스타일링

5도전: 나만의 프로필 페이지 만들기

바이브 코딩이란?

ALL TUTORIALS

상호작용 기능 추가하기