HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용하는 언어입니다. 이를 이해하려면 주요 용어와 개념을 알아야 합니다. 아래에서 HTML의 핵심 용어를 정리했습니다!
🔍 HTML 주요 용어와 개념
HTML은 웹 페이지의 구조를 정의하는 언어입니다. 웹 개발을 시작하기 위해 알아야 할 HTML의 기본 용어는 다음과 같습니다.
용어 | 설명 |
---|---|
태그(Tag) | HTML의 기본 구성 요소. 꺾쇠괄호(< > )로 감싸져 있으며 웹 요소를 정의합니다. |
요소(Element) | 태그와 콘텐츠를 포함한 전체 구조. 예: <태그>내용</태그> 형태입니다. |
속성(Attribute) | 태그에 추가 정보를 제공하는 키-값 쌍. 예: <태그 속성="값">내용</태그> . |
헤드(Head) | 문서의 메타정보를 정의하는 영역. <head> 태그 안에 작성됩니다. |
본문(Body) | 웹 페이지에 표시되는 주요 콘텐츠 영역. <body> 태그 안에 작성됩니다. |
HTML5 | HTML의 최신 표준 버전으로 멀티미디어와 상호작용 기능을 강화합니다. |
DOCTYPE | 문서의 HTML 버전을 정의하는 선언. 예: <!DOCTYPE html> . |
주석(Comment) | 코드 설명을 추가하는 영역으로 브라우저에 표시되지 않습니다. 예: <!-- 내용 --> . |
주요 HTML 태그 와 설명
1. 기본 구조 태그
<html>
: HTML 문서의 루트 요소로 모든 태그를 감쌉니다.<head>
: 문서의 설정 및 메타정보를 정의하는 영역입니다.<body>
: 실제로 웹 페이지에 표시되는 콘텐츠를 작성하는 영역입니다.
2. 텍스트 관련 태그
<h1>
~<h6>
: 제목을 표시하는 태그로,<h1>
이 가장 중요하고 크기가 큽니다.<p>
: 단락을 나타내는 태그로 본문 텍스트에 사용됩니다.<b>
와<strong>
: 텍스트를 굵게 표시합니다.<strong>
은 의미적으로 강조를 나타냅니다.<i>
와<em>
: 텍스트를 기울임으로 표시합니다.<em>
은 의미적 강조를 포함합니다.<br>
: 줄바꿈 태그로 텍스트를 다음 줄로 이동시킵니다.<hr>
: 수평선을 삽입합니다.
3. 링크와 이미지 태그
<a>
: 하이퍼링크를 추가하는 태그입니다.href
속성으로 링크 주소를 지정합니다.
예:<a href="https://example.com">여기를 클릭하세요</a>
.<img>
: 이미지를 삽입하는 태그입니다.src
속성으로 이미지 경로를 지정하고,alt
속성으로 대체 텍스트를 제공합니다.
예:<img src="image.jpg" alt="이미지 설명">
.
4. 리스트 태그
<ul>
: 순서 없는 리스트를 생성합니다.<ol>
: 순서 있는 리스트를 생성합니다.<li>
: 리스트 항목을 정의합니다.
예:html복사편집<ul> <li>항목 1</li> <li>항목 2</li> </ul>
5. 표 관련 태그
<table>
: 표를 생성합니다.<tr>
: 표의 행(Row)을 생성합니다.<td>
: 데이터 셀을 정의합니다.<th>
: 표의 헤더 셀을 정의합니다.
예:html복사편집<table> <tr> <th>제목 1</th> <th>제목 2</th> </tr> <tr> <td>내용 1</td> <td>내용 2</td> </tr> </table>
6. 폼 태그
<form>
: 사용자 입력을 받는 양식입니다.<input>
: 단일 입력 필드를 생성합니다.<button>
: 버튼을 생성합니다.<textarea>
: 여러 줄 텍스트 입력 필드를 생성합니다.
예:html복사편집<form> <input type="text" placeholder="이름을 입력하세요"> <button>제출</button> </form>
7. 메타정보
<meta>
: 문서의 정보(문자셋, 키워드 등)를 정의.<title>
: 웹 페이지의 제목을 정의. 브라우저 탭에 표시.
🛠️ HTML 속성(Attribute) 개념
- 정의: 태그에 추가적인 정보를 제공하는 키-값 쌍.
- 형태:
<태그 속성명="속성값">내용</태그>
- 주요 속성
id
: 고유한 식별자.class
: 여러 요소를 그룹화.style
: 인라인 스타일 지정.href
: 링크 경로.src
: 리소스 경로(이미지, 동영상 등).alt
: 대체 텍스트(이미지 사용 불가능 시 표시).
1. HTML 속성 개념
속성은 태그에 추가적인 정보를 제공하며, 항상 속성명="속성값"
형태로 작성됩니다. 주요 속성은 다음과 같습니다.
id
: 고유한 식별자를 제공합니다.class
: 여러 요소를 그룹화할 때 사용합니다.style
: 인라인 스타일을 지정합니다.href
: 링크 경로를 정의합니다.src
: 이미지나 스크립트 파일 경로를 지정합니다.alt
: 이미지를 사용할 수 없을 때 표시되는 대체 텍스트를 제공합니다.
2. HTML 문서 기본 구조
HTML 문서는 다음과 같은 기본 구조를 가집니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 기본 구조</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>HTML은 웹 페이지를 만드는 기초입니다.</p>
</body>
</html>
자주 묻는 질문
HTML 코드는 웹 브라우저에서 실행되며, 파일을 저장한 후 브라우저로 열면 실행 결과를 볼 수 있습니다.
아니요, HTML은 마크업 언어로 웹 페이지의 구조를 정의하는 데 사용됩니다. 동적인 기능은 JavaScript로 구현합니다.
HTML5는 이전 버전에 비해 멀티미디어 요소(<video>
, <audio>
등)와 인터랙티브 기능을 더 쉽게 추가할 수 있게 해줍니다.
<div>
와 <span>
의 차이는 무엇인가요? <div>
는 블록 요소로 한 줄 전체를 차지하며, 레이아웃을 구성하는 데 사용됩니다. <span>
은 인라인 요소로 텍스트의 특정 부분을 꾸밀 때 사용됩니다.
✨ HTML의 학습 팁
- 기본 구조를 이해하세요: HTML 태그는 중첩 구조로 되어 있습니다.
- 실습 중심으로 배우기: 간단한 HTML 문서를 직접 작성하고 실행해 보세요.
- CSS와 JavaScript와 함께 학습: HTML만으로는 한계가 있으므로 스타일링(CSS)과 동적 기능(JavaScript)을 함께 익히면 좋습니다.
이제 HTML의 기본 용어와 개념에 익숙해지셨나요? 😊