FE

[FE][02] HTML 기본 태그

lxvxxu 2024. 7. 6. 18:46

 

범위: 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