[프론트엔드]혼자서 공부하기 day1: HTML(1) 태그의 종류

프론트엔드

[프론트엔드]혼자서 공부하기 day1: HTML(1) 태그의 종류

Im_light.J 2023. 4. 9. 23:24

728x90

html에서는 태그가 중요합니다

▶html은 이러한 태그에 따라서 문서를 이해하는 방식이 다름

태그의 종류

<html>

문서의 전체 범위

HTML 문서가 어디에서 시작하고 어디에서 끝나는지 알려주는 역할

사람처럼 브라우저는 문서의 끝을 인지하는게 아니라 이러한 명령어를 통해서 인지함

명확하게 문서의 범위를 기입

<head>

문서의 정보를 나타내는 범위

웹 브라우저가 해석해야할 제목, 설명 혹은 디자인(CSS)등을 나타는 곳

<body>

문서의 구조를 나타내는 범위

사용자의 화면을 통해 보여지는 로고, 헤더, 푸터, 네비게이션, 메뉴, 버튼, 이미지 같은 웹페이지의

보여지는 구조를 작성하는 범위

<title>

HTML 문서의 제목을 정의

웹 브라우저 탭에 표시되는 제목!

<link>

외부 문서를 가져와 연결할 때 사용

ex)

<link rel ="stylesheet" href="./main.css" />

<style>

스타일(CSS)를 HTML 문서 안에서 작성하는 경우에 사용

CSS는 외부 파일을 link하는 방식과 문서 내에 작성하는 방식 두가지가 존재합니다

<script>

1.자바스크립트 파일을 가져오는 경우

2.자바스크립트를 HTML 문서 안에서 작성하는 경우

<script>
	console.log('Hello world!'>
<\script>

<meta>

HTML문서의 제작자, 내용, 키워드 같은 여러 정보를 검색엔진이나 브라우저에게 제공

위에서 해당하지 않는 나머지들이 여기에 들어간다고 생각하면 좋을거 같습니다

<meta name="charset" content="UTF-8" /> #인코딩방식 
<meta name="author" content="kjim" /> #author는 제작자 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
#viewport는 보여지는 영역, 모바일 영역에서만 해당함

<!DOCTYPE html> # html의 버전을 나타내는 곳 
<html> #문서의 시작 
	<head>
    
    
    <\head>
    <body>
    
    
    <\body>
<\html>

728x90