저번 글에 이어서 계속해서
HTML에 대해 알려 드리도록 할게요
저번 글에서는 드디어
HTML의 올바른 작성법에
대해서 설명해드렸는데요.
기억이 나질 않으신다면
밑에 글을 참고해주세요.
기초코딩- HTML의 기초 ( )
저번 글에 이어서 계속해서 HTML에 대해 알려 드리도록 할게요. 저번 글에서는 태그 A의 속성 중target이라는 속성과태그 img에 src라는 속성으로이미지를 넣는 방법에 대해알려드렸는데요. 기억이 �
tm-csc.tistory.com
이번 글에는 저번 글에서
살짝 보여드렸던
<head>라는 태그에
대해 그 영역에 대해
조금 더 깊이 알려드릴게요.
먼저 구글에 나무 위키를
검색해보도록 할게요.
그럼 이렇게 주소와
나무 위키라는 타이틀과
그에 대한 요약내용을
볼 수 있죠.
그럼 나무 위키로 클릭해서
들어가 볼까요.
그럼 상단에 저번 시간에
우리가 변경해보았던
<head>에 타이틀 부분이
나무 위키:대문 블라블라
써져있는 게 보일 거예요.
그럼 여기서 F12버튼을
눌러주세요.
그럼 이런 창이 나오게 될 텐데요.
Elements 탭에서 html이라고
적여 있는 거 보이시죠.
그리고 title이라고 적혀있는 부분에
나무 위키 :대문-나무 위키
라고 적혀있을 거예요.
그럼 그 내용을 수정 한번
해보세요.
이렇게 아무 말로 변경해도
바로 변경되는 걸 보실 수
있을 거예요.
그럼 이제 구글에
네이버를 검색해볼까요?
그리고 똑같이
네이버에 접속해서
f12를 눌러보면
검색했을 때 나오는 요약내용에
대한 글이 써져있는 것도
확인할 수 있습니다.
즉 구글에서 검색하게 되면
구글은 사이트에서 타이틀과
description 요약된 설명을
가져오는 거죠.
하지만 이외에도
엄청나게 많은 태그들이
<head>에 존재하지만
보이지 않는 태그들이죠.
그럼 우리도 보이지 않는
태그들을 우리가 만드는
사이트에 넣어볼까요.
그럼 먼저 VSC 실행해주시고요.
<head> 부분에 meta라는
태그를 입력해주세요.
meta라는 건 부가적인
정보라는 뜻입니다.
title. base, link, style, script
등으로 표현할 수 없는
다양한 종류의 데이터를
나타내기 위해 사용하는데요.
meta 태그는 name과
content라는 두 개의
속성을 가지고 있죠.
그래서 네이버에 대한
description meta 태그를 보면
<meta name="description" content="네이버 메인에서 다양한 정보와 ~~~~~"/>
이렇게 적혀있는 걸
볼 수 있었던 거죠.
그래서 만약 우리가
만드는 사이트에 위의
meta 태그를 복사해서
VSC에 붙여 넣고 저장한 뒤
크롬으로 확인해도
전에 만들었던 사이트와
보이는 면에서는 차이를
느낄 수 없는 거죠.
왜냐하면 head에 작성한
태그들은 안보이니까요.
그럼 다음 글에는
왜 보이지도 않는 meta
태그를 작성해야 하는지
그리고 또 어떤 종류의
태그가 있는지 자세히
알려드리도록 할게요.
여기까지 궁금하신 점
있으시면 댓글에 남겨주시고요.
공감과 구독도 부탁드릴게요~
