'💻 프로그래밍/🅷 HTML' 카테고리의 글 목록

이번 포스트에서는 DOCTYPE html 선언 의미가 무엇인지에 대해서 알아봅니다.

<!DOCTYPE html>

HTML 파일내 DOCTYPE 을 선언하게 되면 이 문서는 웹 표준 문서이자 모든 웹브라우저에서 잘 돌아가는 호환이 되는 문서가 됩니다.
반대로 DOCTYPE 을 선언하지 않으면 비표준 문서가 됩니다.
표준과 비표준의 차이는 브라우저 화면을 그리는 방법을 스위치 한다고 할 수 있습니다.

모든 html 문서의 시작은 해당 문서가 어떤 문서 형식을 따르고 있는지 선언하는 것 부터 시작되며, 대소문자 구별없이 단지 선언을 하는 것이 중요합니다.
HTML 태그 역시 대문자와 소문자를 구별하지 않고 사용할 수는 있지만 가급적 소문자 사용을 권고합니다.

DOCTYPE 선언을 하지 않는 경우와 선언하는 경우를 파이어폭스 브라우저에서 확인해 보면..

DOCTYPE 비선언

DOCTYPE 선언

브라우저의 렌더링 방식이 DOCTYPE 을 선언하지 않으면 쿼크모드(Quirks mode) 이고 선언하면 표준 호환 모드(Standard mode) 로 차이가 있는것을 확인할 수 있습니다. 이에 따라 컨텐츠를 렌더링 하는 위치도 조금 다른것을 확인할 수 있습니다.

브라우저는 출력하고자 하는 문서가 최신이라고 판단하면 표준모드로 렌더링을 하고, 반면 예전 문서라고 판단하면 쿼크모드로 렌더링을 하게 됩니다. 쿼크 모드의 목적은 오래된 웹페이지들이 최신 버전의 브라우저에서 단지 깨져 보이지 않으려는 것에 있고 비표준적 방법의 CSS를 적용합니다.

중요한건.. 웹 표준으로 작성하는 문서가 오늘날 존재하는 대부분의 브라우저에서 올바르게 동작하기 때문에.. HTML은 DOCTYPE 을 선언하고 표준으로 문서를 작성해야 합니다.

'💻 프로그래밍 > 🅷 HTML' 카테고리의 다른 글

시멘틱 마크업(Semantic Markup) 이란? (0)	2022.11.12
HTML 이란? (0)	2022.11.12
HTML 무료 템플릿 (0)	2021.07.17

시멘틱 마크업(Semantic Markup) 이란?

HTML (HyperText Markup Language)은 웹사이트 컨텐츠를 설명하는데 사용되는 마크업 언어입니다.

HTML 은 컨텐츠의 의미를 설명하는데 유일한 목적을 가지고 있습니다.

비주얼 디자인(모양, 색, 크기 등) 이 목표가 아니라, 구조 설계(Structure Design)를 목표로 합니다.

HTML 파일에 컨텐츠를 작성하고 파일을 저장하여 웹브라우저로 실행해 보면..

웹 브라우저는 컨텐츠를 해석 해서 구조를 설계하게 됩니다. 구조를 설계한 부분을 확인 해볼려면 개발자 도구를 통해서 확인할 수 있습니다.

Elements 패널을 확인해 보면 이전에 작성하지 않은 <html>, <head>, <body> 라는 태그가 생성되어 있고 <body> 태그 안에 컨텐츠로 작성한 내용이 들어가 있습니다. 브라우저는 컨텐츠를 해석하게 되면서 자동으로 만들지 않았던 태그들을 구성하게 됩니다. 이러한 일을 마크업(Markup) 이라고 합니다.

위 경우는 내용만 있고 의미를 부여하지 않았기 때문에 논 시멘틱 마크업(non-semantic markup) 이라고 할 수 있습니다. 한마디로 의미가 없는 형태의 구조입니다.

여기에 간단히 구조를 작성해 보겠습니다. 제목(heading)을 의미하는 h 태그와 단락(paragraph)을 의미하는 p 태그를 사용하여 시작과 끝을 감싸주고 다시 브라우저로 실행하게 되면..

앞서 작성했던 문서와 다르게 브라우저는 하나의 컨텐츠로 인식하게 되며 제목 요소와 단락 요소를 구분할 수 있게 됩니다.

이를 통해서 브라우저는 제작자가 어떤 목적을 가지고 요소에 의미를 부여해서 보여주는지를 비로소 이해하게 됩니다.

이처럼 시멘틱 마크업은 매우 중요한 작업입니다.

컨텐츠에 의미를 부여하는 구조적 설계를 시멘틱 마크업(Semantic Markup)이라고 합니다.

시멘틱 마크업(Semantic Markup)을 왜 해야 할까?

월드 와이드 웹은 단순히 보여지는 것만이 전부가 아닙니다.

예를 들어 검색 로봇 또는 브라우저와 같은 기계, 볼 수 없는 사람(시각 장애자)은 보이는 것이 아닌 정보로 데이터에 접근하고 수집합니다.

쉽게 생각해서 드라마를 오디오만으로 듣는다고 생각해보면..

감정을 나타내기 위해서는 억양이 거세거나, 부드럽거나, 크게 외치거나, 작게 소근거려야 청취자들에게 전달이 되겠죠?

모두 동일한 음으로 이야기 한다면 아무런 감정을 나타낼 수 없을 겁니다.

마찬가지로 HTML 문서에 사용된 요소를 문맥에 맞게 분석하고, 적절한 요소를 통해 구조화 해야 비로서 정보의 체계(System)가 갖추어지게 됩니다.

HTML 이 쉽다고 말하는 사람들은 단순히 문법만 놓고 언어를 판단하기 때문에 그리 말하는 것으로, 문서의 구조를 고민하고, 판단하에 적절한 의미를 부여하는 일은 결코 쉬운 일이 아닙니다.

'💻 프로그래밍 > 🅷 HTML' 카테고리의 다른 글

DOCTYPE html 선언과 의미 (0)	2022.11.12
HTML 이란? (0)	2022.11.12
HTML 무료 템플릿 (0)	2021.07.17

이번포스팅은 HTML 이 무엇인지에 대해서 알아봅니다.

HTML 이란 ?

HTML 은 Hyper Text Markup Language 의 약자입니다.
각 단어의 의미를 순서대로 살펴보면..
Hyper 의 뜻은 '뛰어넘다', '초월하다'의 의미를 가지고 있습니다.
Hyper Text 는 사용자 경험에 따랐을때 텍스트에 밑줄이 그어지게 되고 사용자가 이것을 클릭하게 되면 페이지가 전환이 되는 링크 형태의 시스템을 말합니다.
Markup 은 어떤 구조를 설정할때 사용이 되며..
Language 는 언어입니다.

결과적으로 HTML 이란 언어는 구조를 설계할적에 사용되는 언어이며 하이퍼링크(hyperlink) 시스템을 가지고 있습니다.

모든 파일은 확장자라는 포맷을 가지고 있습니다. (jpg, gif, psd, ai, pdf, doc...)
HTML 파일은 htm 또는 html 확장자 포맷을 사용합니다.

HTML 문서는 단순한 텍스트 파일에 불과합니다.
이 텍스트 파일을 웹브라우저가 해석해서 구조를 통해 화면에 사용자가 보도록 렌더링(Rendering)을 해주게 됩니다.
(렌더링이란 그림을 그리는 것입니다.)
사용자는 결국 브라우저를 통해 View 라고 하는 화면을 보게 됩니다.

'💻 프로그래밍 > 🅷 HTML' 카테고리의 다른 글

DOCTYPE html 선언과 의미 (0)	2022.11.12
시멘틱 마크업(Semantic Markup) 이란? (0)	2022.11.12
HTML 무료 템플릿 (0)	2021.07.17

HTML5 UP

여러 가지 html5 버전 UI 템플릿을 제공하고,

개인용 상업용 무료라고 한다.

간단하게 웹 개발을 할 때 도움이 될 거 같다.

라이센스는 CCA 3.0

https://html5up.net/

HTML5 UP

Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.

html5up.net

'💻 프로그래밍 > 🅷 HTML' 카테고리의 다른 글

DOCTYPE html 선언과 의미 (0)	2022.11.12
시멘틱 마크업(Semantic Markup) 이란? (0)	2022.11.12
HTML 이란? (0)	2022.11.12

INTHEJ.LOG