HTML/CSS 베이스캠프

HTML Living Standard 태그

1. HTML Living Standard

HTML의 초창기 버전에서는 약 20개의 태그만이 존재했습니다. 그러나 웹 기술의 발전과 함께 HTML은 크게 확장되었고, 현재 HTML Living Standard에는 140개가 넘는 태그가 포함되어 있습니다. 이는 웹의 기능성과 사용자 경험을 향상시키기 위해 새로운 요소들이 지속적으로 추가되고 있기 때문입니다.

HTML의 첫 번째 버전은 1991년에 공개된 HTML 1.0입니다. 그 이후로 HTML은 버전 번호를 붙여가며 업데이트되었으며, 웹 기술의 발전과 함께 여러 차례 개정되었습니다. HTML4.01 버전 이후 HTML5 대신 HTML은 "Living Standard"라는 이름으로 불리게 되었습니다. 이는 HTML이 더 이상 정적인 버전으로 존재하지 않고, 끊임없이 변화하고 발전하는 살아있는 표준이라는 의미를 담고 있습니다. 이러한 변화는 웹 기술이 빠르게 발전하는 환경에서 표준이 지속적으로 최신 상태를 유지할 수 있도록 하기 위한 것입니다.

현재의 HTML Living Standard는 WHATWG(The Web Hypertext Application Technology Working Group)에 의해 관리되고 있습니다. WHATWG는 HTML 표준의 지속적인 발전을 주도하며, 최신 웹 기술의 도입과 기존 기능의 개선을 목표로 하고 있습니다.

whatwg html spec

왜 HTML5 대신 HTML Living Standard인가요?

이는 HTML4.01 버전 이후에 업데이트를 개발자들이 반기지 않았기 때문입니다. 이에 애플, 모질라, 오페라 등의 브라우저 제작사들이 WHATWG를 결성하고, HTML5 대신 HTML Living Standard로 명명하였습니다. 그 이후에 W3C와 WHATWG가 독자적으로 HTML 표준을 발표하게 되었고 이를 2019년에 통합하였습니다.

2. HTML 기본 구조

HTML의 기본 구조에 대해 알아보겠습니다. 여러분 컴퓨터에서 VS Code를 열어 새로운 HTML 파일을 생성해보세요. Ctrl + N (Windows) 또는 Cmd + N (Mac) 단축키를 사용하면 새로운 파일을 생성할 수 있습니다. 이 파일을 index.html이라는 이름으로 저장해주세요. Ctrl + S (Windows) 또는 Cmd + S (Mac) 단축키를 사용하면 파일을 저장할 수 있습니다. 저장을 다 했다면 ! + tab 을 눌러 보세요. 기본 템플릿이 생성됩니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

왜 index.html일까요?

index.html 파일 이름은 웹 개발에서 매우 특별한 의미를 가지고 있습니다. 이 이름은 전통적으로 웹사이트나 웹 어플리케이션의 진입점 또는 시작 페이지로 사용되는 HTML 파일을 지칭합니다.

웹 서버의 기본 설정: 대부분의 웹 서버는 특정 디렉토리에 대한 HTTP 요청을 받을 때 기본적으로 index.html 파일을 찾습니다. 즉, 사용자가 웹사이트의 루트 디렉토리(예: http://example.com/)에 접근하려고 할 때, 웹 서버는 자동으로 http://example.com/index.html을 제공합니다. 이는 웹 서버의 기본 구성이며, 별도의 설정 없이도 작동합니다.
관례와 편의성: index.html은 웹 개발 커뮤니티에서 널리 받아들여진 관례입니다. 이 관례를 따르면 새로운 개발자나 팀원이 프로젝트에 참여할 때 프로젝트의 구조를 더 쉽게 이해할 수 있습니다. 또한, 사용자와 개발자 모두가 웹사이트의 메인 페이지를 찾기 쉽게 만들어줍니다.
역사적인 이유: 초기 웹 개발 단계에서 index.html 파일을 사용하는 관례가 생겨났습니다. 초기 웹 사이트들은 파일 구조가 단순했고, index.html은 디렉토리의 주요 내용을 나타내는 인덱스 역할을 했습니다. 이 관례는 시간이 지남에 따라 유지되어 왔습니다.

2.1 `<!DOCTYPE html>`

이 문서는 html Living Standard 문서 라는 의미 입니다. 이는 문서 유형 선언으로, 현재의 표준을 의미합니다. 이를 통해 브라우저는 해당 문서를 최신 표준에 맞춰 정확하게 해석하고 렌더링할 수 있습니다.

2.2 `<html lang="en">`

<html>태그는 HTML 문서의 루트, 최상단 요소입니다. 문서의 모든 내용을 포함하는 최상위 요소로, 문서의 시작과 끝을 나타냅니다. lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다. 한국어는 lang="ko",lang="ko-KR"와 같이 설정할 수 있습니다. 이는 웹 페이지의 언어를 설정하는 것으로, 검색 엔진이나 스크린 리더, 번역 기능 제공 등이 페이지의 언어를 인식하고 사용자에게 적절한 정보를 제공할 수 있도록 합니다. 자동완성을 할 때 en이 아니라 ko로 설정하려면 VS Code에서 단축키 Ctrl + ,(콤마)를 눌러 emmet이라 검색 후 Emmet: Variables를 찾아 Add Item을 클릭 후 Item 입력상자에 lang, Value 입력상자에 ko 입력 한 후 ok 버튼을 클릭을 클릭하면 됩니다.

언어코드(소문자)-국가코드(대문자)

언어코드	언어	국가코드(국가)
ko	한국어	KR(대한민국), KP(북한)
en	영어	US(미국), GB(영국), PH(필리핀)
zh	중국어	CN(중국), HK(홍콩), TW(대만), Hans(간체), Hant(번체)
ja	일본어
de	독일

스크린리더란?

Screen Reader

스크린리더는 시각 장애를 가진 사람들을 위한 보조 기술로, 컴퓨터 화면에 표시된 내용을 음성이나 점자로 변환해주는 프로그램입니다. 이를 통해 시각 장애인들이 컴퓨터를 사용하고 웹사이트를 탐색할 수 있게 됩니다. 스크린리더는 화면에 표시된 텍스트, 이미지, 버튼 등을 읽어주어 사용자가 컴퓨터를 조작할 수 있도록 돕습니다.

2.3 `head`

기계가 식별할 수 있는 문서 정보(메타데이터) 를 담습니다. 검색엔진을 위한 다양한 정보들이 담기는 곳입니다. 사용자에게는 title, 파비콘, viewport 정보등이 보이게 됩니다.

paullab wenivooks studyin

2.3.1 `meta`

메타데이터는 데이터에 대한 데이터로, 데이터를 설명하는 데이터입니다. 웹 페이지의 정보를 설명하고 검색 엔진이 페이지를 분석할 때 사용됩니다. 위 홈페이지 중 바울랩의 페이지에는 아래와 같은 메타데이터가 담겨 있습니다. 실제 네이버에서 검색을 해보면 제주 ICT 코딩 컴퓨터학원으로 검색을 해보면 한 번에 검색이 되는 것을 확인할 수 있습니다. 이렇게 나오는 이유는 검색엔진이 메타데이터를 통해 페이지를 분석하기 때문입니다.

<meta name="description" content="제주 ICT 코딩 컴퓨터학원, 연구원, 출판사" />

<meta name="description" content="제주 ICT 코딩 컴퓨터학원, 연구원, 출판사" />

2.3.2 charset

<meta charset="utf-8" />

<meta charset="utf-8" />

charset은 문자 인코딩 방식을 지정하는 속성입니다. 문자 인코딩 방식은 문자를 컴퓨터에서 저장하고 표현하는 방식을 의미합니다. 문자 인코딩 방식을 지정하지 않으면 브라우저가 기본값으로 설정하게 됩니다. 그러나 기본값은 브라우저마다 다르기 때문에 명시적으로 지정해주는 것이 좋습니다. 문자 깨짐 오류가 발생한다면 가장 먼저 이 태그를 수정해보아야 합니다. utf-8은 전 세계적인 언어들을 지원하도록 합니다. 그래서 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있습니다. 국제적인 코드 규약입니다. 과거에는 한국어 인코딩을 위해 euc-kr 를 사용하기도 했었습니다. 영어 이외의 외국어를 표현하기에는 어려움이 있으므로 권장하지 않습니다.

이렇게 <head> 부분과 <meta> 태그를 올바르게 사용하는 것은 웹 페이지의 접근성, 호환성, 그리고 검색 엔진 최적화에 매우 중요합니다. 사용자에게 보이지 않는 이러한 정보들이 웹 페이지의 성공에 큰 영향을 미친다는 점을 기억하세요.

2.3.3 `title`

브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목을 정의합니다. 특수문자를 넣지 않고 텍스트만 포함해야 합니다. 검색엔진은 인터넷을 사용하는 사용자가 제목을 보고 탐색할 페이지를 선택합니다. 페이지마다 적당한 제목이 노출되도록 개발하는 것도 중요합니다. 제목은 약 60자를 넘지 않아야 합니다. 그보다 길어지게 된다면 브라우저에서 노출되는 제목이 축소되어 보일 수 있습니다.

2.3.4 `link`

link 태그는 현재 문서와 외부 리소스의 관계를 명시합니다. 외부 스타일 시트, 폰트, 파비콘을 연결할 때 사용합니다. 빈 태그, 속성만을 포함합니다. head 요소 내부에만 위치할 수 있습니다.

rel: relations 관계. 대상 파일의 속성을 나타냅니다
href: hyper-references 경로. 연결 시 참조할 파일의 위치를 나타냅니다.

<html>
  <head>
    <!-- 스타일 시트 링크 -->
    <link rel="stylesheet" href="style.css" />
 
    <!-- 폰트 링크 -->
    <link rel="stylesheet" href="font.ttf" />
 
    <!-- 파비콘 링크 -->
    <link rel="shortcut icon" href="favicon.ico" />
  </head>
  <body></body>
</html>

<html>
  <head>
    <!-- 스타일 시트 링크 -->
    <link rel="stylesheet" href="style.css" />
 
    <!-- 폰트 링크 -->
    <link rel="stylesheet" href="font.ttf" />
 
    <!-- 파비콘 링크 -->
    <link rel="shortcut icon" href="favicon.ico" />
  </head>
  <body></body>
</html>

파비콘(favicon)이란?

파비콘(favicon)은 Favorite와 Icon 의 합성어입니다. 웹페이지에 접속했을 때 상단에 보여지는 아이콘을 말합니다.

2.4. `body`

body 태그는 웹 페이지의 실제 내용을 담는 부분입니다. 웹 페이지의 모든 내용은 body 태그 내부에 작성되어야 하며, 브라우저는 body 태그 내부의 내용을 해석하여 사용자에게 보여줍니다. 우리가 앞으로 배울 내용이 이곳에 담기게 됩니다.

3. 기본 문법과 작성

3.1 요소(Elements) 분석

3.1.1 태그 (Tag)

태그는 요소를 정의할 때 사용되는 꼬리표입니다. 웹 문서에 정보를 정의해주는 형식입니다. 기본적으로 <> 시작 태그(여는 태그) </> 종료 태그(닫는 태그)의 쌍으로 구성되어 있습니다.

보통 A4 용지로 인쇄해서 볼 수 있는 요약 정보를 Cheat Sheet라고 합니다. 어떤 언어를 습득할 때 Cheat Sheet를 참고하면 좋습니다. 아래 링크를 통해 HTML Cheat Sheet를 확인해보세요.

HTML Cheat Sheet

태그의 종류는 참 많습니다. 자주 사용되는 태그의 빈도를 아래 링크에서 확인해볼 수 있습니다. 이를 통해 무엇을 먼저 배워야 할지, 모르는 태그가 있다면 그 태그의 사용 빈도가 얼마나 되는지 파악할 수 있습니다.

HTML 태그 빈도

3.1.2 요소의 포함

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

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

HTML 오류 검사

HTML의 경우, 오류를 알려주지 않고 웹브라우저가 임의로 결과를 보여줍니다. '웬만한 오류는 알아서 처리해준다.'가 좋은 것 같지만, 예상치 못한, 의도하지 않은 화면이 될 수 있습니다. 이런 것을 방지하고 싶다면 마크업 검사를 진행해 주세요. 위니브에서는 프론트엔드 개발자 채용시 포트폴리오의 태그가 올바르게 사용되었는지 확인합니다. 이런 밸리데이터를 통해 오류를 줄이고, 더 나은 웹페이지를 만들 수 있습니다.

[Markup Validation Service]

Markup Validation Service

w3c markup validation

3.1.3 빈 요소 / 셀프 크로징(Self-closing)

셀프 클로징이라고도 불리는 빈 요소는 닫는 태그가 없는 요소입니다. 이러한 요소는 닫는 태그가 없어도 브라우저가 정상적으로 해석할 수 있습니다. 대표적인 빈 요소로는 <br>, <img>, <input> 등이 있습니다. 다만 셀프 클로징이라는 명칭보단 빈 요소라는 명칭을 사용하는 것을 권합니다.

닫는 태그가 없는 태그

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

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

3.2 주석

주석은 코드에 대한 설명이나 메모를 추가할 때 사용합니다. 주석은 브라우저에 표시되지 않으며, 코드의 가독성을 높이고 유지보수를 용이하게 합니다. 주석은  형식으로 작성하며, 여러 줄의 주석을 작성할 때는 로 끝내면 됩니다.

단축키: (window) ctrl + / , (mac) cmd + /
나, 미래의 나, 다른 개발자를 위해 설명하는 글을 적어 둡니다.
매우 중요한 기밀 사항을 적어 놓는 것은 피해야 합니다.

3.2.1 예시

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


 

<form>...생략...</form>

```
```


 

<form>...생략...</form>

```

협업할 때

<!-- 휴대폰번호 인증필요 -->
<input type="tel" />
 
<!-- #2022.02.20 4:00 업데이트 -->

<!-- 휴대폰번호 인증필요 -->
<input type="tel" />
 
<!-- #2022.02.20 4:00 업데이트 -->

임시 처리

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

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