반응형
안녕하세요! HTML이 뭔지 전혀 모르시나요? 걱정하지 마세요. 이 글에서는 HTML이 무엇인지부터 시작해서 실제로 간단한 웹페이지를 만드는 방법까지 아주 쉽게 설명해 드릴게요. 이 글을 다 읽으면 HTML의 기본 개념을 확실히 이해하실 수 있을 거예요!
1. HTML이란 정확히 무엇인가요?
쉬운 비유: HTML은 집을 짓는 설계도와 같아요. 집의 방이 어디에 있고, 문과 창문은 어디에 배치할지 알려주는 설계도처럼, HTML은 웹페이지의 구조를 알려주는 언어예요.
HTML은 HyperText Markup Language의 약자로, 웹페이지를 만들기 위한 기본 언어입니다. 여기서:
- HyperText는 웹페이지에서 다른 페이지로 이동할 수 있는 링크를 의미해요.
- Markup은 텍스트에 특별한 표시(태그)를 해서 그 텍스트가 어떻게 보여질지 지정한다는 뜻이에요.
- Language는 말 그대로 언어를 의미합니다.
간단히 말해, HTML은 웹 브라우저(인터넷 익스플로러, 크롬, 사파리 등)에게 "이 텍스트는 제목이야", "이 부분은 단락이야", "이건 링크야" 라고 알려주는 언어입니다.
2. HTML은 어떻게 작동하나요?
HTML은 태그(Tag)라는 것을 사용합니다. 태그는 꺾쇠 괄호(<>)로 둘러싸인 단어나 문자로, 웹 브라우저에게 내용을 어떻게 표시할지 지시합니다.
태그의 기본 구조: 대부분의 HTML 태그는 시작 태그와 종료 태그로 구성됩니다.
시작 태그: <태그이름>
종료 태그: </태그이름>
두 태그 사이에 내용이 들어갑니다.
<p>이것은 단락입니다.</p>
위 코드에서:
<p>는 시작 태그(단락을 시작한다는 의미)</p>는 종료 태그(단락이 끝난다는 의미)- "이것은 단락입니다."는 내용
웹 브라우저는 이 코드를 해석해서 단락으로 표시합니다.
3. HTML 문서의 기본 구조
모든 HTML 문서는 아래와 같은 기본 구조를 가집니다:
<!DOCTYPE html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>웹페이지 내용의 큰 제목</h1>
<p>웹페이지의 내용이 여기에 들어갑니다.</p>
</body>
</html>
<html>
<head>
<title>페이지 제목</title>
</head>
<body>
<h1>웹페이지 내용의 큰 제목</h1>
<p>웹페이지의 내용이 여기에 들어갑니다.</p>
</body>
</html>
이 구조에서 각 부분의 역할:
<!DOCTYPE html>: 이 문서가 HTML5 문서임을 브라우저에게 알려줍니다.<html>: HTML 문서의 시작과 끝을 나타냅니다.<head>: 웹페이지에 대한 정보(메타데이터)를 포함합니다. 페이지에 직접 보이지는 않습니다.<title>: 브라우저 탭에 표시되는 웹페이지의 제목을 정의합니다.<body>: 웹페이지에 실제로 보이는 모든 내용(텍스트, 이미지, 링크 등)이 여기에 들어갑니다.
4. 자주 사용하는 HTML 태그 알아보기
HTML에는 많은 태그가 있지만, 가장 기본적이고 자주 사용하는 태그들을 알아봅시다:
| 태그 | 설명 | 예시 |
| <h1> ~ <h6> | 제목 태그 (h1이 가장 크고 h6이 가장 작음) | <h1>가장 큰 제목</h1> |
| <p> | 단락(문단) 태그 | <p>이것은 단락입니다.</p> |
| <a> | 링크 태그 (href 속성에 이동할 주소 지정) | 구글로 이동 |
| <img> | 이미지 태그 (src 속성에 이미지 경로 지정) | <img src="사진.jpg" alt="강아지 사진"> |
| <ul>, <ol>, <li> | 목록 태그 (ul: 순서없는 목록, ol: 순서있는 목록, li: 목록 항목) | <ul> |
| <li>첫 번째 항목</li> | ||
| <li>두 번째 항목</li> | ||
| </ul> | ||
| <div> | 내용을 묶는 컨테이너 태그 (구역 나누기) | <div>여기에 여러 내용을 넣을 수 있어요</div> |
반응형