해당 학습 내용은 부스트캠프 - 웹 UI 개발 강의를 기본으로 정리한 기록입니다.
1. 태그의 중첩
HTML에서 중첩(Nesting)은 태그 안에 또 다른 태그를 포함하는 구조를 의미한다.
이를 통해 부모 태그 – 자식 태그 관계가 형성된다.
중첩된 태그는 반드시 부모 태그의 범위를 벗어나면 안 된다.
[잘못된 태그 선언]
<h1>Hello, <i>HTML</h1></i>
[올바른 태그 선언]
<h1>Hello, <i>HTML</i></h1>
2. 빈 태그 (Void Elements)
HTML 태그는 보통 시작 태그 + 종료 태그 한 쌍으로 이루어져 있으며,
그 사이의 내용까지 포함하여 요소(element)라고 부른다.
단, 몇몇 태그는 종료 태그 없이 단독으로 사용되는데 이를 빈 태그(Void element)라고 한다.
이들은 자체적으로 콘텐츠를 포함하지 않지만, 속성을 통해 화면에 표시되거나 특정 기능을 수행한다.
이전에 작성한 HTML 이해하기 (1) 게시글에서 간단히 언급한 내용의 연장선이다.
1. HTML 이해하기 (1)
해당 학습 내용은 부스트캠프 - 웹 UI 개발 강의를 기본으로 정리한 기록입니다. 1. HTML 이란?HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어로, 모든 웹의 기초가 되는 언어
jignonne.tistory.com
[빈 태그의 특징]
- 내용은 비어 있지만 속성을 통해 의미나 기능을 갖는다
- 화면에 직접 무언가를 그리거나(replacement), 화면에 출력되지 않아도 특정 역할을 수행하는 경우도 있다.
Replacement 태그란?
<img /> 처럼 실제 내용을 브라우저가 대신 그려주는 태그를 의미한다.
콘텐츠가 없기 때문에 브라우저가 스스로 화면에 표현을 대체하여 그려주는 방식이다.
예시:
<br>
<img src="" >
<input type="" >
모든 빈 태그가 replacement 태그인 것은 아니다.
예를 들어 위의 예시와 같이 <br />처럼 화면에 직접 콘텐츠를 출력하지 않지만
문서 구조 내에서 중요한 기능을 담당하는 빈 태그도 존재한다.
3. 공백
HTML에서의 공백 처리는 일반 텍스트와 다르게 동작한다.
브라우저는 기본적으로 두 칸 이상의 공백, 여러 개의 개행(엔터)을 모두 하나의 공백으로 처리한다.
예시코드:
<h1>Hello, HTML</h1>
<h1>Hello, HTML</h1>
<h1>
Hello,
HTML
</h1>
위의 세 코드는 모두 다음과 같이 동일하게 출력된다.
Hello, HTML
Hello, HTML
Hello, HTML
브라우저는 연속된 공백과 줄바꿈을 시각적으로 모두 하나의 공백으로 합치기 때문에
위 세가지 모두 같은 텍스트가 화면에 나타나게 된다.
이 규칙은 white-space collapsing 이라고 한다.
[공백 처리 방식이 중요한 이유]
텍스트의 종류나 목적에 따라 동일한 줄바꿈 규칙을 적용할 필요는 없다.
중국어 뉴스 기사, 서정적인 시, 코드 블록, 가사처럼
문서 성격에 따라 줄바꿈·공백 유지 여부가 달라지기 때문이다.
HTML에서는 특별한 처리를 하지 않으면 줄바꿈이 적용되지 않으며,
줄바꿈을 제어하기 위한 CSS 속성과 HTML 요소들이 별도로 존재한다.
[줄바꿈을 적용하는 가장 간단한 방법] : <br>
공백과 개행을 그대로 유지하고 싶다면 별도의 처리 없이 작성해서는 적용되지 않으며,
가장 단순한 방법은 강제 줄바꿈 요소인 <br>을 사용하는 것이다.
<p>Hello,<br>HTML</p>
Hello,
HTML
이 방식은 단순한 개행이 필요할 때 가장 직관적으로 사용할 수 있다.
참고 문서 : How to Change Default Text Wraping with HTML and CSS
How to Change Default Text Wrapping with HTML and CSS
Unlike paper, web pages can almost infinitely extend sideways. As much as impressive that is, it's not something we really need while reading. Browsers
www.hongkiat.com
4. HTML 주석(Comment Tags)
HTML 주석은 브라우저 화면에 표시되지 않고,
개발자가 코드 안에서 메모를 남기거나 특정 코드를 임시로 비활성화할 때 사용하는 구문이다.
브라우저는 주석으로 처리된 영역을 해석하지 않고 건너뛴다
다음과 같이 작성한다:
<!-- 여기에 작성되는 내용들은 모두 주석 처리가 됩니다. -->
<!-- 주석은 여러 줄로 작성할 수도 있습니다.
<h1>Hello, HTML</h1>
위 <h1>태그는 브라우저가 해석하지 않습니다.
-->
주석은 <!-- 로 시작하고 --> 로 종료되며,
HTML 문서에서 구조를 구분하거나 설명을 추가할 때 널리 사용된다.
[주석을 사용하는 주요 목적]
- 코드 설명, 의도 기록
- 특정 코드 블록 임시 비활성화
- 협업 시 팀원에게 전달해야 할 메모 작성
- 테스트용 요소를 잠시 숨길 때
참고 문서 : HTML comment tag
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
5. 문서의 기본 구조 ⭐️⭐️
웹 페이지를 만들기 위해 가장 먼저 이해해야 하는 내용은 HTML 문서의 기본 구조이다.
브라우저는 이 구조를 기반으로 문서의 버전, 제목, 기본 정보, 콘텐츠를 해석한다.
따라서 문서 구조를 올바르게 작성하는 것이 매우 중요하다.
[HTML 기본 구조]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML</title>
</head>
<body>
<h1>Hello, HTML</h1>
</body>
</html>
HTML 문서는 크게 두 부분으로 나누어 이해한다.
- 문서 타입 정의(Doctype 선언)
- <html> 요소
1. 문서타입 정의 (DOCTYPE)
해당 문서가 어떤 HTML 버전으로 기반으로 작성됐는지 브라우저에게 알려주는 선언문이며,
반드시 문서 최상단에 위치해야한다.
HTML 5 문서에서는 다음 한줄로 선언이 끝난다.
<!DOCTYPE html>
HTML5에서는 더 이상 복잡한 문서 타입 정의를 사용하지 않으며,
현대 브라우저에서 일관된 렌더링을 위한 기본 선언으로 이해하면 된다.
참고 문서 : HTML <!DOCTYPE> Declaration
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
2. <html> 요소
DOCTYPE 선언 아래에는 문서 전체를 감싸는 <html> 요소가 온다.
이 요소는 HTML 문서의 루트(root) 요소이며,
자식 요소로는 반드시 <head>와 <body>가 위치한다.
<html lang="ko">
lang 속성을 통해 문서의 사용 언어를 설정한다.
검색엔진·스크린리더·브라우저가 문서를 올바르게 처리하는 데 중요한 정보다.
참고 문서 : HTML <html> Tag
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
3. <head> 요소
<head> 안의 내용은 브라우저 화면에 직접 표시되지 않는다.
대신 문서의 메타 정보, 스타일, 스크립트, 외부 파일 링크 등을 선언하는 영역이다.
대표적인 태그 예시:
- <meta> : 문서 정보, 인코딩, 반응형 설정 등
- <title> : 브라우저 탭에 표시되는 문서 제목
- <link> : CSS 파일 연결
- <script> : JS 파일 연결
<meta charset="UTF-8">
charset 속성을 통해 문서의 문자 인코딩 방식을 지정한다.
대부분의 현대 웹 문서는 UTF-8을 사용한다.
참고문서 : HTML <head> Tag, HTML <meta> Tag
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
4. <body> 요소
사용자에게 화면으로 보이는 모든 콘텐츠가 <body> 내부에 들어간다.
텍스트, 이미지, 버튼, 입력 폼, 구조 태그 등 대부분의 HTML 요소가 여기에 포함된다.
참고문서 : HTML <body> Tag
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'web study > HTML&CSS' 카테고리의 다른 글
| 1. HTML 이해하기 (1) (0) | 2025.11.21 |
|---|