기본태그
<!DOCTYPE>
html 버전 지정
<html>
문서의 전체 범위 지정
범위를 지정해주는 이유는
브라우저가 이해할 수 있는 대화수단으로 만들기 때문에
정해진 규칙에 따라서 문서의 범위를 지정해줘야 한다
<head>
문서의 정보를 나타내는 범위
브라우저가 해석해야 할
제목, 설명, 파일위치, Css 같은 정보 작성 범위
눈에 보이지 않는 정보
<body>
문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는
로고, 헤더, 푸터 등 같은 구조 작성 범위
눈에 보이는 정보
<link>
head 태그 안에 작성
보통 css파일 연결시 사용
필수속성: 가져올 문서와 관계(rel), 경로(href)
<link rel="stylesheet" href="./main.css"><title>
문서의 제목을 정의
<style>
스타일을 HTML 문서 안에서 직접 작성하는 경우 사용
<script>
JS 파일을 가져오는 경우,
JS를 HTML 문서 안에서 직접 작성하는 경우 사용
<script src="./main.js"></script>
<script>
console.log('hello world')
</script><meta>
추가적인 데이터 작성
종류와 값을 명시
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
경로
-
상대경로
./ : 현재위치 (생략가능)
../ : 상위폴더 -
절대 경로
http (https)
/ (최상위경로)
./images/logo.png == images/logo.png
현재 위치 -> images -> logo.png
/images/logo.png
루트폴더 -> images -> logo.png
<a>
브라우저는 기본적으로 index.html를 찾으려고 함
<a href="/">Home</a>
의 형태로 작성하면 최상단 index.html 파일을 찾게됨ETC
Codepen
CODEPEN
style reset
jsdelive
link 태그를 이용하여 초기화 한다
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">emmet
자동완성 기능
