HTML 기본

오민영·2023년 2월 9일

HTML

목록 보기

1/9

HTML

Hyper Text Markup Language, 웹 페이지가 어떻게 구조화 되어있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어

요소 - Element

Opening tag / Closing tag / Content 를 통틀어 요소 (element) 라고 한다.
단일 태그(Single tag)를 사용하는 요소도 있다. (<img>)

속성 - Attribute

class=”hoho” / type=”itext” 와 같이 태그 안에 들어가는 어떤 설정

HTML | XHTML

XHTML은 Extensible HTML 을 의미하고, HTML을 XML로 재정의한 언어이기 때문에 요소와 속성에는 차이가 없다. 문법의 적용이 조금 더 엄격하다. XHTML 문서는 하나의 XML 문서로서 문법적으로 정확하므로, 표준 XML 라이브러리를 이용한 자동화된 처리가 가능하다.

요소 사용 시 종료 태그 반드시 사용
요소명, 속성명에 반드시 소문자를 사용
빈요소 사용 시 종료의 표현으로 / 를 기입한다.
속성 값의 단축 표기는 허용되지 않으므로, 속성 값을 반드시 입력
올바른 중첩 사용
속성 값에 따옴표 반드시 작성
특수 문자는 Entity로 변환해서 사용한다.
주석은 바르게 사용하고, 더블대시를 반복해서 사용하지 않는다.

변환하는 방법 - 첫 줄에 코드를 추가한다.

```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
```

HTML5

HTML5는 웹 상에서 콘텐츠를 구성하고 보여주기 위한 HTML 언어의 최신 표준 권고안이다.

HTML 4.0.1, XHTML 1.1등을 대체하는 차세대 표준안.

HTML5에서의 기본 문자 인코딩(character encoding) 방식은 UTF-8이다.

간결하고 명확해진 문법 (DOCTYPE 선언 방법)

<!DOCTYPE html>

시멘틱 요소가 생겼다.

Sectioning Root - setction이나 article 요소와 같이 장이나 절과 같은 계층 구조로 구분되지 않고, 독립적인 컨텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않는다.
blockquote | body | detail | fieldset | figure | td
Metadata Content - 문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style요소, 행동을 설정하는 script 등을 나타낸다. 웹 브라우저에 직접적으로 보여지지 않으며 문서와 문서 간의 관계를 설정
base | link | meta | noscript | script | style | title
Flow Content - 문서 본문에 해당하는 body 요소에 들어가는 대부분의 요소들이 속하는 콘텐츠
a | abbr | address | area | artivle | aside | audio…….
Sectioning Content - 대부분 HTML5에서 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타낸다. 모든 섹셔닝 컨텐츠는 헤딩과 아웃라인을 가진다.
article | section | nav | aside
Heading Content - 섹션의 제목을 나타낸다. 문서의 아웃라인 고려가 필요!
h1 | h2 | h3 | h4 | h5 | h6
Phrasing Content - 문서의 텍스트를 나타내며, 그 텍스트를 문단 내부 레벨로 마크업하는 요소들
a | abbr | area | b | i | img | input...
Embedded Content - 포함된 이라는 뜻을 가지며, 문서 안에 외부 자원 또는 HTML이 아닌 다른 언어로 표현되는 컨텐츠
audio | canvas | embed | iframe | img | math | object | svg | video
Interactive Content - 사용자가 어떤 기능을 조작할 수 있는 콘텐츠. 확인 버튼을 부른다던가, 재생하든가, 링크를 클릭하는 것 등
a | audio | button | details | embed | iframe | img | input | keygen | label | object | select | textarea | video
Palpable Content - 기존 콘텐츠 모델에 새롭게 추가된 개념으로, 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소
Script-Supporting Content - 어떤 정보 표현을 하지는 않지만 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는 데 사용된다.
script
Transparent Content - 콘텐츠 모델을 가지지만, 어떠한 카테고리에 속하지 않은 요소 . 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 문법 오류가 없는 것을 의미
table | audio | canvas | del | ins | map | noscript | object | video

다양한 API의 추가 (Application Programming Interface) - 프로그램을 개발할 때 필요한 기본 기능

오프라인 웹 구현을 위한 API
- Web Storage: 브라우저에 데이터를 저장하는 공간. 크기 제한과 유효 기간이 없고, 데이터가 서버로 전송되지 않으면, Javascript 객체를 저장할 수 있다는 장점
- Web SQL Database/Indexed Database: API 클라이언트(웹 브라우저)에서 관리되는 데이터 베이스를 제어할 수 있는 API로 구성되어 있다.
- Application Cache: 웹 애플리케이션을 오프라인에서 사용하는 데 필요한 리소스 (HTML, CSS, JS, 이미지 등)를 클라이언트 쪽에 캐시하기 위한 기능으로, 리소스가 로컬에 캐시된 상태에서 웹 브라우저가 네트워크에 접소하기 안호 캐시된 리소스를 이용할 수 있다.
실시간 커뮤니케이션 API
- Web Workers: 메인 스레드(UI)와 독립적인 백그라운드 프로세스로 처리되는 스크립트를 말하며, 웹 브라우저 내에 자바스크립드로 멀티스레드 프로그램을 구현할 수 있다.
- Web Socket: 웹 브라우저와 서버 간 양방향 전이중 통시을 구현한 Web Socket 프로토콜을 이용할 수 있는 API
- Notifications: 운영체제에 독립적인 플랫폼 수준의 알림 메세지를 보여주는 API
파일/하드웨어 접근 API
- 웹 브라우저에서 로컬 저장 장치 간 파일을 주고받을 수 있는 API와 웹 브라우저가 설치된 단말기의 하드웨어에 접근할 수 있는 API
GUI를 위한 API
- Drag & Drop: HTML4.0.1에서 드래그앤드랍을 구현하기 위해 직접 자바스크립트로 개발하거나 UI 관련 자바스크립트 라이브러리를 이용해야 했지만, HTML5에서는 드래그앤드랍 API를 이용하여 쉽게 구현 가능

HTML5는 XML이나 XHTML과 달리 문법적으로 매우 유연하게 대처한다.

태그 이름에 대문자 사용
속성값에 따옴표 생략 (style=height: 50px;)
속성값 생략 (disabled)
빈 태그의 종료 태그(/) 생략 (<br>)

추가된 요소

`<head>`

<head> 내용은 이용자게에 보이지 않지만, 검색 결과에 노출 될 키워드, 홈페이지 설명, CSS 등 HTML 페이지의 모든 내용을 담고 있다.
HTML 문서의 메타데이터를 정의하는 곳이다.

<head>
	<meta charset="UTF-8">
	<meta name="author" content="Chris Mills">
	<meta name="description" content="The MDN Learning Area aims to provide
	complete beginners to the Web with all they need to know to get
	started with developing web sites and applications.">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">	
	<title>민영 WORLD</title>

	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
	<link rel="icon" type="image/png" href="http://example.com/image.png" />
	<link rel="stylesheet" href="../dist/css/style.min.css" />
	<script src="my-js-file.js"></script>
</head>

`<title></title>`

HTML 문서 전체의 타이틀을 표현하기 위한 메타데이터

`<meta>` 속성(attribute)

메타데이터는 데이터를 설명하는 데이터이다.

<meta charset="utf-8">

웹 브라우저에서 한글이나 영어와 같은 문자를 처리하기 위해 문자 인코딩 방식(문자 코드 세트)을 명시한다.
HTML의 텍스트를 어떻게 보여질 지 명시하는 것
UTF-8: 유니코드를 위한 문자셋으로 전 세계적인 character 집합으로 많은 언어, 문자를 포함한다.
meta 요소 중 가장 먼저 선언하는 게 좋다.
기존 방식: <meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta content=”텍스트”>

실제 메타데이터의 컨텐츠, 속성 값이다.
name 속성이나 http-equiv 속성과 관련된 값을 명시한다.
content=”웹접근성, 웹표준, HTML, 웹콘텐츠 접근성 지침” 과 같이 콤마로 구분하여 선언

<meta http-equiv=”content-type | default-type | refresh”>

content 속성에 명시된 값에 대한 HTTP 헤더를 제공한다.
http-equiv 속성이 명시되어 있으면, 반드시 content 속성도 함께 명시되어야 한다.
content-type: 해당 문서의 문자 인코딩 방식을 명시한다.
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
default-type: 우선적으로 적용할 스타일시트를 명시한다.
<meta http-equiv="default-style" content="preferred stylesheet">
refresh: 해당 문서를 새로고침(refresh)할 시간 간격을 명시한다.
<meta http-equiv="refresh" content="30">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
문서 호환성 모드. 최신 모드로 지정된 DOCTYPE에 상관없이 IE8 이상 버전에서 항상 최신 표준 모드로 렌더링 된다.

메타 요소가 어떤 정보의 형태를 갖고 있는지 알려준다.
name 속성을 사용하면 반드시 content 속성도 함께 사용한다.
author: 문서의 저자를 명시한다.
description: 웹 페이지에 대한 설명을 명시. 검색 엔진은 검색 결과에 설명을 함께 표시할 수 있다.
keywords: 검색 엔진을 위해 웹 페이지와 관련된 콤마(,)로 구분한 키워드 목록을 명시한다.
- ~~더이상 사용하지 않음 → 악용 사례~~
generator: 문서를 생성하는 데 사용되는 소프트웨어 패키지 중 하나를 명시한다.

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

웹 페이지에서 사용자가 볼 수 있는 영역인 뷰포트를 제어한다. 장치에 따라서 뷰포트가 달라지므로, 모바일 화면은 컴퓨터 화면보다 뷰포트가 더 작아진다. viewport는 브라우저에게 해당 페이지의 면적과 비율 등을 어떻게 제어할 지에 대한 지침을 제공한다.
width
- device-width: 기기에 따라 달라지는 장치의 화면 너비에 맞게 웹 페이지의 너비가 자동으로 설정된다.
- 그 외에 px, em, %등 다양한 단위 값을 지정할 수 있다.
initial-scale=1.0
- 처음 로드될 때, 초기 렌더링 비율
- 1.0: 비율 100%를 의미한다.
user-scalable= yes | no
- 사용자가 확대 / 축소를 사용할 지 설정
width | height | initial-scale | minimul-scale | maximum-scale | user-scalable(기본1)

<meta name="robots" content="noindex,follow">

해당 페이지를 검색결과에 표시할지(index), 표시하지 않을지(noindex), 페이지 안에 있는 링크를 따라 이동하게 할 것인지(follow), 아닌지(nofollow)를 지정할 수 있다.
nofollow의 경우 크롤러가 페이지에 있는 외부 사이트 링크를 따라 이동하지 이동하지 않도록 한다
- 방문자들이 입력한 링크로 크롤러가 멋대로 이동해서 연결된 페이지가 해당 페이지의 평가에 영향을 주지 못하도록 하는 것이다.
복수 지정이 가능하며 콤마(,)로 구분한다.
all - 기본 값. 색인 생성이나 게재에 대한 제함없음.
none - noindex, nofollw와 같다.

오픈 그래프 Open Graph & og 태그

og 태그는 웹 페이지를 공유할 때 보여주는 미리보기이다.
크롤러가 해당 웹 페이지를 먼저 방문 후 메타데이터를 크롤링해서 미리보기를 만들어준다.

- 페이스북, 네이버, 카카오톡 링크 공유 시 보여질 미리보기 설정

```html
<!-- 웹 페이지 URL -->
<meta property="og:url" content="www.youtube.com"> 

<!-- 콘텐츠 제목 -->
<meta property="og:title" content="YouTube">

<!-- 콘텐츠 설명 -->
<meta property="og:description" content="여기를 눌러 링크를 확인하세요."> 

<!-- 웹페이지,콘텐츠 타입 (ex: blog,article,website..) -->
<meta property="og:type" content="video"> 

<!-- 미리보기 썸네일 이미지 -->
<meta property="og:image" content="../images/thumb.png"> 

<!-- 사이트 이름 -->
<meta property="og:site_name" content="YouTube">
```

- 트위터의 미리보기 설정

```html
<!-- 트위터 카드 타입 -->
<meta name="twitter:card" content="summary">

<!-- 콘텐츠 제목 -->
<meta name="twitter:title" content="SEO 최적화 방법">

<!-- 콘텐츠 설명 -->
<meta name="twitter:description" content="퍼블리셔의 SEO 최적화 방법 소개">

<!-- 미리보기 썸네일 이미지 -->
<meta name="twitter:image" content="../images/thumb.png">
```

data: 생성 날짜, copyright: 저작권, subject: 문서의 주제, loaction: 위치, publisher: 발행하는 회사 등

파비콘

웹 페이지에 접속했을 때, 상단 탭에 보여지는 아이콘을 일컫는다. 즐겨찾기에도 사용 됨

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

파비콘 아이콘 자동 생성
전통적으로 16컬러 24비트 알파 투명도 포맷의 1616 & 3232 .ico 파일이 주로 사용함
IE10 이하의 경우 .ico 형식 만을 제공하기 때문에 하위 호환성을 고려한다.

스타일 선언

스타일 적용 우선순위: 인라인 스타일 > 내부/외부 스타일 시트 > 웹 브라우저 기본 스타일

<link rel="stylesheet" href="css/style.css" type="text/css">

자바스크립트

객체(Object) 기반의 스크립트 언어로, 웹의 동작을 구현하는 언어이다. 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용해서 서버 측 프로그래밍에서도 사용할 수 있다.

`<body>`

`Element`

Heading

<h1> - 이야기의 제목. 가급적이면 페이지 당 하나의 h1만 사용한다.

<h2> - 각 장의 제목

<h3> - 각 장의 하위 절 제목

Form

<form action="처리할페이지주소" method="get | post">

사용자로부터 입력을 받을 수 있고, 입력한 데이터를 서버로 보낼 수 있는 요소
action - 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시
method - 입력받은 데이터를 서버에 전달할 방식을 명시
- get - 주소에 데이터를 추가하여 전달하는 방식. 데이터가 주소창에 그대로 나타나며 전송할 수 있는 데이터 크기도 제한적이다. 검색엔진의 쿼리와 같이 크기가 작고 중요도가 낮은 정보를 보낼 때 사용한다.
- post - 데이터를 별도로 첨부하여 전달하는 방식. 데이터가 외부에 드러나지 않으며, 전송할 수 있는 데이터 크기 또한 제한이 없다. 보안성 및 활용성이 더 좋다.
type

text / password / radio / checkbox / select / textarea / button / submit / fieldset
- 속성
HTML5에 추가된 input type

number / range / color / date / time / datetime-local / month / week / email / tel / url / search

Emphasis / Strong

<em> - 중요한 문구에 사용하는 요소로 화면 판독기(스크린 리더기)에 다른 톤의 목소리로 표현된다. 기울임 꼴 스타일.

<i> - 단순 스타일로 중요한 문구에 사용하는 요소. 기울임 꼴 스타일. 사용 지양

<strong> - 중요한 문구에 사용하는 요소로 화면 판독기(스크린 리더기)에 다른 톤의 목소리로 표현된다. 굵은 글씨 스타일.

<b> - 단순 스타일로 중요한 문구에 사용하는 요소. 굵은 글씨 스타일. 사용 지양

<u> - 단순 스타일로 중요한 문구에 사용하는 요소. 밑줄 스타일 . 사용 지양

List

<dl> / <dt> / <dd> (Definition List) - 용어, 질문과 같은 상위 항목은 dt, 정의, 답변과 같은 하위 항목은 dd 요소를 사용

<ul> / <li> (Unorderd List) - 순서가 없는 리스트

<ol> / <li> (Orderd List) - 순서가 있는 리스트

인용구

<q> - 짧은 인용구

<blockquote> - 인용 블록 요소 | cite 속성 - 인용된 내용의 출처 URL

<abbr> - 준말, 머리 글자를 나타낸다. | title 속성 - 준말의 전체 뜻이나 설명을 툴팁으로 제공함

<address> - 주소를 나타낼 때 사용하는 요소

http://www.tcpschool.com/html/html_text_entities

예약어 (Entity)

ETC Element

<code> - 일반적인 컴퓨터 코드를 표시
<pre> - 공백을 유지하기 위해 사용하는 요소
<var> - 변수이름을 특별하게 표시하는 요소
<kbd> - 컴퓨터에 입력된 키보드 입력 표시하는 요소
<samp> - 컴퓨터 프로그램의 출력을 표시
<br> - 줄바꿈
<hr> - 수평선

Semantic Element (Layout Element)

검색어 최적화 (SEO)에도 큰 도움을 주는 시멘틱 마크업 작성.

컨텐츠에 정확한 의미, 기능, 모습을 확실히 담아서 마크업 작성을 해야한다.
스타일에 의미를 줄 수 있지만, 검색 엔진과 스크린 리더에 명확한 의미를 전달하기 위해서 올바는 Element를 사용하도록 하자!

<header>

HTML 문서나 섹션(section) 부분에 대한 헤더를 정의한다.
도입부에 해당하는 콘텐츠를 가지고 있는 부분이다.
한 문서 내에 여러 개의 header가 존재할 수 있다.

<nav>

웹 페이지에서 다른 카테고리 영역으로 이동할 수 있는 링크의 집합
HTML 문서 사이를 탐색할 수 있는 링크의 집합을 정의한다.
문서 내의 모든 링크가 nav 요소에 포함되는 것은 아니다.

main content

<main>

한 페이지에 한 번만 사용하고 body 안으로 들어가는 요소

<section>

article과 비슷하지만 하나의 기능을 구성하는 페이지의 단일 부분을 그룹화 하는데에 사용
제목을 가지고 있으며, HTML 문서의 전체적인 내용과 관련이 있는 콘텐츠들의 집합을 의미한다.
대체로 section 요소는 HTML 문서의 전체적인 내용에 포함되며, article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 된다.
h1 ~ h6 함께 사용하는게 좋다.

<article>

단일 블로그 게시물과 같이 독립적인 하나의 컨텐츠를 의미한다.
article 요소의 내용은 그 자체만으로도 이해가 되어야 하며, 웹 사이트 나머지 부분과는 별도로 읽을 수 있어야 한다.

<figure> & <figcaption>

책이나 신문 등에 포함되는 이미지 바로 아래에는 해당 이미지를 설명하는 caption이 위치하게 되는데, HTML5에서는 이와 같은 목적을 위해 figure 요소와 figcaption 요소를 제공한다.
그래픽과 비디오 등 독립적인 콘텐츠를 정의할 때 사용

<aside>

페이지의 주된 내용 이외의 다른 콘텐츠를 보여줄 때 사용
- 광고, 사이드 바 등
간접적으로 추가 정보를 제공하는 내용에 사용. 종종 <main> 안에 위치함

<time datetime="2016-01-20">20 January 2016</time>

시간과 날짜를 표시하는 요소

<mark>

하이라이팅 된 텍스트를 정의하는 요소

<details>

사용자가 보거나 숨길 수 있는 추가적인 설명문을 정의함

<summary>

details 요소에 나타날 내용을 정의함

<dialog>

다이얼로그 박스나 다이얼로그 윈도우를 정의함

<footer>

HTML 문서나 section 부분에 대한 푸터를 정의한다.
한 문서 내에 여러 개의 footer가 존재할 수 있다.

Reference

Getting started with the web - Learn web development | MDN

이것저것 정리하는 공간

HTML 기본

HTML

HTML

HTML | XHTML

HTML5

`<head>`

`<title></title>`

`<meta>` 속성(attribute)

파비콘

스타일 선언

자바스크립트

`<body>`

`Element`

Heading

Form

Emphasis / Strong

List

인용구

예약어 (Entity)

ETC Element

Semantic Element (Layout Element)

header

navigation bar

main content

footer

Reference

웹 접근성 (Web Accessibility)

0개의 댓글

HTML 기본

HTML

HTML

HTML | XHTML

HTML5

<head>

<title></title>

<meta> 속성(attribute)

파비콘

스타일 선언

자바스크립트

<body>

Element

Heading

Form

Emphasis / Strong

List

인용구

예약어 (Entity)

ETC Element

Semantic Element (Layout Element)

header

navigation bar

main content

footer

Reference

웹 접근성 (Web Accessibility)

0개의 댓글

`<head>`

`<title></title>`

`<meta>` 속성(attribute)

`<body>`

`Element`