[기초부터 완성까지, 프런트엔드] 2장. HTML과 CSS (1)

2장. HTML과 CSS (1)

Posted by : hyerin on Feb 10, 2023

HTML과 CSS는 웹페이지를 만들 때, 가장 대중적으로 사용되는 핵심 언어이다.
현재 개발 트렌드에서는 HTML나 CSS에서 수행하던 일이 자바스크립트의 영역으로 흡수되어 JSX나 styled-components, emotion과 같은 기술들을 사용해 해당 작업을 대신 하기도 하지만, 이런 기술들의 기반인 아이디어나 문법은 결국 HTML과 CSS이므로 프론트엔드 개발을 위해 HTML과 CSS 학습은 필수이다.

HTML

HTML이란?

HTML은 Hyper Text Markup Language의 약자로, 마크업 구성에 가장 많이 사용되는 언어이다. 현재 HTML의 표준은 W3C(World Wide Web Consortium)와 WHATWG가 주도적으로 작성한다.

WHATWG ?
애플, 구글, 모질라, 마이크로소프트 각 브라우저를 개발하는 벤더사들이 모여 웹 표준을 만드는 조직이다.

2019년 W3C, WHATWG 두 조직이 합의하면서 현재 HTML의 표준은 과거와 달리 살아 있는 표준 (Living Standard) 형태로 발전했다.
살아 있는 표준 (Living Standard)은 웹 개발자, 벤더사, 이해 당사자 등에게 피드백을 받으면 지속해서 업데이트 되는 표준을 의미한다.
따라서 계속해서 Living Standard에 관심을 갖고 어떤 부분이 변화하는지 살펴보아야 한다.

HTML 구성 요소

HTML은 다른 언어들보다 느슨한 문법을 가지고 있다. 따라서 구성에 맞지 않게 요소를 작성하더라도 에러 없이 요소가 제대로 렌더링되고, 에러 또한 노출되지 않는다.
표준을 준수하지 않고 코드를 작성하다 보면, 예상하지 못한 문제가 발생해 유지 보수 비용이 커지므로 개발자가 이런 특성을 항상 주의하며 코드를 작성해야 한다.

HTML 구성요소는 크게 Content(내용), Start Tag(시작 태그), End Tag(종료 태그)로 나뉘며, 이 세 가지 구조를 합쳐 Element(요소)라고 부른다.

Start Tag와 End Tag

단어 뜻 그대로 요소의 시작과 끝을 의미하는 태그이다.
태그는 <>로 구성되며, End Tag는 /가 포함된다.
대부분의 요소는 <div></div>, <article></article>처럼 Start Tag와 End Tag를 쌍으로 갖는다.

Void 요소

그러나 <input>이나 <meta>, <link>처럼 End Tag가 없는 태그들도 있다. 이런 요소를 Void 요소라고 부른다.
Void 요소는 End Tag를 작성하지 않아도 일반 요소처럼 작동하며, Start Tag 내에 /를 넣어 <input />처럼 작성하기도 한다. 이렇게 작성하는 방식을 Self-closing이라고 부른다.

Content와 Element

Content는 Start Tag와 End Tag 사이의 내용을 의미한다.
Element (요소)는 Start Tag, End Tag, Content를 모두 합친 하나를 의미한다.

Attributes (속성)

속성(Attributes)은 태그의 동작을 제어하도록 사용자가 지정하는 값을 의미한다.

<!-- 값을 넣지 않고 속성을 지정하는 방법 -->
<input disabled />

<!-- 따옴표 없이 값을 넣어 속성을 지정하는 방법 -->
<input value="hello" />

<!-- 따옴표로 값을 넣거 속성을 지정하는 방법 -->
<input type="checkbox" />

id나 class, style처럼 모든 요소가 사용할 수 있는 속성도 있지만, checked나 autoplay처럼 HTML 요소의 종류에 따라 사용하는 속성이 정해지기도 한다.

HTML 요소 분류하기

첫 번째 분류 방법은 HTML4.01에서 사용하던 방법이며, 두 번째 분류 방법은 HTML5에서 사용하는 방식이다.

인라인 요소와 블록 요소

`인라인 (inline) 요소`

태그가 할당된 텍스트나 이미지의 크기에 맞는 필요한 공간만을 차지한다.
높이나 너비를 지정할 수 없으며, 줄 내부 어디서든 시작한다.
<span>, <button>, <img> 등이 대표적인 인라인 요소이다.

`블록 (block) 요소`

태그가 시작되면 이전 요소와 상관없이 개행해 새로운 줄에서 시작한다.
너비는 좌우 양쪽으로 부모 요소의 100%를 차지하며, 왼쪽에서부터 오른쪽으로 확장된다.
<div>, <article>, <form>과 같은 요소들이 대표적인 블록 요소이다.

블록 요소는 인라인 요소와 블록 요소 모두를 포함하지만, 인라인 요소는 인라인 요소만을 포함할 수 있다.

컨텐츠 모델 (Contents Model)

HTML5에서는 요소가 어떤 컨텐츠를 표현할 수 있는지, 어떤 하위 요소를 가지는지에 따라 Contents Model (컨텐츠 모델)로 분류한다.
요소는 어떤 그룹에도 속하지 않거나, 여러 그룹에 동시에 속한다.

`Metadata Content`

Metadata Content는 나머지 컨텐츠의 표시나 동작을 설명하거나, 문서와 다른 문서와의 관계를 설정하는 요소이다.

<base>, <link>, <meta>, <nonscript>, <script>, <style>, <template>, <title>

`Flow Content`

본문에 사용되는 대부분의 요소는 Flow Content로 분류된다.

<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi> (en-US), <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math> (en-US), <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture> (en-US), <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr>

`Sectioning Content`

Sectioning Content는 아웃라인을 정의하며, 각 Heading(제목) 요소와 Footer(바닥글) 요소의 범위(Scope)를 정한다.

<article>, <aside>, <nav>, <section>

아웃라인 ?
HTML5에서 등장한 개념으로, 웹 사이트의 내용을 명확하게 구분하도록 추가된 문서의 구조를 정의하는 알고리즘이다.

`Phrasing Content`

Phrasing Content는 문서 내의 텍스트를 의미하며, 단락을 형성하는 요소이다.

<a>, <abbr>, <area>, <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>, text

`Heading Content`

섹션의 헤더를 정의하는 요소이다.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

`Embedded Content`

외부의 자원을 가져오거나 삽입할 때 사용하는 요소이다.

<audio>, <canvas>, <embed />, <iframe>, <img />, <math>, <object>, <picture>, <svg>, <video>

`Interactive Content`

유저와 상호작용을 위해 특별히 설계된 요소이다.

<audio>, <canvas>, <embed />, <iframe>, <img />, <math>, <object>, <picture>, <svg>, <video>

HTML 문서 골격 만들기

골격을 작성하는 것은 문서의 성격과 정보를 정확하게 나타내며 정상적인 페이지 노출에 중요한 역할을 한다.

`DOCTYPE`

<DOCTYPE>은 문서의 타입을 지정한다.
DOCTYPE을 html로 지정하면 HTML5로 작성된 문서임을 나타낸다.
모던 브라우저에서는 DOCTYPE을 명시하지 않아도 HTML5로 작성된 문서로 인식하지만, IE9 이전 버전의 브라우저는 다른 형태의 문서로 인식한다. 따라서 일관된 렌더링을 위해 DOCTYPE을 반드시 명시하는 것이 중요하다.

<!DOCTYPE html>

`html`

<html> 태그는 문서의 루트 지점을 명시하는 태그이다. 이 태그를 작성할 때 lang 속성을 해당 서비스 국가에 맞게 넣는 것이 중요하다.
lang 속성을 지정해 이 문서의 언어가 스크린 리더 등의 장치에서 일관되게 판단되도록 해야 한다.
다국어를 지원하는 서비스일 경우 언어가 변경될 때 lang 속성도 함께 변경해야 한다.

<!DOCTYPE html>
<html lang="ko"></html>

`head`

<head> 태그는 문서의 제목과 문서의 인코딩 형식 등을 지정한다.

<title> : <title> 요소는 문서의 이름(제목)을 나타낸다. 문서 당 한 개의 제목 요소가 있어야 하며, 사용자 북마크나 검색 엔진에서 식별하는 기준으로 사용된다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>문서 제목!</title>
  </head>
</html>

<meta> : <meta> 태그에서는 메타 데이터를 다룬다. 메타 데이터는 데이터에 대한 데이터, 어떤 목적으로 만들어진 데이터를 의미하며 주로 기계가 읽고 이해하는 정보이다. <meta> 태그를 통해 인코딩 방식, 뷰포트 지정 뿐만 아니라 많은 작업을 수행할 수 있다.
- charset : 문서의 인코딩 방식을 지정한다. 인코딩 방식을 지정하지 않으면 문자 깨짐 현상이 발생할 수 있다.
```
<head>
  <meta charset="UTF-8" />
</head>
```
- http-equiv : http-equiv와 content 속성을 이용해 IE의 렌더링 사양을 좀 더 세밀하게 조절한다. X-UA-Compatible 값을 IE=Edge로 지정한다면 렌더링 시 최신 Edge 모드를 사용한다.
```
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>
```

`body`

<body> 태그에는 문서의 내용이 들어가며, 일반적으로 <head> 태그 다음에 작성한다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>문서 제목!</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  </head>
  <body>
    <!-- 문서 내용 -->
  </body>
</html>

시맨틱 (Semantic)

Semantic(시맨틱)은 ‘의미의’, ‘의미론적인’으로 해석된다. 즉 의미에 맞는 태그를 사용해 문서를 작성하는 것을 말한다.
예를 들어, 특별한 의미가 없는 <div> 태그 대신 <section>, <article>, <footer>, <nav>, <aside>처럼 의미 있는 태그를 상황에 따라 사용하는 것이다.
시맨틱하게 HTML을 작성하면 요소에 쉽게 의미를 부여할 수 있다. 각 요소가 자체적인 의미를 가지기 때문에 개발자 입장에서 가독성이 높아지고 유지 보수가 쉬워진다. 또한 장치에서 콘텐츠의 계층 구조를 더 쉽게 이해할 수 있으며, 검색 엔진은 HTML의 계층 구조에 따라 키워드들의 중요도를 파악하므로 시맨틱하게 작성된 HTML 구조는 크롤러에 더 구체화한 정보를 제공할 수 있게 된다.

크롤러 ?
> 웹 크롤러 (web crawler)란 구글 등의 검색 엔진이 이용하는 프로그램의 총칭이다.
웹 페이지의 링크를 따라 웹 사이트를 검출하고, 찾은 사이트 상에 있는 각종 파일을 수집하여 데이터 베이스에 축적한다. 모아진 데이터는 웹 페이지마다 인덱스화 되어 검색 엔진의 알고리즘에 따라 웹 페이지의 순위부여가 이루어진다.

시맨틱하게 HTML을 작성하기 위해서 태그들이 만들어진 목적을 이해하고 그에 맞게 사용해야 한다.

<h1> ~ <h6> : 각 섹션의 제목을 나타낸다. 각 제목의 구획 단계는 <h1>이 가장 높고, <h6>이 가장 낮다.

<h1>[속보] 진도 4.0 지진 발생</h1>

<header> : 제목이나 대표 이미지가 들어가는 요소이다. <body> 하위로 작성되면 웹 페이지의 전체 헤더를 정의하는 영역이며, <article> 또는 <section> 등 Sectioning Content 하위로 사용되면 해당 영역의 헤더를 의미한다. 일반적으로 <h1>, <h2> 등의 요소나 로고 등을 포함한다.

<article>
  <header>
    <h1>[속보] 진도 4.0 지진 발생</h1>
    <p>oo일보 oo 기자 작성</p>
  </header>
  <p>11시 30분 어디에 진도 4.0 지진이 발생했다...</p>
</article>

<footer> : <header> 요소와 마찬가지로 전체 문서 또는 Sectioning Content의 바닥글로 쓰인다. 작성자나 관련 문서 링크, 라이선스, 색인 등의 데이터가 들어간다.

<article>
  <h1>[속보] 진도 4.0 지진 발생</h1>
  <p>11시 30분 어디에 진도 4.0 지진이 발생했다...</p>
  <footer>
    <p>기자 : oo일보</p>
    <p>모든 컨텐츠(기사)는 저작권법의 보호를 받은 바...</p>
  </footer>
</article>

<main> : 페이지의 컨텐츠 영역을 의미한다. <main>은 페이지당 한 번 사용하며, <body> 아래 직접 추가한다. 이 요소는 다른 요소 내에 중첩되지 않아야 한다.

<body>
  <header>
    <h1>[속보] 진도 4.0 지진 발생</h1>
    <nav></nav>
  </header>
  <main>
    <article>...</article>
    <article>...</article>
  </main>
  <footer>...</footer>
</body>

<article> : 요소 자체가 하나의 의미있는 컨텐츠 블록 영역이다. 즉 이 요소만으로 단일 게시물을 나타낼 때 사용한다. 이 요소의 내용은 독립적으로 배포하거나 재사용된다. 블로그 항목이나 게시물, 기사, 위젯 등에 사용된다.
<section> : <article>과 유사하지만 페이지의 단일 부분을 그룹화하는 데에 유용한 요소이다. 예를 들어 기사의 헤드라인을 모으거나 각 블로그의 피드 정보가 나타나는 영역으로 사용된다. 요소의 컨텐츠를 함께 묶는 것이 합리적일 때 <article> 대신 <section> 요소를 사용하는 것이 좋지만, <section>은 일반 컨테이너 요소가 아니기 때문에 단순 스타일링을 위한 요소로 사용할 때는 <div>를 사용하는 것을 권장한다.

<h1>결혼식 식순</h1>
<section>
  <h2>식순</h2>
  <p>개식사</p>
  <p>주례</p>
  <p>...</p>
  <section>
    <section>
      <h2>피로연</h2>
      <p>...</p>
    </section>
  </section>
</section>

<aside> : 기본 컨텐츠와는 직접 관련이 없지만, 간접적으로 관련된 추가 정보를 포함하는 요소이다. <nav> 요소나 광고, 인용처럼 분리된 컨텐츠를 나타낼 때 사용한다.
<nav> : 다른 페이지 또는 내 문서의 특정 영역(탐색 링크가 있는 섹션)으로 이동시키는 링크를 나타낸다.

<nav>
  <ul>
    <li><a href="/">홈</a></li>
    <li><a href="/news.html">뉴스</a></li>
  </ul>
</nav>

SEO (Search Engine Optimization)

검색 사이트의 상단에 노출시키는 것은 개발의 영역이 아닌 서비스의 인기, 마케팅과 광고의 영역이라고 생각할 수 있으나, 개발자의 몇 가지 노력으로 서비스가 적절한 키워드에 더 많이 노출되도록 할 수 있다.
이렇게 우리의 사이트를 찾기 쉽도록 개선하는 여러 노력을 검색 엔진 최적화 (SEO, Search Engine Optimization)라고 부른다. 요즘 사이트 개발에서 필수로 적용하는 방법을 살펴보자.

시맨틱하게 HTML을 작성하자

시맨틱하게 코드를 작성함으로써 검색 엔진과 크롤러는 각 영역이 어떤 의미의 정보를 담는지 기계적으로 읽을 수 있다. 페이지의 개요와 구성, 본문 등을 파악하고 키워드 등을 이해해 검색 시 사이트가 노출되는 것에 도움을 준다.

`<title>`을 놓치지 말고 적절하게 작성하자

<title>에 작성된 제목은 검색될 때 그 사이트의 이름이다. 따라서 사이트를 가장 잘 나타내는 브랜드명, 키워드를 작성하는 것이 좋다. <title>을 자주 바꾸거나 길이가 너무 길면 검색 엔진에서 불이익을 받는다.

`<meta name="description">`을 이용해 페이지 설명을 남기자

<meta> 태그의 description을 사용해 페이지에 대한 간단한 설명을 작성해야 한다.
<meta name="description" content="이 페이지에 대한 두세 문장 정도의 간단한 설명">의 형태로 작성할 수 있다. 사용자의 흥미를 유발하며 검색이 되었을 때 완전히 노출되도록 적는 것이 좋다. 이를 기준으로 이후에 검색이 될 때 키워드에 맞춰 선택된다.

`<meta charset="UTF-8 />`를 사용해 인코딩 방식을 지정하자

인코딩 방식을 지정하면 여러 브라우저에서 통일된 인코딩 방식으로 노출시키므로, <meta> 태그의 charset 속성으로 인코팅 방식을 지정하는 것이 좋다.

open graph(og), twitter 태그를 사용해 외부 사용자를 유인하자

og(open-graph) 태그는 페이스북에서 만든 프로토콜이며, 여러 상황에서 동일한 메타 정보를 쉽게 표시하도록 만들어졌다. 우리가 많이 사용하는 카카오나 네이버 또한 링크 공유 시 og 태그에 작성된 정보로 노출되며, 트위터는 자체 twitter 프로토콜을 가진다.

<meta property="og:title" content="페이지 이름" />
<meta property="og:description" content="페이지에 대한 간략한 한 두줄 설명" />

og 태그는 og:title, og:description처럼 값에 og:가 붙으며, 프로퍼티에 값을 지정한 뒤 content 프로퍼티에 값을 주어 작성한다.

< 이미지 출처 : https://www.snugarchive.com/blog/html-tags-vs-elements/ >
< 참고 : https://goodstar.tistory.com/1293 >

[기초부터 완성까지, 프런트엔드] 2장. HTML과 CSS (1)

2장. HTML과 CSS (1)

HTML

HTML이란?

HTML 구성 요소

Start Tag와 End Tag

Void 요소

Content와 Element

Attributes (속성)

HTML 요소 분류하기

인라인 요소와 블록 요소

인라인 (inline) 요소

블록 (block) 요소

컨텐츠 모델 (Contents Model)

Metadata Content

Flow Content

Sectioning Content

Phrasing Content

Heading Content

Embedded Content

Interactive Content