HTML 궁금했던 개념들
DOCTYPE
Document Type의 약자로, HTML이 어떤 버전으로 작성되었는지 미리 선언하여 웹 브라우저가 내용을 올바로 표시할 수 있도록 해주는 것이다. <!DOCTYPE>으로 선언하는데 이걸 해주지 않으면 호환 모드로 동작한다. 호환 모드의 경우 각 브라우저마다 문서를 나타내는 방식이 다르기 때문에 크로스 브라우징 이슈가 훨씬 심해지게 된다.
호환모드와 표준모드
과거에는 웹 표준이 따로 없었다. 그러나 W3C가 웹표준을 만들면서 브라우저가 웹 페이지를 제대로 표현할 수 없게 되자 렌더링을 할 때 표준 모드와 호환 모드로 렌더링을 할 수 있게 옵션을 제공하였다.
브라우저는 HTML문서가 DOCTYPE을 가지고 있으면 표준모드로 렌더링을 하고, 가지고 있지 않다면 호환 모드로 렌더링한다.
호환 모드로 렌더링을 하게 되면 오래된 웹페이지들을 최신 브라우저에서도 꺠지지 않게 하려고 한다. 따라서 브라우저마다 다르게 보일 수 있다.
따라서, 특별한 경우가 아니라면 DOCTYPE을 명시하여 표준모드로 렌더링 하는게 좋다.
DTD (Document Type Definition)
문서 형식을 정의해놓은 것으로 DOCTYPE을 명시할 때 사용한다. 즉, HTML 문서가 어떤 문서 형식을 따르는지 DOCTYPE 에서 DTD를 지정해준다. DTD는 다음과 같은 것들이 있다.
- XHTML 1.1
-
XHTML 1.0
- Strict DTD
- Transitional DTD
- Frameset DTD
-
HTML 4.01
- Strict DTD
- Transitional DTD
- Frameset DTD
- HTML 5
현 시점에선, HTML 5의 DTD로 DOCTYPE을 명시하는 것이 제일 바람직하다.
<!DOCTYPE html>data-속성
DOM에 데이터를 저장할 수 있는 사용자 정의 데이터 속성으로 data- 다음 오는 값이 데이터가 된다. 이 속성은 해당 웹페이지가 독자적으로 사용하는 값이다. 즉 웹페이지와 독립적인 소프트웨어가 이 속성을 사용하면 안된다.
예를들어, 음악 사이트에서 앨범 트랙의 음악을 리스트 형식으로 나타내는데 그걸 시간 순으로 정렬하기 위해서 data- 속성으로 음악 시간을 삽입한다고 하자.
<ol>
<li data-length="2mlls">안녕</li>
...
</ol>만약 이 음악 사이트와 전~혀 상관없는 외부에서 음악 시간을 알아내기 위해 사용한다면 목적이 부합하지 않는 것이다. 따라서 data- 속성은 해당 사이트만의 자체 스크립트를 위한 속성이라고 할 수 있다.
script tag
스크립트 태그에는 async와 defer라는 속성이 있다.
<script>: HTML 파싱이 중단되고 즉시 스크립트를 다운받으며 로드된 스크립트가 실행되고 파싱이 재개된다.-
<script async>: HTML 파싱과 병력적으로 로드되며, 스크립트를 실행할 때 파싱이 중단된다.async속성의 경우 스크립트 실행의 순서가 스크립트 로드가 완료시점에 결정되므로 실행 순서가 중요한 스크립트에 async를 사용할 때에는 주의해야한다.음,,
async답게 로드되면 태스크 큐에 스크립트를 넣는다고 생각하면 이해하기 편하겠다. 로드가 완료되면 큐에 넣고 하나씩 빼면서 스크립트를 실행하겠네. 그러면async는 의존성이 없는 스크립트에 이용하면 용이하겠군. 근데 HTML5에 async=false 속성 지정시 호출 순서대로 실행되도록 추가됐네 (우선순위 큐 생각하면 이해하기 편하겠군 ) -
<script defer>: HTML 파싱과 병렬적으로 로드되고 파싱이 끝난 뒤에 스크립트가 실행된다.defer속성은 기본적으로 호출된 순서대로 실행된다.
시멘틱 마크업
시맨틱(Semantic)이란 ‘의미론적인’의 뜻을 가지며 마크업(Mark Up)이란 HTML 태그로 문서를 작성하는 것을 말한다. 따라서 시맨틱 마크업이란 의미를 잘 전달하도록 문서를 작성하는 것을 말한다.
작성방법
시맨틱 마크업을 하기 위해선 각 태그를 그 용도에 맞게 사용해야한다.
- 헤더/푸터에
<header>,<footer>사용 - 메인 컨텐츠에
<main>과<section>사용 - 독립적인 컨텐츠에
<article>사용 - 최상위 제목으로
<h1>사용 - 순서가 없는 목록으로
<ul>과<li>사용 - 내비게이션에
<nav>사용
이런식으로 태그가 가지고 있는 의미에 맞게 사용하는 것인데, 이런 점 이외에도 CSS 스타일을 명시하는 태그를 사용하지 않는 것 또한 시맨틱 마크업의 한 종류이다. 즉, 태그가 가지는 의미 자체가 스타일이라면 마크업 자체가 스타일을 갖는 것이기 때문에 시맨틱 마크업에 적합하지 않다.
예를들어 <b> 와 <storing> 는 둘다 Text요소를 진하게 하지만, <b>태그의 경우는 그 자체가 bold의 약어이기 때문에 태그 자체가 스타일을 가진다고 할 수 있다. 하지만 <stong>의 경우에는 “텍스트 요소가 강조되어야 한다.” 라는 의미를 갖고있기 때문에 시맨틱 마크업에 더 적합하다.
특징
- 검색엔진이 시맨틱 태그를 중요한 키워드로 간주하기 때문에 SEO에 유리하다
- 웹 접근성 측면에서 , 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다.
- 단순한
div나span으로 둘러싸인 요소들보다 코드를 볼 때 가독성이 더 좋다.
![[HongDongUk]](/static/a60d793d17c3aad0361c9192a3b51381/a12fc/profile.png)