[패스트캠퍼스] React& Redux로 시작하는 웹 프로그래밍 강의 수강일지 1주차(3)
DOCTYPE 및 html의 기본 구조
<!DOCTYPE html>
<html>
<head> <!--눈에 보이지 않는 정보가 들어가는 자리-->
</head>
<body>
</body>
</html>
HTML 문서에 CSS와 JS 연결하기
<head>
<link rel="stylesheet" href="파일경로/style.css"/> <!--link 태그는 종료태그가 없음-->
<script src="파일경로/script.js"></script>
</head>
head 태그
<head>
<meta charset="UTF-8" />
<meta name="author" content="00" />
<title>HTML 문서의 이름</title>
<link rel="stylesheet" href="./style.css"/>
<link rel="icon" href="./icon.png">
<style>스타일(CSS) 적용</style>
<script scr="./script.js"></script>
<script>자바스크립트(JS) 적용</script>
</head>- <meta></meta> HTML 문서의 제작자, 내용, 키워드 등 여러 정보를 검색엔진이나 브라우저에게 제공
- <title></title> HTML 문서의 제목을 정의, 웹 브라우저 탭에 표시됨
- <link /> 외부 문서를 연결(주로 CSS 파일 연결)
- <style></style> 외부 문서를 연결하지 않고 직접 HTML 문서에 스타일(CSS) 작성
- <script></script> 자바스크립트(JS) 적용 혹은 직접 HTML 문서에 작성
속성 의미
- charset: 문자인코딩방식
- name: 정보의 종류
- content: 정보의 값
- rel: 가져올 문서와의 관계
- href: 가져올 문서의 경로
- ./: 주변에서 찾아옴
상대 경로 vs 절대 경로
| 상대 경로 | ./ | 주변 폴더(생략 가능) |
| ../ | 상위 폴더 | |
| 절대 경로 | http (https) | 원격으로 연결 |
| / (//) | 최상위 경로(루트 경로) |
*상대 경로는 현재 문서(ex. 작성 중인 html 문서)를 기준으로 한다.
*절대 경로는 내 컴퓨터 기준(local host)으로 적용한다.
*경우에 따라 더 효율적인 경로를 사용한다.
'[패캠] React& Redux로 시작하는 웹 프로그래밍' 카테고리의 다른 글
| CSS 개요 - 문법, 선택자 등 (0) | 2022.09.17 |
|---|---|
| HTML 전역 속성 (0) | 2022.09.14 |
| HTML 핵심 요소(태그) 정리 (0) | 2022.09.14 |
| VSCode 확장 프로그램 및 단축키 모음 (0) | 2022.09.03 |
| 프론트엔드(Front-End) 개요 (0) | 2022.08.11 |
