웹 브라우저와 HTML의 관계

약 4분

본문 듣기

안녕하세요! 오늘은 웹 브라우저와 HTML의 관계에 대해 알아보겠습니다. HTML은 웹 페이지를 구성하는 뼈대라고 생각하시면 됩니다. 웹 브라우저는 이 HTML 뼈대를 읽고, 이를 예쁘게 보여주는 역할을 하죠.

즉, 웹 브라우저는 HTML을 통해 웹 페이지를 '그리는' 도구입니다. 마치 화가가 캔버스에 그림을 그리는 것과 비슷하죠! 이 이해를 바탕으로, HTML의 기본 구조를 살펴보고 실제 코드로 어떻게 표현되는지 알아보겠습니다.

HTML 기본 구조

HTML 문서는 기본적으로 다음과 같은 구조를 가집니다. 이 구조를 기억하는 것이 중요합니다.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 페이지</title>
</head>
<body>
    <h1>안녕하세요, 여러분!</h1>
</body>
</html>

위 코드는 HTML 문서의 가장 기본적인 형태입니다. 각 부분의 역할을 간단히 설명드릴게요:

이제 여러분이 직접 이 코드를 작성해보는 시간을 가져볼까요? VS Code를 열고, 새로운 파일을 생성해보세요. 파일 이름은 index.html로 하고, 위 코드를 복사하여 붙여넣으세요.

작성한 파일을 저장한 후, 웹 브라우저에서 열어보세요. 제목이 '나의 첫 페이지'인 탭과 '안녕하세요, 여러분!'이라는 큰 글자가 보일 것입니다. 잘 하셨습니다!

오늘 배운 내용을 정리해보면, 웹 브라우저는 HTML을 읽고 이를 사용자에게 보여주는 역할을 하고, HTML 문서는 특정 구조를 갖고 있다는 것입니다.

이제 여러분에게 실습 문제를 드릴게요. 아래의 내용을 포함한 HTML 문서를 작성해보세요.

이제 자기소개 페이지를 만들어 볼 시간입니다! 이 페이지에는 여러분의 이름, 나이, 취미 등을 포함하세요. <h1>과 <p> 태그를 활용하여 정보를 깔끔하게 배치해 보세요.

다음 단계로, CSS를 사용하여 페이지를 더욱 아름답게 꾸밀 수 있으니 앞으로의 강의도 기대해 주세요!