저번 글에 이어서 계속해서
HTML에 대해 알려 드리도록 할게요
저번 글에서는
head영역과 meta 태크에
대해서 설명해드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩- HTML의 기초 (meta tag, head영역) - 1편
저번 글에 이어서 계속해서 HTML에 대해 알려 드리도록 할게요 저번 글에서는 드디어 HTML의 올바른 작성법에 대해서 설명해드렸는데요. 기억이 나질 않으신다면 밑에 글을 참고해주세요. tm-csc.tis
tm-csc.tistory.com
그럼 이번 글에는
또 다른 meta 태그와
왜 보이지도 않는 meta
태그를 작성해야 하는지
자세히 알려드리도록 할게요.
우선 저번처럼 크롬으로
네이버에 방문해서 F12를
눌러주세요.
그럼 Elemets에 <head> 영역이
보이실 텐데요.
펼 처서 보게 되면
<meta charset="utf-8">
이라고 쓰여있는
meta 태그를 볼 수 있죠.
보이기에는 별거 아닌 것처럼
보이지만 사실을 매우
중요한 태크인데요.
왜냐하면 이 태그는 브라우저에게
text를 어떻게 표현해야 하는지
말해주는 태그이기 때문이죠.
이게 무슨 말이 나면
한글 또는 특수문자가 있는
다른 언어를 입력하게 되면
브라우저가 그 문자들을
이해하지 못할 수도 있습니다.
그래서 charset 매타 태그를
적어주고 브라우저가 이를
인식하게 해 주는 거죠.
그럼 또 다른 meta 태그에
대해 알려드릴게요.
사진에 lang="ko"
라고 적혀있는 게 보이시나요?
눈치가 빠른 분들을 아시겠지만
바로 language 언어를 뜻하는
태그입니다.
그럼 해당 부분을 지우면
html은 한글을 인식하지
못할까요?
그렇지는 않습니다
그렇다면 왜 lang 태그를
넣어야 할까요?
그 이유는 구글, 네이버와
같은 검색엔진들에게 검색할 때
도움을 주기 위해서인데요.
해당 사이트에서 주로 사용되는
언어가 어떤 언어로 사용되고
있는지 말해주기 위해서인 거죠.
한국어인지 영어인지 일본인지
검색엔진에게 알려주는 거죠.
즉 meta 태그를 다는 이유는
내가 만드는 사이트의 정보를
브라우저에게 알려주기 위함이죠.
최대한 명확하게 우리 사이트가
어떤 사이트인지 말이죠.
어떤 언어를 사용하며
어떤 내용을 담고 있고
제목은 어떻게 표시하는 등
요약하고 정리해서 말이죠.
즉 meta 태그의 설명 부분을
잘 설정해 놓는다면 검색했을 때
어떤 키워드로 내 사이트가 검색이
되게 할지 설정할 수 있다는 거죠.
당연히 모바일로 누군가에게
전송할 때도 또는 공유할 때도
전송되는 사진의 이미지나
타이틀 설명까지도 당연히
설정할 수 있는 거죠.
위의 사진은 제목만 있고
글에 대한 설명은 없지만
대표 사진을 모바일에 맞게
바꿀 수도 또는 상세 설명을
더 요약해서 적을 수도 있는 거죠.
그만큼 head가 하는 일은
매우 중요하고 잘 설정할수록
사이트를 예쁘게 또 멋있게
만들 수 있습니다.
여기까지 궁금하신 점
있으시면 댓글에 남겨주시고요.
공감과 구독도 부탁드릴게요~
