패스트캠퍼스 MGS 3기 4월 15일
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
에 위치한 주소로 이동한다.
Author And Source
이 문제에 관하여(패스트캠퍼스 MGS 3기 4월 15일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gosla4869/패스트캠퍼스-MGS-3기-4월-15일저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)