범위: Ch3-04
※ 필기 위주로 하지 말기 (예쁘게 X, 알아보기 쉽게O)
※ 머릿속에 집어넣는 것 우선 (암기 ★ ★ ★ ★ ★)
※ 일단 쭉 1회독
※ 모르는 건 돌려보고 자주 나오는 건 적기
HTML
해당 파일 어디서부터 어디까지 해석할 것인지 지정
HEAD
<title>
탭 이름
<link>
외부 문서를 가져와 연결할 때 사용(대부분 CSS 파일)
<link rel="stylesheet" href="./main.css" /> <link rel="icon" href="./favicon.png"> |
|
rel: 가져올 문서와의 관계 href: 가져올 문서의 경로 href ./ |
|
Favicon(파비콘) : Favorite Icon HTML Favicon을 적용할 때에는 이름을 'favicon'이러고 지정할 것 - favicon.ico - favicon.png |
|
- <link ~~ /> - <link ~~ > |
<script>
링크 태그와 같이 외부에 있는 파일을 가져온다.
1) <script scr="./main.js"></script> 와 같이 JS 파일을 가져오기
- 외부에서 파일을 가져오는 link 태그의 역할
2) <scirpt> ~코드~ </script> 와 같이 HTML 문서 안에 JS 파일 작성하기
- 내부에 작성하는 style 태그의 역할
<style>
스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 사용
스타일의 선언 방식 | |
1 | css 문서에 작성해서 html 문서에서 가져오기 |
2 | html 문서 style 태그에 직접적으로 작성하기 |
<meta>
<meta name="정보의 종류" content="정보의 값"/>
i.e., HTML 문서(웹페이지)의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공
<meta name="viewport" content="width=device-width, initial-scale= 1.0" |
우리는 스마트폰(타블렛)과 같은 모바일 장치(디바이스)에서 웹 사이트를 오픈할 수 있다. - device-width: 모바일 장치와 일치시키겠다. - 웹페이지 사이즈, 웹페이지 출력 배수(확대/축소 여부 및 정도) 등 몇 가지 정보를 META 태그로 명시하는 개념이 name="viewport"의 내용 |
<meta charset="UTF-8" /> |
charset은 Character Set의 약어 문자 인코딩(Encoding) 방식을 지정하는 HTML 속성(Attribute) 문자 Encoding: 문자나 기호들을 컴퓨터가 이용할 수 있는 신호로 만드는 것 - 대표적으로 한글은 EUC-KR or UTF-8 등이 사용됨. - Web에서는 UTF-8의 사용을 권장 |
BODY
'FE' 카테고리의 다른 글
[FE][06] HTML 개요: 요소, 속성, 태그, 내용, 속성 (0) | 2024.07.09 |
---|---|
[FE][05] 브라우저 스타일 초기화, Emmet (자동완성) (0) | 2024.07.09 |
[FE][04] <a>, 개발자 도구, codepen (0) | 2024.07.07 |
[FE][03] HTML 이미지 출력, 경로 (0) | 2024.07.06 |
[FE][01] Visual Code 기본 세팅 및 단축키 (0) | 2024.07.06 |