[HTML] head 태그 안의 태그들

jiseong·2021년 10월 26일
0

T I Learned

목록 보기
113/291

HTML을 작성할 때, 단축키로만 하다보니 head에 작성된 의미가 정확히 무엇인지 모르고 쓰고 있었기 때문에 무슨 의미인지 알고 싶었다.

head 태그

head 태그는 문서의 속성을 지정하는 부분으로 HTML의 body태그에 담긴 내용과는 달리 화면에 표현되지 않는다.

아래에는 head태그에 들어가는 태그들이다.

title

웹 페이지의 제목을 나타내는 태그 ( 웹 사이트 탭에 보여진다. )

meta

<meta http-equiv="X-UA-Compatible" content="IE=edge">

IE 브라우저의 경우 여러가지 버전들이 존재하며 버전에 따라 같은 웹 페이지라 하더라도 다르게 보여지는 경우가 존재한다.( 과거 웹표준을 지키지 않았던 IE5, 6, 7를 기준으로 제작된 웹 페이지 ) 그래서 이러한 문제를 해결하기 위해 MS에서 제공하게 된 기능이 호환성 보기 == 쿼크 모드이다.

하지만, 특정 버전의 IE를 기준으로 만들어진 웹 페이지가 있다면 사용자가 직접 클릭하여 적용하기보다는 알아서 적용할 수 있게 하려면 아래와 같이 작성하면 된다.
<meta http-equiv="X-UA-Compatible" content="IE=7">

위의 방식으로 작성하였다면 IE 7 기준에 맞추어 디자인된 웹 페이지가 보여지게 된다. (해당 페이지가 IE 7에 최적화 되어 있을 경우)

edge라고 작성한 것은 IE 브라우저의 최신 버전의 렌더링 엔진을 사용하라는 의미이다.

<meta charset="utf-8">

문서의 문자 인코딩 방식이 utf-8임을 브라우저에 알리기 위한 것

인코딩을 명확하게 작성하지 않으면 브라우저 설정 상황에 따라 자동으로 인코딩을 추정해서 처리하기 때문에 한글이 깨지는 경우도 존재한다. 따라서 다양한 경우에 한글이 깨지지 않고 잘 보이기 위해서는 해당 태그를 꼭 작성해줘야 한다.


Reference

0개의 댓글