HTML Title, Link, style & Script , Meta, Sectioning Element 태그

JUNGHUN KIM·2021년 10월 25일

Title

브라우저에 보여지는 HTML문서의 대제목이며 검색 최적화에 매우 중요

키워드를 단순히 나열 하는것은 비추
각각의 페이지 마다 그게 맞게 변형(무엇에 관한 내용인지 센스있게)

<head>
	<title>잘 적어야 해 </title>
  </head>

Link

CSS 스타일시트를 첨부하거나 폰트를 가져올때 사용.

vs코드에서 link:css 하고 탭을 누르면 한번에 작성이 완료됨 (꿀팁)
href는 내가 첨부고하자 하는 CSS의 경로를 적어달라는 attribute

 <link rel="stylesheet" href="./style.css" rel="stylesheet" type="text/css">
 <link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>

폰트의 경우 아래 url에 어떻게 사용하는지 다 나와져 있음.
https://spoqa.github.io/spoqa-han-sans/#webfont

style

HTML문서에서 CSS코드를 작성할 때 사용, 이걸 쓰는것은 굉장히 좋지 않음
아무리 열심히 CSS파일에 코드를 작성하더라도 html에 아래와 같은 코드를 작성해두면
다 먹어버리기 때문에 사용하는것은 권장하지 않음.

<style>
   h1 {
    color: red;
   }
</style>

script

JS파일을 첨부하려고 할때 해당 태그를 사용 혹은 JS코드를 바로 작성하기 위해서 사용하는 태그
script 태그는 body 가장 마지막에 적어두는것이 좋음.(script파일은 브라우저가 html을 렌더할때 해당 파일을 다 가져올때까지 기다리기 때문에, 모든 컨텐츠가 렌더 된다음 가져오는것이 좋음.)

script:src 쓰고 탭을 누르면 script태그가 완성됨(꿀팁)

<script src="./app.js>
 console.log(123)
</script>

Meta

종류가 엄청나게 많음 위에 있는 태그로 적을수 없는 내용을 적을때 Meta태그를 사용.

반드시 작성해야할 attribute : name, content

<head>
 <meta name="viewport" content="width=device-width, inittial-scale=1.0"> 
 //반응형 사이트를 만들때 meta 태그에 viewport를 지정하지 않으면 먹히지 않음. 
 //디바이스 뷰포트에 맞춰서 반응하는 반응형 사이트를 만들 수 있음.
 //이 내용은 meta:vp 하고 탭을 누르면 자동적으로 적용이 됨.
 <meta name="author" content="김버그">
 //누가 만들었는지 기재해줄때 보통 이렇게 사용
 <meta name="keywords" content="김버그, 구름강의 ,구름">
 //해당 키워드(content)로 검색할때 내가 작성한 브라우저가 검색되게끔 도와주는것.
</head>