🌏 웹 표준 (Web Standards)

브라우저마다 해석하는 방식에 차이가 있다. ➞ 같은 기능으로 동작하도록 표준 지정(W3C)

표준화 이전에 독자적인 플러그인을 사용하기도 했으므로 선택의 폭이 매우 좁았었다.
브라우저마다 스타일이 다를 수는 있다.(같은 기능을 함)
HTML5 - 2014년에 공식 표준화됨.

🌏 웹 접근성 (Web Accessibility)

일시적으로나 어떤 상황에서든 웹사이트를 이용할 수 있도록 하는 것.(마우스타자판, 음성인식 등)

일반적인 브라우저를 이용하기 어려운 경우 브라우징을 할 수 있도록 도와주는 역할을 하게 됨.

🌏 웹 호환성(Cross Browsing)

웹브라우저에 상관없이 의도한대로 기능 동작하는 것.(크로스브라우징)

브라우저에 따라 다른 기능을 할 수도 있음.(하지만 표준화되면서 대부분 같은 기능을 함)
어떤 브라우저를 이용하더라도 의도된 동작을 수행하도록 함.

📚 HTML(Hyper Text Markup Language)

HTML은 하이퍼텍스트 마크업 언어 (브라우저로 보여준다)

하이퍼 텍스트: 이동하기 위한 요소.
마크업 언어: 표현하는 것을 기술(정의)하는 기능의 언어. (<> 꺽쇠기호로 표현)

HTML을 작성할 때에는 태그(< >)라는 표기법으로 작성하고 태그의 이름은 HTML5 웹 표준에 맞게 작성한다.

<태그이름> 요소의 내용 </태그이름>

<h1>jongbin</h1>

태그의 시작을 알리는 여는 태그. <태그의 이름>
태그의 끝을 알리는 닫는 태그. </태그의 이름>
여는 태그와 닫는 태그 사이에 요소의 내용을 입력.
닫는 태그가 없는 태그들도 존재한다. (<input> 등)
대소문자 구분 x ( But 소문자를 권장 ) 가독성 좋게! 협업, 유지보수를 위해!
개행(줄바꿈)을 무시한다.

📒 빈 요소 (Empty Element)

내용이 없는 태그.(닫는 태그가 존재하지 않음)
꺽쇄< >내부 마지막에 /를 붙이는건 생략가능하지만 붙여서 명시해주는 것이 좋다.
일관성있게 /를 붙이면 전부 다 붙이고 그렇지 않으면 전부 다 붙이지 않는게 좋다.

<br>	줄바꿈
<hr>	내용의 구분(수평선)
<img>	이미지 삽입
<meta>	메타데이터 정의
<input>	입력요소

📕 요소의 중첩 (Nesting)

요소 내부의 내용으로서 요소를 삽입할 수 있다. (상하관계)
포함관계, 부모자식관계
요소는 겹쳐질 수 없다.

📗 주석

브라우저는 주석을 해석하지 않는다.

HTML의 주석 표현은 다음과 같다. 앞뒤를 각각 로 감싼다.

<!-- <p>jongbin</p> -->

브라우저가 주석의 시작부분()를 만날때 까지 무시하게 된다 따라서 주석 내부의 주석은 잘못될 가능성이 있다.

<!-- <div class="box">
  <!-- <div class="item">1</div> -->
  <div class="item">2</div>
  <div class="item">3</div>
</div> -->

원래 주석이었던 item 클래스의 1은 box 클래스 전부를 주석처리하면서 이상한 주석처리로 바뀌게 됨. (주의!)

📘 HTML 문서의 구조

HTML 문서는 DOCTYPE, html, head, boby를 필수로 포함해야 한다.

<!DOCTYPE html>     // HTML 버전 명시 (html5)
<html>              // root 요소
    <head>          // 웹페이지의 정보명시(사용자에게 보여지지 x)
    </head>
    <body>          // 보여지는 컨텐츠
    </body>
</html>

<!DOCTYPE html>는 버전을 명시한다 생략해도 되지만 관습적으로 명시한다.
모든 태그들은 <html></html>에 포함되어야 한다.

👀 DOCTYPE

Document type의 약자로 버전을 명시한다.

관습적으로 문서의 제일 위에 <!DOCTYPE html>(HTML5)이라고 명시한다.
html 이외의 버번의 명시는 다음과 같다.

<!-- XHTML 1.0 문서 선언 -->
<!-- Strict -->
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Transitional -->
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Frameset -->
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


<!-- XHTML 1.1 문서 선언 -->
http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<!-- HTML 4.01 문서 선언 -->
<!-- Strict -->
http://www.w3.org/TR/html4/strict.dtd">
<!-- Transitional -->
http://www.w3.org/TR/html4/loose.dtd">
<!-- Frameset -->
http://www.w3.org/TR/html4/frameset.dtd">

출처: https://dasima.xyz/doctype-html/

DOCTYPE을 선언하면 표준모드, 선언하지 않으면 비표준모드(호환모드)로 랜더링한다.
비표준모드(호환모드)일 경우 오래된 페이지도 최신 브라우저에서 깨지지 않게 하기 위해서 브라우저마다 다르게 보일 수 있다.

👀 head 태그

head태그에는 문서의 정보(메타데이터)를 가진다.

한개의 title요소를 포함해야 한다.
생략도 가능하지만 생략하지 않는 것을 권장.

👀 body 태그

body 태그 내부에는 모든 내용의 요소들이 담긴다.

한개의 body 태그만 존재할 수 있다.
일반 요소들처럼 style을 입힐 수 있다.

📙 콘텐츠 카테고리

하나의 요소가 여러 카테고리로 분류될 수 있다.(1:n 관계)
MDN에 어느 카테고리에 해당하는지 명시되어 있다.(기술 요약)
HTML5에서 비슷한 특징으로 나누어 7가지 카테고리로 세분화.

메타데이터 콘텐츠 (Metadata Content)	문서의 메타데이터, 다른 문서를 가르키는 링크 등을 나타내는 요소
플로우 콘텐츠 (Flow Content)	웹 페이지 상에 일부 메타데이터를 제외하고 거의 모든 요소. 보통 텍스트나 임베디드 콘텐츠를 포함 <body>의 내용이 흐름에 따라 배치되기 때문에 플로우 콘텐츠라고 함
섹션 콘텐츠 (Section Content)	웹 문서의 구획을 나눌 때 사용
헤딩 콘텐츠 (Heading Content)	섹션의 제목과 관련된 요소
프레이징 콘텐츠 (Phrasing Content)	문단에서 텍스트를 마크업 할 때 사용
임베디드 콘텐츠 (Embedded Content)	이미지나 비디오 등 외부 소스를 가져오거나 삽입할 때 사용되는 요소 (img, video, audio, iframe, canvas)
인터랙티브 콘텐츠 (Interactive Content)	사용자와의 상호작용을 위한 컨텐츠 요소 버튼을 클릭하거나, 텍스트를 입력 (form - input)

'HTML' 카테고리의 다른 글

[HTML] 웹 접근성 및 WAI-ARIA (0)	2023.02.20

개발종빈 🧑🏻‍💻

[HTML] HTML 개요

🌏 웹 표준 (Web Standards)

🌏 웹 접근성 (Web Accessibility)

🌏 웹 호환성(Cross Browsing)

📚 HTML(Hyper Text Markup Language)

📒 빈 요소 (Empty Element)

📕 요소의 중첩 (Nesting)

📗 주석

📘 HTML 문서의 구조

👀 DOCTYPE

👀 head 태그

👀 body 태그

📙 콘텐츠 카테고리

'HTML' 카테고리의 다른 글

티스토리툴바

[HTML] HTML 개요

🌏 웹 표준 (Web Standards)

🌏 웹 접근성 (Web Accessibility)

🌏 웹 호환성(Cross Browsing)

📚 HTML(Hyper Text Markup Language)

📒 빈 요소 (Empty Element)

📕 요소의 중첩 (Nesting)

📗 주석

📘 HTML 문서의 구조

👀 DOCTYPE

👀 head 태그

👀 body 태그

📙 콘텐츠 카테고리

'HTML' 카테고리의 다른 글

'HTML' Related Articles

티스토리툴바