[TIL] HTML living standard, emmet, document element & metadata

최영준·2022년 8월 30일

HTML

목록 보기

1/2

멋쟁이 사자처럼 프론트 엔드 스쿨을 시작한지 이틀째.
마음을 다잡고 기록하기 위해.
비록 따라쓰기 일지라도, 머릿 속에 한 자 라도 더 집어넣기 위해!

XHTML과 HTML living standard

XTML이란 웹페이지를 제작하기 위해 사용되는 HTML4를 XML에 맞도록 재정의한 언어라고 할 수 있다.
HTML5보다 조금 더 구조화된 혀식과 엄격한 문법을 가지고 있다.

HTML 문법

HTML 요소는 HTML 태그와 속성으로 구성

보통 여는 태그와 닫는 태그 한 쌍으로 구성

일부 요소는 여는 태그로만 구성

속성은 항상 여는 태그에 삽입

시멘틱한 HTML: 대부분의 요소에는 고유한 의미가 있다.
이 의미는 사람에게 필요로 하기 보다는 기계가 이해할 수 있는 언어로 HTML 을 코딩한다는데 그 목적이 있다.
브라우저가 우리의 문서를 이해할 수 있게 되는 것이다.
이를 통해 SEO, 접근성 등에 도움을 줄 수 있다.

가장 많이 사용하는 태그들

웹표준 통합에 대하여

2019년 W3C는 HTML5.3 권고안을 내세우지만 WHATWG가 거부의사를 보이면서, 표준화 이슈가 본격적으로 다시 시작되었다. 이에 결국 W3C는 신규 HTML5 이후 버전의 표준발행을 포기하고 WHATWG의 방식을 수용하도록 합의 하였다.
하여, 2019년 부터는 HTML대신 HTML Living Standard로 불리우며 WHATWG가 주관하게 되었다.

(WHATWG의 명세가 표준임을 명시하는 W3C)

Emmet이란?

강력한 자동완성 기능 등으로 HTML 작성 속도를 크게 향상시켜주는 플러그인
요소(Elements) 생성

생성하려는 요소의 이름을 입력한 뒤 tab을 누르면 태그가 자동 생성된다.
        h1
        h1+h1+p
        h1*3
        h1{hello world}*10
        h1#hojun
        h1.hoju
        (div>table>(tr>(td*2))*3)+(footer>p)
        div#one.c1.c2.c3
        ul>li.item$*5
        a{Click}
        lorem
        img:z
        
        lorem*5
        
        lorem5
        [a='value1' b="value2" c=1]
        a[href='www.naver.com']

VSC 단축키

            Ctrl + \ : 토글 보이기
            Ctrl + O : 파일 열기
            Ctrl + P : 프로젝트 검색
            Ctrl + F : 열려 있는 파일 내에서 검색
            Ctrl + Shift + F : 열려 있는 전체 프로젝트 내에서 검색
            Ctrl + , : Settings
            Ctrl + N : 새로운 파일
            Ctrl + S : 파일 저장
            Ctrl + Shift + S  :다른 이름으로 저장
            Shift + del : 라인 지우기
            Ctrl + 클릭 : 여러줄 입력

document element & metadata

<!DOCTYPE html>
DTD (Document type Definiton) 라고 부르며 문서의 타입에 대한 정보를 제공한다.
만약 제거하면 브라우저는 쿽스 모드(quirks mode: 하위 호환성 모드)로 html을 랜더링하게 된다.
쿽스 모드에서는 브라우저마다 구현 방식이 조금씩 다르기 때문에 다르게 동작할 가능성이 있으므로 반드시 문서 최상단에 선언을 해야한다.
<html>
 HTML은 document element 즉, 문서의 최상위 요소이다. lang 속성을 통해 문서의 주 언어가 무엇인지 설정 할 수 있다. 주 언어 설정은 검색엔진과 스크린 리더의 작동에 영향을 미치게 된다.
<head>
 문서에 적용되는 메타데이터의 집합이다. 
<title>
 문서의 제목을 의미한다. 반드시 한번만 사용되어야 한다.
 <link>
  외부의 자원을 문서와 연결하는 역할을 한다.
<meta>
  해당 문서의 메타데이터를 나타내는 요소이다.
 - charset: 문서의 문자 인코딩 상태를 의미한다. 보통 UTF-8로 설정하여 전 세계 모든 언어를 지원하도록 한다.
 - name="author": 페이지를 작성한 개발자의 이름이다.
 - name="decription": 페이지에 대한 설명 정보를 나타낸다. 검색엔진이 사용자에게 결과 화면을 출력할 때 중요한 고려 요소이다.
 - name="viewport": 모바일 장치에서 사용자 화면의 사이즈에 대한 값을 설정한다. 필수는 아니지만 스마트폰이나 태블릿 같은 모바일 기기에서도 많은 접속이 이뤄지는 요즘은 반드시 넣어주는게 좋다.
 - http-equiv="X-UA-Compatible": 프라그마 지시문(Pragma directive: 컴파일러에게 특정 기능을 지정)이라고 한다. 브라우저에 어떤 행동을 지시하려는 목적으로 사용한다. X-UA-Compatible 속성값은 IE 브라우저에서 페이지를 어떠한 형식으로 랜더링할지 지정할 수 있으며 content='IE edge'는 IE8 버전 이상에서 항상 표준모드로 렌더링 되도록 한다.

최영준

기록하는 습관을 들여보자!

다음 포스트

[TIL] Sections & Grouping content(페이지 레이아웃)

4개의 댓글

yuzomi

2022년 8월 30일

오늘 배운 내용 깔끔하게 정리를 잘하셨네요! ✨ 앞으로의 기록도 응원합니다 🔥

1개의 답글

승연

2022년 8월 30일

정리 깔끔하게 잘하시네요! 배우고 갑니다👍

1개의 답글