HTML/CSS 에센셜 | 위니북스

HTML 기본 문법

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

1. 요소(Elements) 분석

1.1 태그(Tag)

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

1.2 요소의 포함

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

Markup Validation Service

2. 빈 요소 / 셀프 크로징

닫는 태그가 없는 태그

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

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

XHTML 시절 /

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

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

XHTML에서는 self-closing 문법을 강제화했지만, 현재는 / 를 넣어서 닫아 주지 않아도 됩니다.

[Markup Validation Service]로 검사했더니, Trailing slashes directly preceded by unquoted attribute values 오류가 떠요!

HTML 속성값을 “” 없이 표기할 경우 후행 / 슬래시로 인해 오류가 발생할 수 있음을 경고하는 문구입니다. 따옴표를 사용해 잘 작성하셨다면 아래와 같이 체크 해제하시고 무시하셔도 됩니다!

Group 1637.png Group 1638.png

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>와 <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> 요소에 검은색 테두리를 적용합니다.