Syon

Syon

Junior Backend Developer

© 2022

Dark Mode

HTML
Jan 15, 2022
  • html/css

이번 포스팅에선 HTML에 대해 알아보고자 한다.

HTML이란 무엇인가

  1. HTML은 Hyper Text Markup Language의 약어로, HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것)기능을 가진 문서를 만드는 언어이다.
  2. HTML은 구조를 설계할 때 사용하는 언어로, hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어라고 할 수 있다.


그렇다면 웹 페이지는 무엇인가

  1. 웹 페이지는 월드 와이드 웹 상에 있는 개개의 문서를 가리킨다.
  2. .gif, .jpg, .pdf와 같은 확장자 포맷이 있듯, HTML은 .htm, .html 확장자 포맷을 가지고 있다.
  3. html 문서는 단순히 텍스트 파일에 불과하고, 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View라고 하는 스크린을 통해 접하게 되는 것이다.


간단히, 웹이라고 부르는 경우가 많은데, 지금 내가 글을 적어 업로드한 이 블로그도 엄연한 웹 페이지이며, 현재 이 문서를 읽고 있다면 ‘웹 페이지를 보고있다’고 할 수 있다.
그리고 이 웹이라는 용어는 인터넷과 동의어로 쓰이는 경우가 많으나 엄격히 말해 서로 다른 개념이다.
인터넷이란 이름은 ‘네트워크의 네트워크’를 구현하여 모든 컴퓨터를 하나의 통신망 안에 연결하고자 하는 의도에서 이를 Internet이라고 처음 명명한 것에 어원을 두고 있다.
또한, 앞으로 이 마크업 언어를 숙지하는데 있어 항상 시멘틱 마크업을 목표로 나아가야 할 것이다.
시멘틱 마크업(Semantic Markup)은 웹 사이트(페이지)의 컨텐츠를 설명하는데 사용되는 마크업 언어이고, HTML은 콘텐츠의 의미를 설명하는데 유일한 목적을 가진다.
CSS가 Visual Design이라면, HTML은 Structure Design이라고 할 수 있다.


Semantic Markup

Semantic Markup 은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 말 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻이다.
HTML은 웹 사이트 콘텐츠를 설명하는데 사용되는 마크업 언어이므로, 콘텐츠의 의미를 설명하는데 유일한 목적을 두고 있다.
앞으로 공부할 CSS가 Visual Design이라면, HTML은 Structure Design이라고 할 수 있다.


HTML 문서 작성을 위한 기본 문법

HTML 문서인 웹 페이지는 head 영역과 body 영역으로 구성되며, 문서의 title은 웹 페이지의 제목으로, 브라우저 탭에 표시된다.

HTML 용어

  • 엘리먼트(element) - 요소 (콘텐츠를 감싸는 tag)
  • open tag - 여는 태그
  • close tag - 닫는 태그


HTML 용어 예시


  • 여는 태그와 닫는 태그가 있는 이유는 콘텐츠를 감싸기 위함이거나 요소가 다른 요소를 감싸기 위해 여는 태그와 닫는 태그를 사용한다.
  • 닫는 태그가 없는 HTML요소는, 콘텐츠를 감싸지 않아 비어있다는 의미이다.
  • attribute - 속성
  • value - 값


HTML 문서 작성을 위한 DTD

HTML을 작성하려면 문서타입이라는 것이 반드시 필요하다. 이를 DTD(DOCTYPE or Document type Definition)라고 하며, 이 DTD는 HTML 문서의 반드시 최상위 에 위치해야 한다.
이러한 문서형 정의로 HTML5, HTML4, XHTML 세 가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성(attribute) 등을 처리하는 기준이 되고 이것은 또한 유효성 검사에 이용된다.
만약 문서 타입(DTD) 정의를 생략하는 경우 웹 브라우저가 표준모드가 아니라 비표준모드(Quirks mode)로 렌더링되어 크로스 브라우징에 어려움을 겪을 수 있다.

DOCTYPE의 버전별선언(HTML5, HTML4, XHTML)에 따라서, HTML은 지원하는 태그가 조금씩 다르다.
또한, DOCTYPE 태그가 아니라 선언문으로서의 역할이기 때문에 HTML 문서 최상위에 위치하는 것이다.
DOCTYPE 종료하는 태그가 없는 것이 특징이며, <!DOCTYPE>은 HTML 문서의 구성 요소는 아니다.

아래 문서가 기본 HTML5 문서타입이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title>HTML 4.01 문서타입</title>
  <link rel="stylesheet" type="text/css" href="css/service_name.css">
  </head>
  <body>

  </body>
  </html>


위와 같이 최상단에 문서 타입을 지정한다. HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이 DOCTYPE이다.
그 후 바로 html 태그가 오고, 이 안에는 head와 body로 크게 나뉘어져있다.
태그는 일반적으로 시작태그와 종료태그로 이루어져 있으며, 예외적인 태그들도 있긴하다.
또한 html 태그의 속성으로 문서에서 다룰 언어를 지정해야 한다. (line 2) 언어 속성은 필수 속성이며, 이 속성은 생략할 수 없다.
head 안에는 콘텐츠를 표현하는 내용은 없지만 콘텐츠를 표현하기 위한 내용을 포함하게 된다.
위의 meta tag(line 4, 5, 6)는 문서 자체를 설명하는 정보이며, 이는 웹 페이지의 요약이라고 할 수 있다. 이를 통해 브라우저와 검색엔진에게 이 문서가 어떤 정보를 가지고 있는지 알려주는 것을 명시한다.
즉, 문서 자체를 설명하고 정보를 담고 있는 것으로 그 문서의 핵심 키워드, 누가 만들었는지, 문자셋 등은 어떤 것을 사용하는지 등의 정보를 담고 있는 태그이다.
위 코드의 메타 정보는 실제 문서가 다루고 있는 언어들의 문자셋을 정의하고 있다.
title은 (line 7) 문서의 정보를 브라우저에 표시하는 역할을 한다.
link는 (line 8) 외부자원(external file, 예를 들어 css, 및 Js 파일 등)이라고 한다.
마지막으로 문서의 본문 영역, 콘텐츠 영역을 의미하는 body 태그에 웹 페이지에 표현되는 콘텐츠를 작성하게 된다.


DOCTYPE 버전 정보

DTD = Document Type Definition = 문서 형식 선언 = HTML 버전 정보 유효한 HTML 문서를 만들기 위해서는 HTML 버전 정보를 명시해야 한다.


주요 요소

HTML 태그의 종류는 다음과 같은 것이 있다.

  • Headings / h1, h2 … h5, h6
  • Paragraphs / p
  • Lists / dl, ul, ol
  • Links / a, image-map
  • Images / img
  • Tables / table, tr, th, td, caption, col…
  • Forms / input, select, textarea
  • address / address
  • structure / div, span


Headings

제목의 단계를 뜻하며, 사용자가 가장 먼저 읽는 컨텐츠는 제목이며, h 요소로 구성된다.
해당 태그는 문서의 주요 타이틀에 사용하며, 중요도가 높은 제목일 수록 낮은 hx 값을 갖는다.
다시 말해, 대제목, 중제목, 소제목, 소소제목…으로 구성할 수 있다.

<h1> 개인정보 취급방침 안내</h1>
<h2>수집하는 개인정보의 항목 및 수집방법</h2>
<h3> 가. 수집하는 개인정보의 항목</h3>


오래 전부터 h1 요소는 문서에서 단 한번만 사용할 수 있으나, HTML5에서는 섹션 컨텐츠 마다 사용 가능하다.


Paragraphs

문장의 단락을 표현하기 이ㅜ해 사용하며, 새로운 문장을 사용해야 하는 경우 p 태그를 새로 선언한다. 주로 헤딩 태그와 함께 쓰이곤 하며, 단락 요소는 어휘 컨텐츠(Pharsing Content)만 자식 요소로 허용한다.

<p>이 사이트는 TIL 블로그입니다.</p>
<p>틀린 내용이 있다면, 메일 부탁드립니다.</p>


Lists

목록은 리스트를 말하며, 리스트는 크게 비순차형 목록(Unordered list, ul), 순차형 목록(Ordered list, ol), 정의형 목록(Description list, dl)으로 나눌 수 있다.
ul과 ol은 li(listed item)을 자식으로 갖는다.
dl은 Definition Term(dt)인 용어, Definition Description(dd)인 용어 설명 요소와 Description list(dl)인 설명 목록으로 구성되는데, dl은 dt, dd를 자식으로 가지게 된다.

결국, 설명형 목록과 정의형 목록은 여러 쌍의 정의된 용어, 설명을 그룹화 시켜 구성하게 된다.

<dl>
  <dt>명사</dt>
  <dd>사물(私物)의 이름을 나타내는 낱말 갈래</dd>
</dl>

<h3>상비약 목록</h3>
<ul>
  <li>감기약</li>
  <li>소독약</li>
</ul>

<h3>실시간 급상승 검색어 순위</h3>
<ol>
  <li>아이유</li>
  <li>수지</li>
</ol>


Links

a(anchor) - 하이퍼링크(Hyperlink)

앵커 요소는 주로 페이지 내 링크 이동 또는 다른 페이지로 이동하기 위해 사용된다. a 요소에 href 속성을 사용하여 링크 주소를 설정하고 요소 내부에는 콘텐츠를 추가하여 사용자에게 보여줄 수 있다. 그리고 하이퍼링크 주소는 파일을 참조하기 위해 인터넷은 URL(Uniform Resource Locators)를 사용한다. URL은 웹 사이트의 리소스 위치 경로를 말하며, 다음과 같이 구성된다.


경로 구성 요소


절대 경로와 상대 경로, 루트 상대 경로

웹 문서에 URL을 입력하는 방법은 총 3가지가 있다.

  • 절대 경로(absolute path)
  • 상대 경로(relative path)
  • 루트 상대 경로(root0-relative path)

경로


절대 경로

절대 경로는 현재 HTML 문서와 상관 없이 URL 주소를 사용해 리소스를 찾는 것을 말한다. “https://Syon0303.github.io”와 같이 사용한다.

절대 경로


상대 경로

상대 경로는 현재 HTML 문서에서 상대적인 위치를 설정하는 것을 말한다. “../posts/etc.html”와 같이 사용한다.

상대 경로


루트상대 경로

루트 상대 경로는 현재 HTMl 문서가 존재하는 영역의 최상위 루트 경로에서 대상을 찾는 것을 말한다. “/images.html”와 같이 사용한다.

루트상대 경로


Images

화면에 표시되는 이미지 요소와 도표, 차트, 표, 이미지 등을 캡션과 함께 묶어주는 피규어 요소이다.


<img src="syon0303.png" width="42" height="42" alt="myPciture">


전경 이미지를 표현하기 위해 사용하고, src(source)는 의미 그대로 자원이 있는 곳의 위치를 정의하는 것이다.
그리고 alt(alternate text)는 화면에 이미지가 보여지지 않거나 이미지를 볼 수 없는 사용자를 위한 대체 텍스트로, 이미지를 대신할 글을 작성하는 것으로 이는 스크린 리더가 이 내용을 읽어주게 된다.
그렇기 때문에 이 대체 텍스트는 이미지에 대한 내용을 분석하고 그에 걸맞는 묘사를 기술해야 한다.
이는 웹 접근성을 위해 반드시 필요하며 의미없는 이미지인 경우에는 빈 칸, 즉 비워둘 수 있다.
또한 이미지 링크가 깨질 경우 화면에 alt 속성 값이 출력 되어 어떤 이미지 였는지 정보가 제공되기 때문에 속성을 잘 설정한다면 시각 장애인이 아니더라도 도움을 받을 수 있는 측면이 있다.
그리고 이미지가 잘 표현될 경우에 일반 사용자도 대체 텍스트와 같은 내용을 제공해 주고 싶다면 title 속성을 사용할 수 있다.
이 title 속성은 마우스 오버를 할 때 툴팁 효과로 나타내어 지지만, alt 속성을 생략할 수는 없다.
그리고 이미지 요소에는 width, height 속성값을 정의할 수 있는데, 단어의 뜻대로 이미지의 너비와 이미지의 높이를 설정하는 것이다.
이는 이미지를 좀 더 빠르게 내려받을 수 있도록 하는데 도움을 주기 때문에 브라우저 최적화에도 도움이 된다.
웹 문서에서 사용되는 이미지 포맷은 비트맵 그래픽 파일 중 JPG, GIF, PNG 포맷이 사용되며, 벡터 그래픽 파일의 경우 SVG 포맷이 사용된다.

figure, figcaption

figure는 도표, 차트, 표, 이미지 등을 캡션과 함께 감싸고 사용되고, 문서에서 참조하는 이미지 영역이라는 것을 명시해 주도록 figure 요소로 감싸는 것이다. figcaption(피규어 캡션)은 피규어에 대한 요약을 나타내는데 사용한다.

<figure>
  <img src="images/bueaty.jpg.jpg" alt="jtbc 드라마 [뷰티인사이드] 의 남녀 주인공이 재회하는 장면">
  <!-- figure caption -->
  <figcaption>출처 : jtbc 뷰티인사이드의 방송화면 캡쳐</figcaption>
</figure>

이미지만 사용되는 경우에는 img 요소만으로 구성해도 되지만 이미지와 캡션을 같이 사용하는 구조의 경우에는 figure, figcaption 요소와 함께 사용하는 것이 좋다.


인용(Quotation) 구문, 창작물 참조 요소(cite), 줄바꿈(Line break)

인용문 사용과 출처를 나타내는 요소, 줄바꿈에 대해 알아보자.

인용(Quotation) 구문

인용이라 함은 남의 말이나 글을 따오는 것으로 홑따옴표, 쌍따옴표 등을 사용하여 어떤 글을 이용하는 것을 말한다.
일반적으로 직접 인용의 경우 쌍따옴표를 사용하고 간접 인용의 경우 홑따옴표를 사용한다. HTML 에서의 인용문은 짧은 인라인 인용문과 긴 인용문을 주로 사용한다.
Quote 요소인 q는 둘러싼 텍스트가 짧은 인라인 인용문이라는 것을 나타내고, 이 요소는 단락 구분이 필요없는 짧은 인용문을 위해 사용되며, 긴 인용문에는 blockquote 요소를 사용한다.
그리고 글의 줄 마다 줄바꿈을 사용하는 경우에는 Line Break인 br을 사용한다.
단, 디자인 상에서 라인과 라인의 공간이 크다고 하여 br을 여러번 사용하는 것은 옳지 않으며, br은 어디까지나 line break이며, 디자인 요소는 CSS로 처리하는 것이 바람직하다.


설명 출처
설명 출처2