1. 제목
HTML은 텍스트 콘텐츠, 이미지, 링크 및 목록을 형식화하고 구조화하기 위한 다양한 태그를 제공합니다. 주요 HTML 태그를 사용하면 읽기 쉽고 논리적으로 구성된, 매력적이고 이해하기 쉬운 페이지를 만들 수 있습니다. 가장 인기 있는 기본 태그와 그 용도에 대해 살펴보겠습니다.
헤더(header)는 페이지의 다양한 수준의 제목을 나타내는 데 사용됩니다. HTML은 <h1>에서 <h6>까지 여섯 수준의 헤더를 제공합니다. <h1>은 가장 큰 제목이며 가장 중요하고, <h6>은 가장 작은 제목입니다.
<h1>페이지의 주요 제목</h1>
<h2>첫 번째 수준의 부제목</h2>
<h3>두 번째 수준의 부제목</h3>
...
<h6>가장 작은 제목</h6>
제목을 사용하면 텍스트 정보를 구조화할 수 있으며 SEO(검색 엔진 최적화)가 향상됩니다. 검색 엔진은 페이지 내용을 분석할 때 제목을 고려합니다.
2. 텍스트 형식
HTML은 텍스트 형식을 위한 간단하지만 강력한 몇 가지 태그를 제공합니다.
문단/단락
이제 제목에 대해 알게 되었으니 텍스트에 주목해 봅시다. HTML에서 문단은 <p> 태그를 사용하여 생성됩니다. 좋아하는 텍스트 편집기에서 "Enter"를 눌러 새로운 단락을 시작하는 것과 같습니다. 예:
<p>이 페이지의 첫 번째 문단이며, 주제에 대해 조금 더 알려줍니다.</p>
<p>이것은 이미 두 번째 문단입니다. 왜냐하면 '첫 번째' 만으로는 모든 생각을 전달하기에 때로 부족합니다!</p>
텍스트 블록
<span>과 <div>도 잊지 마세요. <span>은 HTML 코드 내에서 텍스트 조각을 스타일링하는 데 도움이 되는 작은 도우미입니다. 그리고 <div>는 블록과 컨테이너를 생성하는 데 적합한 진정한 챔피언입니다.
<div>이 블록에는 많은 흥미로운 것을 포함할 수 있습니다!</div>
<span>이 텍스트는 색상 또는 글꼴로 강조 표시될 수 있습니다.</span>
굵은 텍스트
굵은 텍스트 — <b>: <b> 태그는 텍스트를 굵게 표시합니다. 이 태그는 특정 단어 또는 구의 중요성을 강조하기 위해 자주 사용됩니다.
<p>이것은 <b>중요한 텍스트</b>로, 주의를 끕니다.</p>
기울임 텍스트
이탤릭체 — <i>: <i> 태그는 텍스트를 이탤릭체로 만듭니다. 인용문, 외국어 단어 또는 특별히 강조할 요소를 강조하는 데 적합합니다.
<p>이것은 기울임 텍스트의 예입니다: <i>기울임 텍스트 예제</i>.</p>
3. 이미지
페이지에 이미지를 추가하려면 <img> 태그를 사용합니다. 이 태그는 독립적이며 작동하기 위해 src 속성을 사용하여 이미지 경로를 지정해야 합니다. 또한 alt 속성을 사용하여 이미지의 설명을 추가하는 것이 중요합니다(대체 텍스트). 이는 접근성 문제 또는 이미지 로드 실패 시 사용자가 이미지에 있어야 할 내용을 이해할 수 있도록 돕습니다.
<img src="image.jpg" alt="이미지 설명">
다른 유용한 속성들:
-
width— 이미지 너비 (예:width="200"). -
height— 이미지 높이 (예:height="150").
width 및 height 속성이 포함된 예:
<img src="http://google.com/image.jpg" alt="이미지 설명" width="200" height="150">
4. 하이퍼링크
하이퍼링크는 사용자가 다른 페이지나 리소스로 이동할 수 있도록 돕는 HTML의 중요한 요소입니다. 링크는 <a> 태그를 사용하여 생성되며, 주요 속성은 대상 URL을 지정하는 href입니다. 'A'는 여기서 'anchor'를 의미합니다. 링크는 문서의 특정 계층 구조에 고정되어야 합니다:
<a href="https://example.com">예제 사이트로 이동하기</a>
유용한 링크 속성들:
-
target="_blank"— 링크를 새 탭에서 엽니다. -
title="팁"— 링크에 마우스를 올렸을 때 팝업 힌트를 추가합니다.
추가 속성이 포함된 링크 예:
<a href="https://example.com" target="_blank" title="새 탭에서 열리기">우리 웹사이트 방문하기</a>
5. 리스트
리스트는 정보를 이해하기 쉬운 블록으로 구성하는 데 도움이 됩니다. HTML은 두 가지 유형의 리스트를 지원합니다:
불렛 리스트
비정렬 리스트 (불렛) — <ul>: 이 리스트의 항목은 불렛(점)으로 표시됩니다.
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
번호 리스트
정렬 리스트 (번호) — <ol>: 이 리스트의 항목은 자동으로 번호가 매겨집니다.
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
리스트의 항목은 <ul> 또는 <ol> 내부에 <li>를 사용하여 생성됩니다. 리스트는 메뉴, 작업 순서, 목록 및 기타 구조적 데이터에 널리 사용됩니다.
6. 모든 기본 태그 사용 예
이제 설명한 모든 태그를 하나의 HTML 조각에 결합해봅시다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>기본 HTML 태그가 포함된 페이지 예제</title>
</head>
<body>
<h1>페이지 제목</h1>
<h2>부제목</h2>
<p>굵은 텍스트와 <b>굵은 텍스트</b> 및 <i>이탤릭 텍스트</i>가 포함된 문단 예제입니다.</p>
<h3>이미지</h3>
<img src="image.jpg" alt="이미지 예제" width="200" height="150">
<h3>링크</h3>
<p>이것은 <a href="https://example.com" target="_blank" title="사이트 예제">외부 사이트 링크</a>입니다.</p>
<h3>불렛 리스트 예제</h3>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
<h3>번호 리스트 예제</h3>
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ol>
</body>
</html>
결론
이제 기본 HTML 태그를 사용하는 방법에 대한 아이디어를 얻으셨으니, 이들을 조합하여 더욱 복잡한 페이지를 만드는 실험을 시작할 수 있습니다. 제목, 몇 개의 문단 및 다른 리소스로 연결되는 이미지로 구성된 자체 HTML 페이지를 만들어보세요.
HTML 세계에서는 태그를 아는 것이 시작일 뿐입니다. 이건 마치 키보드에서 좋아하는 키가 어디에 있는지 아는 것과 같습니다. 다음 강의에서는 CSS에 대해 알아보며 이 요소들을 스타일링하고 의도에 맞는 모양을 갖추는 법을 배울 것입니다. 그 전까지는 계속 실험하시고, "후드 아래를 살펴보세요"라는 표현이 HTML 작업을 설명하는 데 아주 적합하다는 것을 기억하세요.
이 간단하지만 풍부한 강의의 막을 내리도록 하겠습니다. HTML이 웹 페이지의 중심이라는 것을 이해하셨으면 좋겠습니다. 이제 브라우저가 이해할 수 있는 코드를 작성하여 웹 개발의 첫 걸음을 내딛으세요!
GO TO FULL VERSION