< head > 태그에 관하여 🎩
꿀젤리
< head > 태그에 관하여 🎩B4 Junior2022. 4. 28. 20:51@꿀젤리
Table of Contents

 < head > 태그는 내부에 컴퓨터가 읽을 수 있는데이터인 메타데이터 ( metadata ) 가 위치하는 태그입니다. 

📌 메타데이터란 ?

메타데이터는 사람이 읽기 힘든 모양을 하였지만 기계가 읽을 수 있는 정보를 말합니다.

e.g)

<link rel="stylesheet" type="text/css" href="/examples/media/expand_style.css">

< head > 태그의 위치는 html의 첫번째 자식으로 쓰여야합니다.

<html>
	<head> 항상 여기 위치합니다 !! </head>
</html>

메타데이터의 종류

메타데이터의 종류는 다양합니다. CDN 으로 외부 라이브러리를 끌어와서 쓰거나 javascript 파일을 끌어오거나 title을 정해 페이지 제목을 정하는 등 다양하게 사용할 수 있습니다. 그렇지만 사용하는 방식은 정해져 있는데요. 이를 알아보겠습니다.

 

메타데이터를 사용하기 위해서는 태그를 이용합니다.

< title > , < link > , < base > , < style > , < meta > , < script > , < noscript > , < template > 총 8가지 종류의 태그를 사용합니다.

 

이 중 우리는 < title > , < link > , < style > , < script > + < meta > 4 ~ 5가지를 주로 접하게 될 가능성이 큽니다.

 

📌 < TITLE >

기본적으로 < title > 태그는 페이지의 제목을 정한다는 점에서 가장 필수적인 요소로 꼽힙니다.

⛔️ 주의 할 점 : < title > 태그는 반드시 < head > 태그 내에서 단 한 개만 존재해야 합니다.

사용 예시 ) 

<!DOCTYPE html>
<head>
    <title>안녕하세요 꿀젤리입니다.</title>
</head>
</html>

결과 ) 

📌 < link >

실무에서나 학습에서나 가장 많이 쓰이지 않을까? 라고 생각이 드는 태그입니다.

 

외부 라이브러리를 cdn으로 가져올수도, pc 내부의 zip파일을 가져올수도, css를 가지고 올 수도 있는 아주 다재다능한 태그입니다.

기본적으로 다른 파일을 작업중인 html 파일과 연결지어준다는 의미의 < link > 입니다.

많은 방법을 소개할 수 있지만 MDN 문서에 게시된 방식만을 다루도록하겠습니다.

 

기본적인 형식

<link href="파일의 내부 주소" rel="stylesheet"> // 파일 내부 주소  = "/main.css" 이런 식

파비콘 적용하기

<link rel="icon" href="favicon.ico">

위 2번째 소스를 활용하여 파비콘 ( favicon ) 변경도 가능합니다.

파비콘이란 ? 일반적으로 144 x 144 픽셀 미만의 작은 사이즈의 사진, ico 파일 형식을 가지며

인터넷 탭 창에서 제목 옆의 사진으로 쓰인다.

< 파비콘이 적용 된 모습 >

외부파일 적용하기

이번엔 구글에서 제공하는 아이콘들을 별도의 파일 다운로드 없이 외부에서 끌어와서 쓰는 방법을 알려드리겠습니다.

어떤 아이콘이 있는지 자세히 보시려면 아래 링크!

👇👇👇👇

https://fonts.google.com/icons?selected=Material+Icons

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

웹사이트를 구현하다보면 어쩔수 없이 외부의 링크나 외부의 파일을 가져다 쓰게 되어있습니다.

< script > 태그를 이용해서 외부 파일을 가져 올 수도 있지만, < link > 를 통해서 가지고 올 수도 있습니다.

<!DOCTYPE html>
<head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <span> 구글에서 제공하는 icon 사용하기 </span>
    <span class="material-icons">home</span>
    <span class="material-icons">favorite_border</span>
    <span class="material-icons">face</span>
</body>
</html>

< 외부 폰트 적용 >

이러한 방식으로 외부의 파일을 가져다 쓸 수 있습니다. 이러한 방식은 형식은 변화가 없으니 많은 연습을 통해서 몸에 익혀놔야 합니다. 너무 자주쓰는거라 기본중에 기본이니까요!

 

📌 < STYLE >

자신이 만든 html을 꾸미는 방식은 다양합니다. 대표적으로 두가지 예시를 들 수 있는데,

첫째 , html 내부 head 태그 안에 < style > 태그로 스타일을 정의 하기

둘째 , html 을 css , scss , sass 등등과 같은 스타일을 정의한 파일을 받아오거나 작성하여 꾸미는 방식

 

첫째와 둘째 모두 장단점이 있습니다.

 

첫번째 방식은 html 내부에 작성하기 때문에 별도의 다른 파일을 작성 할 필요가 없다는 장점이 있지만 웹페이지의 페이지수가 많아진다 => html파일이 많아진다는 점이 있는데 html 파일이 늘어날 때마다 각 html 파일 하나하나 < style > 태그로 정의를 해줘야합니다.

 

두번째 방식은 html 파일이 많아도 각 html 파일 내부에 소스 한줄만 추가한다면 바로 스타일의 적용이 가능하다는 장점이 있습니다. 하지만 초심자나 파일관리에 미흡한 사람이 작성을 하게되면, class 나 id 겹침으로 인해 스타일이 꼬일 가능성도 있고 파일이 점점 많아지다보면 관리도 힘들다는 단점이 있습니다.

 

현 실무에서는 무조건적으로 두번째 방식을 사용합니다. ( 사실 뭐,, css 쓰는데보다 scss , sass 쓰는데가 많긴 하지만요. )

 

두번째 방식은 css를 다루게 되는 편에서 다룰 테니 여기서 다루지 않겠습니다.

첫번째 방식 예시를 보여드리자면,

<!DOCTYPE html>
<head>
    <title>안녕하세요 꿀젤리입니다.</title>
    <link rel="icon" href="./favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .hot_red {
            color: red;
        }
    </style>
</head>
<body>
    <span class="hot_red"> 구글에서 제공하는 얼굴 icon </span>
    <span class="hot_red material-icons">face</span>
</body>
</html>

< 간단한 문구에 적용한 style >

간단한 코드 몇줄로 글씨의 색상을 바꾸거나 크기를 조절하고 또 도형을 만들어 낼 수도 있습니다.

이 방식은 제가 웹을 깊게는 아니어도 2~3년정도 공부한거같은데 마주한 경우가 거의없습니다.

알고 있어도 딱히 도움 되진 않지만 모르고 있으면 부끄러울만한 지식이기에 알아는두시는걸 추천드려요!

 

📌 < META >

SEO 단계에서 매우 중요한 < META > 태그입니다.

SEO 란 ? : 구글 네이버 등등 각종 검색포털 사이트에서는 웹사이트에 대한 정보를 수집하는데 봇 ( 자동화 된 도구 (?) ) 를 사용하는데 이 봇에게 내 사이트에 대해 파악하기 쉽도록 해주는 것입니다.

SEO 를 말 그대로 옮긴다면 검색엔진최적화 입니다.

< META > 태그는 다음과 같이 사용합니다.

<meta name="author" content="behoney"> // 이 문서를 소유한 사람
<meta name="generator" content="behoney"> // 이 문서를 작성한 사람
<meta name="description" content="꿀꾸는 개발자의 개발일기"> // 이 문서를 간단하게 요약 
<meta name="keyword" content="개발일기,html,css"> // 이 문서의 키워드를 정리 쉼표로 구분

요즘은 SNS 의 발달로 open graph meta 태그라는 것도 존재합니다. 이런것은 개인적으로 공부하시는걸 추천드립니다.

<meta name = "og:description" content ="히히" >

 

 

📌 < SCRIPT >

드디어.. 드디어 나왔습니다.

얘 없으면 솔직히 말해서 현시대에서는 웹개발이 불가능합니다.

JAVASCRIPT 를 HTML 내부에서 사용 할 수 있게 도와주는 태그입니다.

JAVASCRIPT 란 JS로 불리고 간단하게 설명을 해드리자면 html에 존재하는 버튼 이미지 글씨 등등이 서로 상호작용 할 수 있도록 도와주는 존재입니다. 버튼을 누르면 어떤 이미지가 커진다거나 글씨가 작아진다거나 하는 동작을 하도록 정의 할 수 있는 "프로그래밍 언어" 입니다.

 

html 자체에서는 일반적 프로그래밍 언어의 if문 for문 등등 을 사용 할 수 없지만 < script > 태그로 인해서 사용이 가능해집니다.

 

간단하게 사용법을 보여드리면

HTML 4버전 이하에서는 ( 0 ~ 4. xxx ) < script > 태그를 사용 하려면 별도의 선언이 필요했습니다.

<script type="text/javascript"></script>

하지만 HTML 5버전인 현재는 별도의 타입 선언 없이 사용 가능합니다.

<script> javascript source </script>

간단한 예시

<!DOCTYPE html>
<head>
    <script>
        alert('앗 꿀냄시');
    </script>
</head>
<body>
</body>
</html>

자바스크립트의 alert() 메소드를 통해서 경고창을 띄워봤습니다.

자유롭게 < script > 태그를 사용하기 위해서는 우선적으로 JavaScript 에 대한 학습이 필요합니다.

👇👇👇👇👇 JavaScript 공식 문서

https://developer.mozilla.org/ko/docs/Web/JavaScript

 

JavaScript | MDN

JavaScript (JS)는 가벼운, 인터프리터 혹은 just-in-time 컴파일 프로그래밍 언어로, 일급 함수를 지원합니다. 웹 페이지를 위한 스크립트 언어로 잘 알려져 있지만, Node.js, Apache CouchDB, Adobe Acrobat처럼

developer.mozilla.org

어디서 공부하라고 말씀 드리기엔 너무 많은 강의와 자료가 넘쳐 흐르는 JavaScript 이기 때문에 노력하신다면 얼마든지 배울 수 있는 언어입니다.

 

이번 < head > 태그를 정리하면서 생각보다 내 지식에 빈 구멍이 꽤 많구나 싶은 생각이 들었습니다.

기본중의 기본이지만 기본기가 탄탄해야 좋은 개발자가 될 수 있기에 기본을 천천히 다지고 도약해나가시는걸 추천드립니다.

 

오늘 하루도 XP🔥🔥🔥 하세요!!

'B4 Junior' 카테고리의 다른 글

코드스테이츠 블록체인 과정 2일차 후기 💻  (0) 2022.04.28
코드스테이츠 블록체인 과정 1일차 후기 💻  (0) 2022.04.28
HTML 기초 📃  (0) 2022.04.28
코드스테이츠 블록체인 과정 5기 합격 후기 😍😍  (1) 2022.04.27
국비지원 신청 방법 !!  (0) 2022.04.27
꿀젤리
@꿀젤리 :: 꿀꾸는개발자

백엔드는 못말려

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

B4 Junior 추천 글
more
image

티스토리툴바