1. Doctype(DTD)
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>!DOCTYPE html의 역할
문서(페이지)의 html 버전을 지정
마크업 언어에서 문서 형식을 지정하며 웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도
- html1
- html2
- html3
- html4
- XHTML
- html5: 현재 표준
2. HTML, HEAD, BODY
html ~ /html
문서의 전체 범위
html 문서가 어디에서 시작하고 어디에서 끝나는지 브라우저에게 알려주는 역할
head ~ /head
문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(CSS) 같은 웹페이지의 보이지 않는 정보를 작성하는 범위
body ~ /body
문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은 웹 페이지의 보여지는 구조를 작성하는 범위
3. CSS, JS 연결하기
html 파일에 css 파일과 js 파일을 명시해주지 않으면 페이지가 변하지 않음
- css 파일 연결하기
head 태그 안에 main.css 연결
<link rel="stylesheet" href="./main.css">- js 파일 연결하기
head 태그 안에 main.js 연결
<script src="main.js"></script>4. 정보를 의미하는 태그 살펴보기
head 안에 있는 태그들 살펴보기
title 태그
HTML 문서의 제목을 정의
=> 웹 브라우저 탭에 표시됨
link 태그
외부 문서를 가져와 연결할 떄 사용(대부분 CSS)
가져올 문서와의 관계(rel="")와 가져울 문서의 경로(href="")가 필수 속성
Favicon(파비콘)
Favorite Icon의 줄임말
탭에 있는 문서 이름 옆에 있는 아이콘
style 태그
스타일(CSS)을 HTML 문서 안에서 작성하는 경우에 사용
script 태그
가져올 문서의 경로(src="")를 입력해서 연결
=> 외부에서 파일을 가지고 올 때 사용
style 태그처럼 html 내부에서 작성도 가능
meta 태그
HTML 문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공
- naem: 정보의 종류
- content: 정보의 값
- charset: 문자인코딩 방식
5. 화면에 이미지 출력하기
페이지에 이미지를 넣기 위해서는 img 태그가 필요함
- 사진을 다운 받아서 body 태그 안에 작성하는 방법
<img src="./images/logo.png" alt="HEROPY">=> src에는 문서의 경로를 alt에는 이미지가 출력되지 않았을 때 출력될 글자를 입력
- 사진의 주소를 사용해서 작성하는 방법
<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">