파일 이름을 index.html 로 하는 이유.
브라우저가 프로젝트 단위의 폴더를 출력할때 가장 먼저 찾는 파일이기 때문.
Doctype(DTD)
<!DOCTYPE html>
문서의 html 버전을 지정
doctype(dtd, document type definition)은 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도.
HTML1,...,4, XHTML, HTML 5 (최신이자 표준)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans...>
는 XHTML 으로 운영되는 페이지. 1~4는 아예 볼일 없음.
HTML, Head, Body
<html>
문서의 전체 범위 (HTML 문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할.)
</html>
<head>
문서의 정보를 나타내는 범위
웹 브라우저가 해석해야 할 웹 페이지의 제목, 설명, 사용할 파일 위치, 스타일(css)같은,
웹 페이지의 '보이지 않는 정보'를 작성하는 범위
</head>
<body>
문서의 구조를 나타내는 범위
사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은,
웹페이지의 '보여지는 구조'를 작성하는 범위
</body>
CSS, JS 연결하기
<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>
<link rel="stylesheet" href="./main.css"> 같은 폴더(프로젝트) 안의 css 파일을 불러오는 링크
<script src="./main.js"></script> 마찬가지로 JS를 연결하는 코드
</head>
정보를 의미하는 태그 살펴보기
각 태그의 '의미'에 집중해보자
<title> </title>
타이틀 태그
HTML 문서의 제목을 정의 / 브라우저 탭에서 확인 가능
<link>
외부 문서를 가져와 연결할 때 사용. (대부분 css 파일)
필수 속성!
<link rel="stylesheet' href="./main.css" />
가져올 문서와 관계 / rel = relationship
가져올 문서의 경로 / href = hyper test reference 약어
대표적으로 사용하는 아이콘을
favicon (favorite icon) 이라 부름. html favicon을 적용할때는 favicon이라 지정하길 권장.
<style> </style>
스타일(css)를 html 문서 안에서 작성하는 경우에 사용.
<script src="./main.js"></script>
1. 자바스크립트 파일을 외부에서 가져오는 경우
<script> </script>
자바스크립트를 html 문서 안에서 작성하는 경우
<meta />
위 네개의 태그로 표현 할 수 없는 '나머지' 모든 정보를 나타내는 태그
<meta name="author" content="bdbest" />
name (정보의 종류) content (정보의 값)
<meta /> 는 html 문서의 제작자, 내용, 키워드 같은, 여러 정보를 검색엔지니나 브라우저에게 제공.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
이 태그(name="viewport")는, 모바일 디바이스에서의 뷰포트를 위한 정보임. device-width (기기 화면 넓이에 맞춘다.) intitial-scale (처음에 화면 확대 배수는 1.0으로 한다는 의미)
<meta charset="UTF-8">
charset는 문자인코딩 방식
화면에 이미지 출력하기
항상 index.html은 프로젝트 폴더의 최상위에 위치시켜두기
./ 는 현재 파일 주변을 의미 (index와 같은 폴더 내)
<img src="./images/logo.png" alt="BDbest">
alt( alternate단어의 약어)는 이미지가 출력되지 못하는 경우 대신 출력할 텍스르라고 해서 대체 텍스트라고 부른다.
필수 속성!
img src의 사례 1,2
<body>
<div>
hello, world!
<img src="./images/logo.png" alt="bdbest"> 1
<img src="https://heropy.blog/css/images/logo.png" alt="bdbest"> 2
</div>
</body>
06. 상태 경로와 절대 경로
상대 경로 vs 절대 경로
./ (생략가능) http (https)
../ / (// )
../은 상위폴더를 찾음
/ 루트 경로 (최상위 경로)
07. 페이지를 나누고 연결(링크)하기
<a href="https://naver.com">NAVER</a>
<a href="/test1/about">about</a>
<a href="/test1/login">login</a>
<a href="/test1/">home</a>
<a href="/test1/">home</a>
08. 개발자 도구 사용하기
f12
자주 사용하는 탭 . elements , console
왼쪽위 화살표 아이콘을 누르면 그 이후 마우스가 지정하는 웹의 코드들을 직접 확인 할 수 있음.
html, 그리고 style 탭에서 css 코드들을 볼 수 있음. style 탭에선 실제로 코드를 내가 직접 바꿔볼수 있음.
임시적으로 건들어보는 기능. 새로고침하면 원상복귀
JS는 비즈니스 로직이 들어가 해석하기 힘들게 만들어 놓기에 html css 처럼 세세하게 확인은 불가능.
'인강 > Fastcampus 프론트엔드 초격차' 카테고리의 다른 글
| ch 5. HTML 개요 (0) | 2021.06.08 |
|---|---|
| ch 4 웹에서 시작하기 (0) | 2021.06.06 |
| Vscode 단축키 (0) | 2021.06.06 |
| 자료 링크 (0) | 2021.06.02 |
| Vscode, 특수 기호, 오픈 소스, (0) | 2021.06.02 |
댓글