HTML (HyperText Markup Language)
- HyperText(하이퍼텍스트) : 정해진 순서 없이, 참조를 통해 한 문서에서 다른 문서로 접근할 수 있는 텍스트
- Markup Language(마크업 언어) : 태그 등을 이용하여 문서나 데이터의 구조를 표시하는 언어
- HTML은 마크업 언어로 웹 콘텐츠의 의미와 구조를 정의한다.
- 확장자
.html
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>1. <!DOCTYPE html>
- HTML은 2019년 5월 28일부터 WHATWG와 W3C에서
Living Standard를 HTML의 유일한 버전으로 발표했다. - 그러므로, 이제는 버전이 없다고 생각하면 된다.
<!DOCTYPE html>작성 시,
HTML Living Standard로 작성된 문서임을 의미한다. 작성을 하지 않을 경우 브라우저는 쿼크모드로 렌더링하게 된다. 쿼크모드에서는 브라우저마다 구현 방식이 조금씩 다르므로 다르게 동작할 가능성이 있다. 그래서 문서 최상단에 선언해야 한다.
참고) 마크업 검사 사이트
https://validator.w3.org/
validate by Direct Input에 자신이 작성한 코드를 검사할 수 있다.
(* 모든 브라우저에서 작동이 되는지, 오류없는지 알 수 있는 유용한 사이트)
2. <html lang="">
- HTML 문서의 최상단 요소로, lang 속성을 통해 해당 페이지의 주 언어가 무엇인지 설정할 수 있다. 주 언어 설정은 검색엔진, 스크린리더, 번역 기능 제공 등에 영향을 미친다.
(* 스크린리더는 음성 표현에 사용할 언어를 선택할 때 도움이 된다.)
예시) ko(언어코드)-KR(국가코드), en(영어)-US(미국), zh(중국어)-CN(중국)
3. <head>
- 기계가 식별할 수 있는 문서 정보(메타데이터)와 검색엔진을 위한 정보를 담는다.
- 사용자에게는 title, 파비콘, viewport 등이 보이게 된다.
1) <meta>
- 메타데이터 : '어떤 목적을 위해 만들어진 데이터'
- 메타정보를 살펴보고 페이지의 다양한 정보를 검색엔진이 가져간다.
<meta charset="utf-8">- 문자 깨짐 오류가 발생할 수 있어, 문자 코드의 종류를 설정해준다.
utf-8은 국제적인 코드 규약으로 어떤 언어로 작성해도 웹페이지를 읽게 해준다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />- 브라우저 호환성을 위해 작성한다.
- IE의 다양한 버전 때문에 같은 페이지도 다르게 보여지는 경우가 있었지만,
위 코드를 작성하면IE의 최신 표준 모드를 보여준다.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />name은 이름,content는 값 으로 문서의 메타데이터를 이름-값 쌍으로 제공한다.name: 면 전체 페이지에 적용되는 "문서 레벨 메타데이터" 제공하고, 어떤 형태의 정보(viewport, description, author 등)를 가지고 있는지 의미한다.content: 실제 메타데이터의 요소이다.
name="viewport"인 경우content값
width: 뷰포트의 너비를 제어한다. (*픽셀값으로도 지정할 수 있다.)height: 뷰포트의 높이를 제어한다.initial-scale: 페이지가 처음 로드 될 때 확대/축소 수준을 제어한다. 최소 0.1 - 기본 1 - 최대 10minimum-scale: 축소 정도를 제어한다.maximum-scale: 페이지에 허용되는 확대 정도를 제어한다. 3보다 작은 값은 접근성에 맞지 않는다.user-scalable=no과 속성을 주어 사용자가 화면크기를 제어 못하게 하는 경우도 있다. 하지만, 다양한 디바이스 크기, 노안, 저시력 등의 다양한 상황때문에 잘 쓰지 않는다.
(* 해당 속성을 사용해도 접근성을 위해서 무시하는 브라우저도 있다.)
2) <title>
- 브라우저의 제목 표시줄이나 페이지 탭에 보이는 문서 제목 (*특수 문자 불가능)
- 검색엔진으로 인터넷 사용자가 제목을 보고 탐색할 페이지를 선택한다.
- 페이지마다 제목이 노출되도록 개발하는 것이 중요하다.
- 약 60자를 넘지 않아야 한다.
3) <link>
- 현재 문서와 외부 리소스 관계를 명시한다.
- 빈 태그, 속성만을 포함하며, 외부 스타일 시트, 폰트, 파비콘을 연결할 때 사용.
head요소 내부에만 위치 가능
<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>rel: relations 관계로, 대상 파일의 속성을 나타낸다.href: hyper-references 경로로, 연결 시 참조할 파일의 위치를 나타낸다.
4. <body>
- 사용자에게 보이는 영역이다.
알아두면 좋은
스니펫(Snippet) 만들기
Snippet은
- 작은 정보 또는 한 토막 이라는 뜻으로,
- 재사용 가능한 소스 코드 조각, 코드 일부분만을 발췌한 것을 가리키는 말이다.
- 코드스니펫은 VSC의 고유 기능이다.
- snippet-generator
snippet 스니펫
https://snippet-generator.app/
(출처 자료 : 위니브)
"html": {
"prefix": "!!",
"body": [
"<!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>$1</title>",
"",
" <!-- CSS -->",
" <link rel=\"stylesheet\" href=\"\">",
"</head>",
"<body>",
" $2",
" <!-- JavaScript -->",
" <script src=\"\"></script>",
"</body>",
"</html>"
],
"description": "html"
}- 중괄호
{}안에 위 코드를 넣으면,!!tab키를 누르면 자동으로 html이 완성된다.
프론트엔드 개발 가즈아