HTML 태그, 웹 페이지 디자인 핵심! 사용법 완벽 정리

본 포스팅은 파트너스 활동으로 인한 수익금을 지급 받습니다.

안녕하세요!

마치 친한 친구에게 이야기하듯이, 편안한 어조로 HTML에 대해 설명해 드릴게요. HTML은 웹 페이지의 뼈대와 같은 역할을 하는 아주 중요한 언어랍니다.

HTML, 웹 페이지의 기본 구조

HTML은 HyperText Markup Language의 약자인데요, 쉽게 말해 웹 페이지를 만드는 데 사용하는 기본적인 구조를 정의하는 언어예요. 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 웹 페이지에 넣고, 이들이 어떻게 배치되고 보여야 하는지를 알려주는 역할을 하죠.

"웹 페이지는 HTML로 시작해서 HTML로 끝난다!"

태그(Tag)가 핵심!

HTML에서 가장 중요한 개념은 '태그(tag)'인데요, 태그는 <와 > 기호로 묶인 명령어라고 생각하면 돼요. 예를 들어, <p> 태그는 문단을 시작하고, </p> 태그는 문단이 끝났음을 나타내죠. 대부분의 태그는 이렇게 시작 태그와 종료 태그가 쌍으로 이루어져요.

"태그를 올바르게 사용하는 것이 HTML의 기본이자 전부라고 할 수 있어요."

자주 쓰이는 HTML 태그들

몇 가지 자주 쓰이는 HTML 태그들을 알아볼까요?

<h1> ~ <h6>: 제목을 나타내는 태그예요. <h1>이 가장 크고, <h6>이 가장 작아요.
<p>: 문단을 나타내는 태그죠. 텍스트를 넣을 때 사용해요.
<a>: 링크를 만드는 태그예요. 다른 웹 페이지나 특정 파일로 연결할 수 있어요.
<img>: 이미지를 넣는 태그예요. 이미지 파일의 경로를 지정해야 해요.
<ul>, <ol>, <li>: 목록을 만드는 태그예요. <ul>은 순서 없는 목록, <ol>은 순서 있는 목록, <li>는 목록의 각 항목을 나타내죠.
<div>, <span>: 콘텐츠를 묶는 태그예요. <div>는 블록 단위로, <span>은 인라인 단위로 묶어요.
<table>, <tr>, <td>: 표를 만드는 태그예요. <table>은 표 전체, <tr>은 행, <td>는 열을 나타내죠.

HTML 문서의 기본 구조

HTML 문서는 기본적인 틀을 가지고 있어요. 다음과 같은 구조로 이루어져 있죠.

<!DOCTYPE html>: 문서 형식을 HTML5로 지정하는 선언이에요.
<html>: HTML 문서의 시작과 끝을 나타내는 태그예요.
<head>: 문서의 메타데이터(제목, 스타일, 스크립트 등)를 정의하는 부분이에요.
<body>: 실제 웹 페이지에 보여지는 내용(텍스트, 이미지, 비디오 등)을 담는 부분이에요.

예를 들어, 간단한 HTML 문서는 이렇게 생겼어요.


<!DOCTYPE html>
<html>
<head>
    <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 저의 첫 번째 웹 페이지입니다.</p>
</body>
</html>

HTML, CSS, 그리고 JavaScript

웹 페이지를 만들 때는 HTML뿐만 아니라 CSS, JavaScript라는 언어도 함께 사용돼요. HTML이 웹 페이지의 구조를 담당한다면, CSS는 디자인(색상, 크기, 배치 등)을 담당하고, JavaScript는 동적인 기능(움직임, 상호작용 등)을 담당하죠.

마치 집을 짓는 것에 비유할 수 있어요. HTML은 집의 뼈대, CSS는 인테리어, JavaScript는 가구와 전자제품 같은 기능적인 요소라고 생각하면 이해하기 쉬울 거예요.

더 궁금한 점이 있다면?

혹시 HTML에 대해 더 궁금한 점이 있다면 언제든지 물어보세요! 친절하게 답변해 드릴게요. HTML은 알면 알수록 재미있고 강력한 언어랍니다. 웹 개발의 첫걸음, HTML과 함께 시작해 보세요!

십사토리