Notice
Recent Posts
Recent Comments
Link
250x250
«   2025/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

바닥부터 시작하는 개발 공부

[프론트엔드]혼자서 공부하기 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> 

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

<link rel = 가져올 문서와 관계 href =가져올 문서의 경로> 

 

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

'프론트엔드' 카테고리의 다른 글

[프론트엔드]혼자서 공부하기 day3: CSS와 선택자  (0) 2023.04.11
[프론트엔드]혼자서 공부하기 day2: Html 기본  (0) 2023.04.11
[프론트엔드]혼자서 공부하기 day1: HTML에서 java script, css, image 불러오기  (0) 2023.04.10
[프론트엔드]혼자서 공부하기 day1: HTML(2) Hello world 출력  (0) 2023.04.09
'프론트엔드' Related Articles more
Comments