패스트캠퍼스의 "한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online" 강의를 수강하기 시작했다. 백엔드 개발자를 목표로 하고 있지만 프론트엔드 개발도 이해를 해야할 것 같아 수강했다.
Doctype(DTD)
- 문서의 HTML버전을 지정한다.
- DOCTYPE(DTD, Document Type Definition)은 마크업 언어에서 문서 형식을 정의하며, 웹브라우저가 어떤 HTML 버전의 해석 방식으로 페이지를 이해하면 되는지를 명시한다.
HTML, HEAD, BODY
HTML문서가 어디에서 시작하고, 어디에서 끝나는지 알려주는 역할
문서의 정보를 나타내는 범위이다. 웹 브라우저가 해석해야할 웹 페이지의 제목, 설명, 사용할 파일의 위치, 스타일(CSS)와 같은 웹페이지의 보이지 않는 정보를 작성하는 범위
문서의 구조를 나타내는 범위이다. 사용자 화면을 통해 보여지는 로고, 헤더, 푸터, 내비게이션, 메뉴, 버튼, 이미지 같은, 웹페이지의 보여지는 구조를 작성하는 범위
CSS, JS 연결
<link rel="stylesheet" href="./main.css">현재 html파일이 포함되어 있는 폴더의 ‘main.css’파일을 연결해준다.
<script src="./main.js"></script>현재 html파일이 포함되어 있는 폴더의 ‘main.js’파일을 연결해준다.
정보를 의미하는 태그들
HTML문서의 제목을 정의한다. 현재 페이지의 브라우저 탭의 이름을 지정한다.
<title> Document </tilte>외부 파일을 가져올 때 사용 (대부분 CSS파일)
- rel : 가져올 문서와의 관계
- href : 가져올 문서의 경로
<link rel="stylesheet" href="./main.css">
<link rel="icon" href="./favicon.png">스타일(css)를 HTML문서 안에서 작성하는 경우에 사용
<style>
div {
color: red;
}
</style>자바스크립트 파일을 가져오거나 자바스크립트를 html문서안에 작성할 수 있다.
<!-- 자바 스크립트 파일을 가져올때 -->
<script src="./main.js"></script>
<!-- 자바 스크립트 코드를 내부에 작성할 때 -->
<script>
console.log('Hello World!');
</script>HTML문서(웹페이지)의 제작자, 내용, 키워드와 같은 여러 정보를 검색엔진이나 브라우저에 제공
- charset : 문자 인코딩 방식
- name : 정보의 종류
- viewport : 모바일에서 웹페이지의 가로 너비를 모바일 환경의 가로 너비와 일치시키거나, 웹 사이트가 처음 출력될 때 확대/축소 여부나 정도를 어떻게 결정하겠다 등 몇가지 정보를 META 태그로 명시하는 개념이다.
- content : 정보의 값
<meta charset="UTF-8"/>
<meta name="author" content="honee8583"/>
<meta name="viewport" content="width=device-with, initial-scale=1.0"/>이미지를 출력해주는 태그이다.
- src : 이미지 파일이 존재하는 경로를 나타낸다.
- alt : 이미지 파일을 찾지못해 출력하지 못하게될경우 화면에 대체하여 표기하게될 텍스트이다.
상대경로 vs 절대경로
상대경로
- ./ : 현대폴더를 기준으로 ‘주변’의 경로를 나타낸다. (생략가능)
- ../ : 주변에서 찾지않고 ‘상위’폴더를 나타낸다.
절대경로
- http : 주소에 http or https가 붙어 있다면 원격 서버의 절대경로임을 나타낸다.
- / : 최상위경로(루트경로)를 나타낸다. ( // )
페이지를 나누고 연결하기
index.html파일은 경로에 명시를 하지 않아도 자동으로 찾아준다.
예를들어 /about/index.html 파일로 이동하고 싶을때 a 태그를 사용할경우 index.html파일이 존재하는 폴더만을 명시하면 해당 폴더에서 자동으로 Index.html파일을 찾아준다.
<a href="/about">index</a>또한 “/”만을 경로로 주어질경우 루트폴더에서 Index.html파일을 찾아준다.
<a href="/">Home</a>모든 파일의 공백 설정하기
설정 → tab size → 2
