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

JUNGHUN KIM·2021년 10월 25일
0

Title

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

  1. 키워드를 단순히 나열 하는것은 비추
  2. 각각의 페이지 마다 그게 맞게 변형(무엇에 관한 내용인지 센스있게)
<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>

Sectioning Elements

Sectioning Elements은 하나의 단원이며 단원은 단원의 주제, 제목이 들어가야함(메뉴에 대한 제목을 적어줘야함. 우리눈에 보이지 않더라도 적어주는게 좋음.)
# Sectioning Elements를 사용할때는 반드시 heading태그를 작성해야함.

페이지 구조 설계시에는 논리적으로 긴밀하게 관련된 집합체의 구역을 나누는 것부터 하는 것이 좋음.

종류로는 Nav,asied,article, section 이 있음.

해당글은 김버그의-html-css는-재밌다 강의를 참조하여 작성한 글입니다.

profile
개발자가 되고 싶은 일문학도

0개의 댓글