본문 바로가기

프론트엔드 로드맵

프론트엔드 로드맵 7 - HTML이란?

반응형

HTML은 HyperText Markup Language.


HTML 마크업은 HTML 요소(엘리먼트, Elements)와 그들의 속성(Attributes)과 문자 기반 데이터 형태와 문자 참조와 엔티티 참조를 포함하는 몇 가지 핵심 구성 요소로 이루어져 있다. 또 다른 중요한 구성 요소로는 문서 형식 정의(DTD, Document Type Definition)를 명시하는 문서 형식 선언(document type declaration)이다. 차기 HTML 5에서는 DTD를 지정하지 않아도 되고 오직 레이아웃 모드로 지정된다.

 

HTML 문서는 완전한 HTML 요소로 구성되어 있다. HTML 요소의 가장 보편적인 형태는 구성 요소는: "시작 태그"(Start Tag), "종료 태그"(End Tag), 또 태그들 내에서 특성을 부여한다. 마지막으로 문자와 그래픽 정보 콘텐츠를 화면에 표현한다. 
HTML 요소는 태그의 사이와 포함되는 모든 것이다. 태그는 꺾쇠괄호(<>)로 둘러싸인 키워드이다. 

태그는 컨텐츠를 감싸서 그 정보의 성격과 의미를 정의한다. 열리는 태그가 있으면 닫히는 태그가 있어야 한다. 닫히는 태그는 태그 명 앞에는 /가 붙는다. 닫히는 태그가 필요없는 경우 <태그명 />의 형식을 갖는다. 

HTML 코드를 파일에 저장하고 웹브라우저에서 로딩하면 웹페이지가 만들어진다. HTML 파일은 텍스트를 편집할 수 있는 에디터로 만들 수 있고, 확장자명으로 html 혹은 htm을 사용한다. 


<HTML에서 사용되는 마크업 요소의 형태>
구조적 마크업은 본문의 목적을 표현한다. 브라우저에서 이 장의 처음에 나오는 HTML 마크업 제목과 유사한 방식으로 해석될 것이다. 구조적 마크업은 어떤 특정한 렌더링을 표시하지 않지만, 대부분의 웹 브라우저는 요소 포맷팅에 대한 기본적인 스타일을 표준화했다. 텍스트는 캐스캐이딩 스타일시트(CSS)로 더 꾸밀 수 있다. 표현적 마크업은 기능에 관계없이 본문의 외관을 표현한다. 

예를 들어, 굵은 글씨는 시각적 결과 장치가 굵은 글씨 속에 있는 "boldface"를 해석해야 한다는 것을 지시하지만, 이것을 할 수 있는 장치가 무엇을 해야 할 지(예를 들어 텍스트를 크게 읽어주는 장치와 같은 )에 대한 어떠한 지시도 하지 않는다. 굵게와 이탤릭과 같은 경우에는 보통 시각적 해석에 필적하는 여러 가지 요소가 있지만, 본래가 더 의미론적이다. 
즉, 각각 strong emphasis와 emphasis같이 할 수 있다. 음성 사용자 에이전트가 어떻게 후자의 두 요소를 해석하는 지 지켜보는 것은 쉽다. 그러나 그것은 그들의 표현 상대와 맞먹지는 않는다. 예를 들자면 책의 이름을 강조하는 것이 스크린을 읽는 유저에게는 바람직하지 않지만, 화면에서 그러한 이름이 이탤릭체로 될 것이다. 대부분의 표현 마크업 요소는 스타일 디자인에 근거한 CSS에 호응해서 HTML 4.0 스펙에서는 받아들여지지 않을 것이다.

하이퍼텍스트 마크업은 다른문서와 연결시켜주는 문서의 부분이다. XHTML 1.1 버전을 통한 HTML은 본문속에서 하이퍼링크를 생성하기위해 anchor 요소의 사용을 필요로 한다. 덧붙여, href 속성은 반드시 정확한 URL을 설정해야만 한다. 

참고 사이트 : https://ko.wikipedia.org/wiki/HTML

반응형