HTML이란 무엇인가?
HTML(HyperText Markup Language)은 웹페이지를 만들기 위한 기본 언어입니다.
HTML은 웹페이지의 구조를 정의하고, 다양한 콘텐츠를 표시하는 데 사용됩니다.
이 콘텐츠는 텍스트, 이미지, 비디오, 링크 등 여러 가지가 될 수 있습니다. 모든 웹사이트는 HTML로 시작되며, 다른 기술(CSS, JavaScript)과 결합하여 완성된 웹사이트가 만들어집니다.
이제까지 배운 HTML의 핵심 개념들을 다시 한 번 정리해보겠습니다!
HTML 문서의 기본 구조
모든 HTML 문서는 기본적인 구조를 가지고 있습니다. 이 구조는 웹페이지의 뼈대와 같습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>웹페이지 제목</title>
</head>
<body>
<!-- 여기에 웹페이지의 내용이 들어갑니다 -->
</body>
</html>주요 태그 설명
- <!DOCTYPE html>: HTML5 문서를 선언하는 태그입니다.
- <html>: 웹페이지 전체를 감싸는 태그로, HTML 문서의 시작과 끝을 나타냅니다.
- <head>: 메타데이터, 제목, 스타일 정보 등을 포함하는 부분입니다.
- <meta charset="UTF-8">: 문서의 문자 인코딩을 설정하는 태그로, 일반적으로 UTF-8을 사용합니다.
- <title>: 브라우저 탭에 표시될 페이지 제목을 설정합니다.
- <body>: 실제 웹페이지의 콘텐츠(텍스트, 이미지 등)가 들어가는 부분입니다.
HTML 기본 요소 정리
1. 제목 (Heading)
HTML에서는 <h1>부터 <h6>까지의 태그로 제목을 설정합니다. <h1>은 가장 중요한 제목, <h6>은 가장 덜 중요한 제목입니다.
<h1>가장 큰 제목</h1>
<h2>그 다음으로 큰 제목</h2>2. 단락 (Paragraph)
문단을 만들 때는 <p> 태그를 사용합니다. 단락은 텍스트를 구분해 깔끔하게 나눕니다.
<p>이것은 단락입니다.</p>3. 이미지 (Image)
이미지를 삽입할 때는 <img> 태그를 사용합니다. 이때 src 속성에 이미지 경로를 지정해야 합니다.
<img src="이미지경로.jpg" alt="이미지 설명">4. 링크 (Link)
링크를 만들 때는 <a> 태그를 사용하고, href 속성에 이동할 URL을 넣습니다.
<a href="https://example.com">이 링크를 클릭하세요</a>5. 줄 바꿈 (Break Line)
HTML은 기본적으로 줄 바꿈이 적용되지 않습니다. 줄 바꿈을 할 때는 <br> 태그를 사용합니다.
<p>첫 번째 줄<br>두 번째 줄</p>6. 리스트 (List)
HTML에서 리스트는 순서가 있는 리스트(<ol>)와 순서가 없는 리스트(<ul>)로 나눌 수 있습니다.
<ol>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
</ol>
<ul>
<li>항목 1</li>
<li>항목 2</li>
</ul>HTML 레이아웃 구성 요소
HTML에서 레이아웃을 구성하는 데 자주 사용되는 태그들이 있습니다.
1. <div> 태그
<div> 태그는 블록 레벨 요소로, 여러 콘텐츠를 그룹화할 때 사용됩니다. CSS와 함께 사용해 스타일을 적용하는 데 매우 유용합니다.
<div>
<h1>제목</h1>
<p>본문 내용</p>
</div>2. <span> 태그
<span> 태그는 인라인 요소로, 텍스트의 특정 부분만 스타일을 적용하거나 그룹화할 때 사용됩니다.
<p>이 텍스트는 <span>강조된 부분</span>입니다.</p>HTML에서 자주 사용하는 메타 태그
1. <meta charset="UTF-8">
문서가 어떤 인코딩 방식을 사용할지를 지정하는 태그입니다. 일반적으로 UTF-8을 사용하여 한글을 포함한 다양한 문자를 지원합니다.
2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일 기기에서 웹페이지가 적절한 크기로 표시되도록 하는 메타 태그입니다. 이 태그는 반응형 디자인에서 매우 중요합니다.
HTML의 확장과 CSS, JavaScript
HTML은 기본적으로 웹페이지의 구조를 담당합니다. 이 구조에 스타일을 추가하는 것이 CSS, 그리고 기능을 추가하는 것이 JavaScript입니다.
- CSS: 웹페이지의 시각적인 스타일(글꼴, 색상, 레이아웃 등)을 정의합니다.
- JavaScript: 웹페이지에 동적인 기능(버튼 클릭 시 이벤트 발생 등)을 추가합니다.
HTML과 CSS, JavaScript를 함께 사용하면 더욱 풍부하고 사용하기 편한 웹사이트를 만들 수 있습니다.
HTML은 웹 개발의 가장 기초적인 언어입니다. 이제까지 배운 태그들과 기본 구조는 웹 개발을 시작하는 데 필수적인 요소들입니다. HTML을 잘 이해하고 활용하면, CSS와 JavaScript와 결합하여 멋진 웹페이지를 만들 수 있습니다.
HTML은 처음에는 간단해 보이지만, 다양한 태그와 기능들을 활용하여 점점 복잡한 웹사이트를 만들 수 있습니다. 꾸준히 연습하고 익히면서 웹 개발의 기초를 다져보세요!
구독!! 공감과 댓글은 저에게 큰 힘이 됩니다.
Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.
Tester Share [테스터쉐어] - Google Play 앱
Tester Share로 Google Play 앱 등록을 단순화하세요.
play.google.com
'Web Publishing > HTML' 카테고리의 다른 글
| HTML 코딩을 빠르게 만드는 필수 기능!:Emmet 추가 고급사용법 (0) | 2024.09.24 |
|---|---|
| HTML 코딩을 빠르게 만드는 필수 기능!:Emmet 사용법 (1) | 2024.09.24 |
| VS Code에서 HTML 기본 코드 자동 완성하는 방법 (1) | 2024.09.23 |
| HTML 영역 나누기 - <div>와 <span> 태그 활용하기 (1) | 2024.09.23 |
| HTML 이미지 태그 - 웹페이지에 이미지 추가하는 방법 (2) | 2024.09.23 |
