HTML을 공부해보자..!
<head>: HTML 문서의 헤더 부분을 시작하는 태그
문서의 제목, 문자 인코딩 방식, 뷰포트 설정 등 브라우저가 페이지를 어떻게 해석하고 표시할지에 대한 정보를 넣음.
<meta name="viewport" content="width=device-width, initial-scale=1.0">모바일 반응형 웹페이지를 만들기 위한 설정
viewport: 브라우저가 웹페이지를 어떤 크기로 보여줄지 설정
width=device-width: 기기의 화면 너비에 맞춰 페이지 크기를 설정
initial-scale=1.0: 처음에 100% 배율로 보여주도록 설정
=> 이런 설정이 없으면 모바일에서 페이지가 확대되거나 이상하게 보일 수 있다.
<title>칼러 피커</title>브라우저 탭에 보이는 웹페이지 제목 설정
<body>본문 시작을 나타냄.
<div>
<p id="colorText">칼러 코드 검색</p>
<input id="colorPicker" type="color">
</div><div>:
박스 하나를 만드는 태그
여러 요소를 그룹으로 묶을 때 사용한다.
<p>:
문단을 나타내는 태그
화면에는 "칼러 코드 컴색"이라는 텍스트가 보임.
id= "colorText" -> 자바스크립트나 CSS에서 이 문장을 선택할 수 있도록 고유 이름을 붙임.
<input>:
사용자 입력을 받을 수 있는 상자를 만드는 태그
type="color" -> 특별한 타입으로 색상을 선택할 수 있는 칼러 피커를 만들어줌.
id="colorPicker" -> 이 칼러 피커를 나중에 자바스크립트나 CSS로 제어할 수 있도록 고유 이름을 부여함.
최종 코드
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>칼러 피커</title>
</head>
<body>
<div>
<p id="colorText">칼러 코드 검색</p>
<input id="colorPicker" type="color">
</div>
</body>
</html>
이제 css 파일로 화면을 꾸미고 html에 적용해보자.
body {
text-align: center;
font-family: sans-serif;
display: grid;
place-items: center;
height: 100vh;
background: #000;
}
div {
background: #fff;
padding: 2rem;
border-radius: 1rem;
width: 14rem;
box-shadow: 0 0 1rem rbga(0,0,0,.5);
}
그리고 js파일로 콘솔에 실행이 잘됐다는 출력을 찍어보자.
이를 적용한 HTML 코드는 다음과 같다.
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>칼러 피커</title>
<link rel="stylesheet" href="css/style.css">
<script src = "js/script.js" defer></script>
</head>
<body>
<div>
<p id="colorText">칼러 코드 검색</p>
<input id="colorPicker" type="color">
</div>
</body>
</html>
여기서 중요!!
<script> 태그는 head, body 어디에 써도 상관없다. 그러면 defer은 뭐지?
script 태그의 기본 동작
<head>
<script src="main.js"></script>
</head>- 기본적으로 HTML 파싱을 멈추고 JS 파일을 즉시 불러와서 실행한다.
- 따라서 스크립트가 클 경우 로딩이 느려지고 DOM이 완전히 로딩되기 전에 실행되어 오류가 날 수 있다.
-> defer 사용!
defer의 역할
<script src="main.js" defer></script>- HTML을 끝까지 파싱한 후 JS 파일을 실행한다.
- DOMContentLoaded 이벤트 전에 실행되며, head에 써도 안전하게 작동한다. 즉, HTML 문서를 다 읽고 나서 스크립트를 실행하는 것이다.
- 주로 DOM 조작하는 스크립트 일 때 많이 사용된다.
- 보통 <head>에 있는 <script>는 HTML을 다 읽기도 전에 실행되기 때문에 DOM 조작을 하려면 에러가 날 수 있다!
- 즉, defer는 HTML 해석을 중단하지 않고, 스크립트를 백그라운드에서 병렬로 다운로드한 다음, HTML 파싱이 끝난 후에 실행되도록 만드는 속성
- 따라서 웹 페이지 읽기 속도가 개선된다.
- 기본적으로 <head> 태그 안에 자바스크립트 파일을 불러오도록 지정하고 defer 속성을 붙여 불러오는 것이 가장 좋다.