HTML/CSS 에센셜

HTML 문서해부

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

<!DOCTYPE html>
<html lang="ko-KR">
  <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>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
    <script src="./script.js"></script>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko-KR">
  <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>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
    <script src="./script.js"></script>
  </body>
</html>

왜 index.html일까요?

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

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

1. DOCTYPE

<!DOCTYPE html>은 HTML Living Standard 문서라는 의미의 선언문입니다. 이 선언문을 통해 브라우저가 어떤 모드로 페이지를 렌더링할지 결정하며, 작성 시 완전 표준 모드로 렌더링됩니다.

현재는 매우 간단해졌습니다: <!DOCTYPE html> 이것만 써주면 됩니다."이 문서는 최신 HTML 표준을 사용합니다"라고 브라우저에게 말해주는 것과 같습니다.
예전에는 복잡했습니다. HTML의 여러 버전과 종류가 있었기 때문에, 긴 코드로 정확히 어떤 버전을 사용하는지 명시해야 했습니다.
```

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
```

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
```
- 이것을 DTD (Document type Definition) 라고 부르며 다양한 DTD를 사용하여 문서 유형을 지정했습니다.
- 만약 DOCTYPE을 제거하면 브라우저는 오래된 웹 페이지로 간주하고, 쿼크 모드(quirks mode : 하위 호환성 모드)로 html을 렌더링하게 됩니다.
  - 쿼크 모드는 브라우저마다 페이지 렌더링 방식이 다를 수 있고 최신 웹 표준을 완전히 지원하지 않을 수 있으며 예상치 못한 레이아웃이나 스타일 문제가 발생할 수 있습니다.
- 그렇기에 DOCTYPE을 반드시 문서 최상단에 선언해야 합니다.

표준 모드와 호환 모드

2. `html`

HTML 문서의 루트, 최상위 태그입니다.
이 태그의 시작 태그는 HTML 문서의 시작을, 닫는 태그는 HTML 문서의 끝을 나타냅니다.
- 모든 HTML 요소는 <html> 태그 내에 포함되어야 합니다
lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있습니다.
주 언어 설정은 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미치게 됩니다.
스크린리더가 음성 표현에 사용할 언어를 선택할 때 도움이 됩니다.
언어마다 기본 설정되어 있는 서체가 다른데, 맥의 경우 en 으로 그대로 두고 한글을 작성하면 특정 서체를 지정하지 않았을 때 한글이 궁서체로 나타나기도 합니다.

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

ex) ko-KR

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

3. `head`

문자 인코딩, 타이틀, 설명, 스타일시트, 스크립트 등 기계가 식별할 수 있는 문서 정보(메타데이터)를 담습니다.
검색엔진을 위한 다양한 정보들이 담기는 곳입니다.
사용자에게는 제목(title), 파비콘(favicon), 뷰포트(viewport) 정보 등이 보이게 됩니다.

3.1 `meta`

메타데이터: “어떤 목적을 위해 만들어진 데이터”
검색엔진은 메타정보를 살펴보고 페이지의 다양한 정보를 가져갑니다.

charset

<meta charset="utf-8" />

<meta charset="utf-8" />

문자 깨짐 오류가 발생할 수 있으므로 문자 코드의 종류를 설정해 줍니다.
utf-8은 전 세계적인 언어들을 지원하도록 합니다. 그래서 어떤 언어로 작성하더라도 웹페이지를 읽을 수 있습니다. 국제적인 코드 규약입니다.
과거에는 한국어 인코딩을 위해 euc-kr 를 사용하기도 했었습니다. 영어 이외의 외국어를 표현하기에는 어려움이 있으므로 권장하지 않습니다.

http-equiv="X-UA-Compatible" content="IE=edge"

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

브라우저 호환성을 위해 작성해줍니다. IE의 최신 표준 모드를 보여주겠다는 의미입니다.
IE의 다양한 버전(6-11) 때문에 같은 페이지도 다르게 보여지는 경우가 있었습니다. 그러한 문제를 해결하기 위해 작성해주는 코드입니다

name=”” content=””

<meta
  name="description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>

<meta
  name="description"
  content="Google 지도에서 지역정보를 검색하고 지도를 살펴보거나 운전경로 정보를 검색합니다."
/>

name과 content 특성을 함께 사용하면 문서의 메타데이터를 이름-값 쌍으로 제공합니다.
name은 화면 전체 페이지에 적용되는 "문서 레벨 메타데이터”를 제공합니다. 어떤 형태의 정보(viewport, description, author…)를 가졌는지를 의미합니다.
content는 실제 메타데이터의 요소입니다.

viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width: 뷰포트의 너비를 제어합니다. width=600 과 같이 픽셀값으로 지정할 수도 있습니다.
height: 뷰포트의 높이를 제어합니다.
initial-scale : 페이지가 처음 로드될 때 확대/축소 수준을 제어합니다. 최소 0.1 - 기본 1 - 최대 10
minimum-scale: 축소 정도를 제어합니다.
maximum-scale: 페이지에 허용되는 확대 정도를 제어합니다. 3보다 작은 값은 접근성에 맞지 않습니다
user-scalable=no 과 속성을 주어 사용자가 화면크기를 제어 못하게 하는 경우도 있습니다. 하지만 다양한 디바이스 크기, 노안, 저시력 등의 다양한 상황을 고려해야 하므로 특수한 상황이 아니라면 사용하지 않는 게 좋습니다. 해당 속성을 사용해도 접근성을 위해서 무시하는 브라우저도 있습니다.

3.2 `title`

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

3.3 `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>

4. `body`

body 태그는 사용자에게 보이는 영역입니다.
본격적으로 우리가 작성할 영역이 되겠죠!

HTML 문서해부

1. DOCTYPE

2. html

3. head

3.1 meta

3.2 title