HTML은 요소(Elements)로 구성되어 있습니다.

1. 요소(Elements) 분석

1.1 태그(Tag)

HTML을 배운다는 것은 태그의 정의와 역할을 배우고 어떻게 사용할 것인가를 배우는 것입니다.

태그: 어떤 표시를 하기 위해 붙인 꼬리표. 웹 문서에 정보를 정의해주는 형식입니다.
기본적으로 <> 시작 태그(여는 태그)와 </> 종료 태그(닫는 태그)의 쌍으로 구성되어 있습니다.
"이 요소는 이것이다"라며 웹을 구성하는 각 요소의 역할을 정의합니다.

1.2 요소의 포함

<p>
	HTML은 요소 안에
	<strong>다른 요소</strong>가 들어갈 수 있습니다
</p>
 
<!-- 잘못 사용된 예 -->
<p>
	HTML은 요소 안에
	<strong>다른 요소가 들어갈 수 있습니다
</p>
	</strong>

<p>
	HTML은 요소 안에
	<strong>다른 요소</strong>가 들어갈 수 있습니다
</p>
 
<!-- 잘못 사용된 예 -->
<p>
	HTML은 요소 안에
	<strong>다른 요소가 들어갈 수 있습니다
</p>
	</strong>

HTML의 경우, 오류를 알려주지 않고 웹브라우저가 임의로 결과를 보여줍니다. ’웬만한 오류는 알아서 처리해준다.’가 좋게 들릴 수 있지만, 이는 예상치 못한, 의도하지 않은 화면을 초래할 수 있습니다. 이러한 문제를 방지하기 위해 마크업 검사를 습관화하는 것이 중요합니다.

Markup Validation Service

2. 빈 요소

빈 요소(Void Elements)는 닫는 태그가 없는 요소입니다.

이러한 요소는 닫는 태그가 없어도 브라우저가 정상적으로 해석할 수 있습니다.

대표적인 빈 요소

태그	설명
`<br>`	줄바꿈
`<img>`	이미지
`<input>`	입력 필드
`<hr>`	수평선
`<meta>`	메타데이터
`<link>`	외부 리소스 연결

<br />
<input type="text" />
<img src="" alt="" />

<br />
<input type="text" />
<img src="" alt="" />

XHTML에서는 self-closing 문법(/>)을 강제화했지만, 현재 HTML에서는 /를 넣지 않아도 됩니다. 그러나 Prettier와 같은 코드 포맷팅 도구들은 다양한 개발 환경과 언어 간의 호환성을 위해 여전히 빈 요소에 후행 슬래시를 자동으로 추가합니다.

3. 주석

주석은 프로그래밍 소스를 이해하기 쉽게 메모를 하거나, 특정 소스를 비활성화하는 것입니다. ("주석 처리한다"라고 표현합니다.)

<!-- 주석 -->

<!-- 주석 -->

주석의 특징

프로그램 동작에 영향을 미치지 않습니다.
나, 미래의 나, 다른 개발자를 위해 설명하는 글을 적어 둡니다.
매우 중요한 기밀 사항을 적어놓는 것은 피해야 합니다. (브라우저 개발자 도구에서 확인 가능)

개발할 때 주석은 최소한으로 남기는 것이 좋습니다! 시맨틱 태그를 사용하고 직관적인 클래스 명을 사용하여 코드만 봐도 이해되게 작성하는 것이 좋습니다. 코드로 대화하는 개발자가 되는 것이 이상적입니다. 하지만 아직 주니어 개발자라면, 실수 방지와 미래의 나와 팀원을 위해 적당한 주석을 다는 것이 필요합니다.

예시

태그의 시작과 끝을 적어놓기

이렇게 주석으로 정리해주면 중간 닫는 태그를 빠트렸을 때 오류를 체크하기 좋습니다!
이렇게 구분 지어 놓으면 나중에 컴포넌트 분할 할 때도 좋습니다

<!-- start -->
<!-- //end -->
 
<!-- header -->
<header>...생략...</header>
<!-- //header -->
 
<!-- footer-->
<footer>...생략...</footer>
<!-- //footer -->

<!-- start -->
<!-- //end -->
 
<!-- header -->
<header>...생략...</header>
<!-- //header -->
 
<!-- footer-->
<footer>...생략...</footer>
<!-- //footer -->

협업할 때

<!-- 메뉴 토글 class="active" 유/무로 제어 -->
<nav class="active">...생략...</nav>
 
<!-- #2022.02.20 4:00 업데이트 -->

<!-- 메뉴 토글 class="active" 유/무로 제어 -->
<nav class="active">...생략...</nav>
 
<!-- #2022.02.20 4:00 업데이트 -->

임시 처리

<!-- 신청기간이 아니여서 임시 주석처리
	<a href="#">신청페이지 바로가기</a>
-->

<!-- 신청기간이 아니여서 임시 주석처리
	<a href="#">신청페이지 바로가기</a>
-->

4. 태그의 관계

<html>
  <head></head>
  <body>
    <section>
      <h1>
        <strong></strong>
      </h1>
      <img />
      <div>
        <p><strong></strong></p>
        <p><strong></strong></p>
        <p><strong></strong></p>
      </div>
    </section>
  </body>
</html>

<html>
  <head></head>
  <body>
    <section>
      <h1>
        <strong></strong>
      </h1>
      <img />
      <div>
        <p><strong></strong></p>
        <p><strong></strong></p>
        <p><strong></strong></p>
      </div>
    </section>
  </body>
</html>

4.1 부모(Parent) 요소

부모 요소는 다른 요소를 포함하는 요소를 말합니다. 위 예제에서 <section> 태그는 <h1>, <img>, <div> 태그의 부모 요소입니다.

4.2 자식(Child) 요소

자식 요소는 다른 요소 내부에 직접 포함된 요소를 말합니다. 위 예제에서 <h1>, <img>, <div> 태그는 <section> 태그의 자식 요소입니다.

4.3 형제(Sibling) 요소

형제 요소는 같은 부모 요소를 가지는 요소들을 말합니다. 위 예제에서 <h1>, <img>, <div> 태그는 서로 형제 관계에 있습니다.

4.4 자손(Descendant) 요소

자손 요소는 어떤 요소의 내부에 포함된 모든 요소를 말합니다. 자식 요소뿐만 아니라 자식의 자식 요소까지 포함합니다. 위 예제에서 <strong> 태그는 <section> 태그의 자손 요소입니다.

<html>
  <head></head>
 
  <body>
    <section>
      <h1>
        <strong>제목</strong>
      </h1>
      <img src="https://weniv.link/static/img/2_chilli.svg" alt="이미지" />
      <div>
        <p><strong>단락 1</strong></p>
        <p><strong>단락 2</strong></p>
        <p><strong>단락 3</strong></p>
      </div>
    </section>
  </body>
</html>

<html>
  <head></head>
 
  <body>
    <section>
      <h1>
        <strong>제목</strong>
      </h1>
      <img src="https://weniv.link/static/img/2_chilli.svg" alt="이미지" />
      <div>
        <p><strong>단락 1</strong></p>
        <p><strong>단락 2</strong></p>
        <p><strong>단락 3</strong></p>
      </div>
    </section>
  </body>
</html>

위 예제 코드에서 요소들의 관계를 정리하면 다음과 같습니다.

<html>은 <head>와 <body>의 부모 요소입니다.
<head>와 <body>는 형제 관계에 있습니다.
<body>는 <section>의 부모 요소입니다.
<section>은 <h1>, <img>, <div>의 부모 요소입니다.
<h1>, <img>, <div>는 형제 관계에 있습니다.
<h1>은 <strong>의 부모 요소입니다.
<div>는 세 개의 <p> 요소의 부모 요소입니다.
세 개의 <p> 요소는 형제 관계에 있습니다.
각 <p> 요소는 <strong> 요소의 부모 요소입니다.

4.5 요소 간 관계의 중요성

요소 간 관계를 이해하는 것은 CSS를 사용하여 스타일을 적용할 때 특히 중요합니다. CSS 선택자를 사용하여 특정 요소를 선택하고 스타일을 적용할 수 있는데, 이때 요소 간 관계를 활용하여 더 정확하고 효율적으로 선택할 수 있습니다.

예를 들어, <section> 내부의 모든 <p> 요소에 스타일을 적용하고 싶다면 다음과 같이 자손 선택자를 사용할 수 있습니다.

section p {
  color: blue;
}

section p {
  color: blue;
}

이렇게 하면 <section> 내부에 있는 모든 <p> 요소의 글자 색상이 파란색으로 변경됩니다.

또한, 인접 형제 선택자를 사용하여 특정 요소 바로 뒤에 오는 형제 요소를 선택할 수도 있습니다.

h1 + img {
  border: 1px solid black;
}

h1 + img {
  border: 1px solid black;
}

위 예제에서는 <h1> 요소 바로 뒤에 오는 <img> 요소에 검은색 테두리를 적용합니다.

HTML/CSS 에센셜

HTML 기본 문법