0. HTML 시작 전, 꼭 알아야 할 기본 구성 요소
5년 전, 6년 전쯤 개발자 공부를 포기했던 HTML…
하지만 이번엔 저번과는 다르다.
“죽기 아니면 개발자다!” 라는 각오로,
어떻게든 끝까지 해내고야 말것이다!
공부하면서 정리도 하고, 블로그에도 포스팅하면서
내 것으로 만들도록 해야겠다. (할 게 점점 많아져서 부담도 되지만… 😅)
1. HTML이란?
HTML은 웹페이지를 구성하는 언어.
HTML을 통해 텍스트, 이미지, 버튼, 링크 등 다양한 요소 생성 가능.
본격적으로 코딩하기 전에,
HTML 문법을 구성하는 기본 요소 4가지부터 짚고 가!
1.1 태그
웹페이지에서 보여지는 각종 요소들을 정의하는 단위
HTML의 가장 작은 구성요소
태그는 < > 꺾쇠 괄호 안에 태그 이름을 넣는 형식으로 사용
예시:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>나의 첫 번째 웹페이지</p>
</body>
</html>위 코드에서 <html>, <head>, <title>, <body>, <p> 등이 모두 태그라 한다
그리고 </title>, </p> 같이 슬래시(/)가 붙은 태그는 종료 태그라고 부른다.
.
1.2. 속성
태그에 기능이나 옵션을 부여하는 역할
태그만으로는 표현할 수 없는 추가 정보나 기능을 부여할 때 사용
형식:
<html lang="en">
- html → 태그
- lang → 속성명
- "en" → 속성값 (영어라는 뜻)
이 코드의 의미는 “이 HTML 문서는 영어를 사용하는 페이지입니다”라는 의미
💡 주의
- 속성은 반드시 태그와 함께 사용
- 속성값은 큰따옴표(")사이에 작성.
- 속성은 여러 개 사용이 가
1.3. 문법
HTML 문법은 태그 + 속성 + 콘텐츠(내용)으로 구성
문법은 크게 콘텐츠가 있는 문법과 콘텐츠가 없는 문법으로 구분
- 콘텐츠가 있는 문법
- 예) <title>Document</tilte>
- <title>: 시작 태그
- </title>: 종료 태그
- 문서 제목: 콘텐츠
- 이 세 가지를 합쳐서 하나의 요소(element) 라고 읽
- 예) <title>Document</tilte>
- 콘텐츠가 없는 문법
- 예<br>
- <br> 태그는 줄바꿈을 의미
- 콘텐츠가 없기 때문에 종료 태그 없이 시작 태그만 사용
- 이런 태그를 빈 태그(empty tag) 또는 단일 태그라고 읽음
- 예<br>
1.4. 주석
코드에 설명이나 메모를 남기고 싶을 때 사용
웹 브라우저에서는 표시되지 않기 때문에
자신이나 다른 개발자들이 코드이해를 도와주기 위해 사용
*해당 문서는 김기수 님께서 작성하신 HTML+CSS+자바스크립트 책을 읽고 이해한대로 HTML을 요약한 정리입니다.
본 문서는 상업적인 목적으로 사용이 불가능 함을 고지 합니다. (개인 공부를 남기기 위한 목적임을 명백히 고지 합니다.)
'프로그램 언어 > HTML' 카테고리의 다른 글
| [HTML] 6. 목록 만들기 (7) | 2025.08.02 |
|---|---|
| [HTML] 5. 그룹 짓기 (11) | 2025.08.02 |
| [HTML] 4. 텍스트 작성하기 (14) | 2025.08.02 |
| [HTML] 3. HTML의 특징 파악하기 (4) | 2025.08.02 |
| [HTML] 2. HTML의 기본구조 (10) | 2025.08.02 |