HTML 문서 구조 탐구
<!DOCTYPE html>
<!-- 문서의 HTML 버전을 지정
DOCTYPE(DTD, Document Type Definition): 마크업 언어에서 문서 형식을 정의
HTML5가 표준 -->
<!-- 문서의 전체 범위: HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 정의 -->
<html> <!-- 시작 태그-->
<!-- 문서의 눈에 보이지 않는 정보 나타내는 범위: 웹 브라우저가 해석해야 하는 정보들(제목, 설명, 파일 위치, 스타일) -->
<head>
<!-- meta는 HTML 문서의 제작자, 내용 등 여러 정보를 검색엔진이나 브라우저에게 제공 -->
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./main.css" /> <!-- css 파일 가져오기 -->
<!-- 외부 문서를 가져와 연결할 때 사용(대부분 CSS 파일)
<link rel="가져올 문서와의 관계" href="가져올 문서의 경로" -->
<script src="./main.js"></script> <!-- js 파일 가져오기 -->
<!-- 자바스크립트 파일 가져오는 방법
<script src=""></script> -->
<!-- 자바스크립트를 HTML 문서 안에서 작성하는 방법
<script>
console.log('hello')
</script> -->
<title>HEROPY</title> <!-- HTML 문서의 제목(title)을 정의 -->
<!-- css를 HTML파일 안에 작성하는 방법 -->
<style>
div {
text-decoration:underline;
}
</style>
</head>
<!-- 문서의 구조를 나타내는 범위: 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 메뉴 등 보여지는 구조 작성하는 범위 -->
<body>
</body>
</html> <!-- 종료 태그 -->- html파일은 root경로에 두기!(파일로 따로 관리하지 말기)
- css, js, image는 파일로 따로 관리하는게 좋음
이미지 출력
<img src="이미지 경로" alt="이미지 설명" />
- alt는 이미지가 출력되지 않을 경우 나오는 설명을 의미
상대 경로 vs 절대 경로
상대 경로: 주변의 기준에 따라 바뀔 수 있음
./주변에서 찾음(생략 가능)../상위 폴더로 올라가서 찾음
절대 경로: 원격의 다른 사이트
httphttps/루트 경로
링크 연결
<a>: 특정 글자를 클릭하면 해당 사이트로 이동
ex) <a href=”https://naver.com”>NAVER</a>
브라우저 기본 스타일 제거
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css" />Emmet
- 약어 입력하고 탭 누르면 자동으로 코드 완성해주는 기능
- ex)
div>ul>li*4{$}를 입력하면, 아래 코드처럼 완성됨
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>