HTML 커뮤니티 소개

약 4분

본문 듣기

HTML 커뮤니티 소개

안녕하세요! 오늘부터 HTML을 처음 배우는 여정을 함께 시작할 친구들을 환영합니다. HTML은 웹 페이지의 뼈대를 만드는 언어로, 프로그램을 짜는 데 있어 첫걸음을 뗄 수 있게 해줍니다. 이 강의는 실습 중심으로 구성되어 있어, 여러분이 직접 코드를 작성하면서 배울 수 있도록 돕겠습니다.

각 단계에서는 HTML의 기본 개념을 소개하고 예제를 통해 이해를 돕겠습니다. 또한, 여러분이 자신의 페이지를 만들어 보면서 직접 배우는 경험을 제공할 것입니다.

우선, HTML을 배우는 데 있어 동기 부여를 잊지 말아야 합니다. 여러분이 만든 웹 페이지가 다른 사람들에게 공유될 수 있다는 사실을 기억하세요. 그럼 바로 시작해 볼까요?

1. HTML의 기본 개념

HTML은 HyperText Markup Language의 약자로, 웹 페이지를 구조화하는 데 사용됩니다. 예를 들어, HTML은 책의 표지, 목차, 본문 등을 결정짓는 역할을 합니다. HTML 코드가 없으면 웹 페이지는 아무런 형체를 갖지 않게 됩니다.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 HTML 페이지</title>
</head>
<body>
    <h1>안녕하세요, HTML 세계에 오신 것을 환영합니다!</h1>
</body>
</html>

위 코드는 HTML 페이지의 기본 구조를 보여줍니다. <!DOCTYPE html> 선언은 이 문서가 HTML5 문서임을 나타내고, <html> 태그는 HTML 문서의 시작과 끝을 알려줍니다. <head> 섹션에서는 문서의 메타 정보를 설정하고, <body> 섹션에서는 브라우저에서 보여질 콘텐츠를 작성합니다.

VS Code에서 위 코드를 작성한 후 'index.html'로 저장해 주세요. 그런 다음 브라우저에서 열어보면 여러분의 첫 HTML 페이지를 확인할 수 있습니다!

핵심 요약

HTML은 웹 페이지를 구성하는 기본적인 언어입니다. 웹 페이지는 HTML 코드로 구조화되며, 모든 웹 페이지는 <html>, <head>, <body>와 같은 기본 태그를 포함합니다.

실습 문제

아래 질문에 답해보세요:

HTML의 기본적인 구조를 설명해보세요.
<head>와 <body>의 차이점은 무엇인가요?

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

이번 단원에서는 여러분의 자기소개 페이지를 만들어볼 것입니다. 아래 예제를 바탕으로 자신에 대한 정보를 추가해 보세요!

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>자기소개</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>제 이름은 [이름]이고, [직업]입니다.</p>
    <h2>저에 대해</h2>
    <p>[자기소개 내용을 여기에 추가하세요]</p>
</body>
</html>

위의 코드에서 [이름], [직업] 및 [자기소개 내용을 여기에 추가하세요] 부분을 본인의 정보로 수정해 보세요. 그리고 브라우저에서 페이지를 새로고침하면 여러분만의 멋진 자기소개 페이지를 볼 수 있습니다!

HTML 커뮤니티 소개