다시 시작하는 HTML😊
Doctype & Document Structure
태그를 작성했는데 눈에 아무것도 보이지 않으나 매우 중요한 태그😲
┏ html 문서 형식(기본 골격) ┓
<!DOCTYPE html>
<html>
<head>
<!-- 웹 문서에 관한 메타 데이터 -->
</head>
<body>
<!-- 웹 문서에 들어갈 내용(콘텐츠) -->
</body>
</html>< !DOCTYPE html >은 모든 문서의 시작을 의미
document = 'HTML 그 자체'
Document Type Declaration = DTD 선언 = 문서 형식 선언
HTML5 버전(웹표준 최신)으로 작성된 문서임을 브라우저에게 알리는 태그
여러가지 버전들이 있으나 가장 최신인 웹표준에 맞는 HTML5 버전을 쓰겠다고 선언함을 의미함
(즉, 브라우저에게 표준 모드에 맞춰서 렌더링 요청)
Title, Link, Style & Script
<title>문서의 대제목</title>title은 웹페이지의 제목으로 검색 최적화(Search Engine Optimization)에 매우 중요함
title 잘 쓰는 방법
- 키워드 단순 나열은 비추천
- 각각 페이지마다 내용에 맞게 변경
- 단순히 짧은 것보다는 무엇에 관한 내용인지 함축적이고 친절하게 작성
link: CSS 스타일시트를 첨부하는 태그
웹 폰트를 외부에서 다운로드하여 사용할 때 link 태그를 이용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML & CSS</title>
// 일반적인 css 파일 연결 (link:css + tab을 이용)
<link rel="sylesheet" href="./styles.css" />
// 외부에서 공유한 폰트 링크 연결(css 파일에도 별도로 작성할 내용 있음)
<link href="https://~~~.css " rel="stylesheet" type="text/css" />
</head>
</html>style: HTML 문서 내에 CSS 코드를 작성할 때 사용하는 태그
별도의 css 파일을 작성했으나 style 태그에 작성한 코드가 적용되어 덮어쓰여지므로 비추천.
✨절대적으로 link 태그를 사용해서 stylesheet을 첨부하는 걸 강력 권장! 실무에서도 많이 쓰이는 방법임
<style>
h1 {
color: red;
}
</style>script: HTML 문서 내에 JavaScript 파일을 첨부할 때 사용하는 태그
<script src="경로"></script>
<script src="./app.js"></script> // source 파일 첨부
<script>자바스크립트 코드</script>Q. script 태그를 head 태그 안에 쓰지 않는 이유?!🧐
A. head 태그 안에 있는 경우, 만약에 다른 서버에 있는 자바스크립트 파일을 가져오는 경우 시간이 소요된다.
link 태그와 달리 script 태그는 자바스크립트 파일을 완전히 load 할 때까지 기다리고 다음으로 넘어간다. script 태그가 완전히 load 될 시점에는 body 태그 내용들을 렌더링하기까지 시간이 오래걸려 비효율적이다.
=> script 태그는 (body 안에 모든 콘텐츠들이 load 된 후에) body 태그 가장 마지막에 작성하라❗
script 태그에 대한 또 다른 궁금점❓❗🤔
Webpack같은 모듈 번들러(module bundler)를 사용해서 현 프로젝트에 사용하고 있는 JavaScript 파일들을 모두 모아 하나의 파일로 합쳐버리는 번들링(bundling)이라는 작업을 한다.
<script src="./js/bundle.min.js"></script>하나하나 script 태그로 불러오는 것이 아니라 webpack이란 도구를 사용해서 하나의 파일로 만든 후에 script 태그 한 줄로 작성하여 불러온다.
Meta 메타 데이터
title, link, style, script 태그들로 표현할 수 없는 데이터를 표현할 때 사용하는 태그
name attribut 작성 시 content attribute를 함께 작성해야 한다. (두 속성을 같이 많이 사용하는 추세)
<meta name="메타데이터 종류" content="메타데이터 값">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<meta name="author" content="ylyl"> // 작성자
// 웹페이지 설명(웹 접근성 측면 높임)
<meta name="description" content="이 페이지는 ~~하다">
// 웹페이지의 키워드(해당 키워드를 검색하면 내 웹페이지가 보여지도록 브라우저에게 알림)
<meta name="keywords" content="html, css, FE">필수 태그!✨
name="viewport" : (데스크톱, 모바일, 태블릿)화면 사이즈
데스크톱 사이즈 = 1920 x 1080
모바일 사이즈 = 375 x 667
태블릿 사이즈 = 768 x 1024
device size에 따라서 브라우저 크기를 조절하는 반응형 웹사이트를 만들 수 있다.
css파일에서 반응형 코드를 작성해도 name="viewport" 가 없으면 절대 적용 불가!
name="viewport" content="width=device-width, initial-scale=1"
화면 너비(사이즈)는 device의 width에 맞추고,
처음 보여지는 화면 배율은 원래 사이즈에 맞게 보여지도록 설정한다.
