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

5245 단어 htmlhtml

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는-재밌다 강의를 참조하여 작성한 글입니다.

[TIL] JavaScript 정리, 2 day 배열 메서드
Java 집합 Iterator 교체의 실현 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage