vscode 살펴보기
vscode를 시작하고 !만 눌러도 나오는 코드들.
하나하나 뜯어보기로 한다!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>html , head , body
!DOCTYPE html은 문서의 HTML버전을 지정한다. 지금은 HTML5 버전이다.
html은 HTML의 시작, /html은 종료를 선언한다. 문서의 전체 범위를 알려준다.
head는 웹페이지에는 보이지 않는 정보를 작성한다. 문서의 정보를 나타내는 범위이다.
body에서는 웹페이지에서 보이는 구조를 작성한다. 문서의 구조를 나타낸다.
meta는 여러 정보를 브라우저에게 제공한다.
name은 정보의 종류,concent는 정보의 값을 뜻한다.
charset은 문자인코딩 방식을 뜻한다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="./main.css">
<style>
div {
color: red;
}
</style>
<script src="./main.css"></script>
<script>
console.log('Hello world!')
</script>
</head>
<body></body>
</html>정보를 의미하는 태그들
title은 페이지의 제목을 뜻한다.
head 에서 파일과 html문서를 연결할 때,
css파일은 link로 하고, js파일은 script src 라는 태그로 시작한다.
link에서rel은 relationship의 약어로 가져올 문서와의 관계를 의미한다.
href는 Hyper Text Reference의 약어로 가져올 문서의 경로를 지정한다.
위에서처럼
script에서src를 사용해 위치를 지정하는 경우와,
HTML문서 안에 작성하는 경우가 있다.css파일도
style태그로 HTML문서 안에 작성할 수 있다.
이미지 출력하기
<img src="./images/logo.png" alt="HEROPY">이왕이면 images 폴더를 생성해서 그 안에 저장하는 게 좋다.
src를 사용해서 위치를 지정한다.
alt는 대체텍스트로 이미지가 나오지 못할 때 출력될 글자이다.
<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">웹주소를 입력하는 경우에도 똑같이 출력된다.
상대경로, 절대경로
상대경로:
./(상위 폴더) 나../
절대경로:https나/(컴퓨터 내부)
페이지를 나누고 링크걸기
<a href="https://naver.com">NAVER</a>
a태그에 명시된NAVER을 누르면href에 위치한 주소로 이동한다.
