고래씌

[HTML] 1. HTML5 ~ 2. 헤더(HEAD) 본문

Front-End/HTML

[HTML] 1. HTML5 ~ 2. 헤더(HEAD)

고래씌 2023. 10. 30. 17:34

1. HTML 

- 웹에서 정보를 표현할 목적으로 만든 마크업 언어.

- 웹 페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 일종의 해석 기호인 태그들로 이루어짐

 

- 마크업 : 문서의 논리적인 구조를 정의하고 출력장치에 어떤 형태로 보일 것인지 지시하는 역할

- 마크업 언어 : 마크업(태그)의 형식과 규칙을 정의한 언어

 

 

1) HTML 특징 및 주의사항

① html은 ''(따옴표)와 "" (쌍따옴표) 구분하지 않음

② <P> == <p> 같지만 읽기 편의상 소문자로 작성하는게 좋음

③ 구조적 설계 지원(시멘틱)

④ 문자의 공백은 몇 개를 입력하든 한 개만 인식하므로 공백을 추가하기 위해서 특수기호  &nbsp; 를 이용해야함

 

 

☞ html5: 를 하면 아래와 같이 자동완성됨

<!DOCTYPE html> <!-- HTML 문서 형식 선언 : 현재 문서가 html5형식이라는걸 알려주기 위한 태그 -->

<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 


2) html 태그 <html> </html>

: html 문서의 시작과 끝을 표시해주는 태그. lang 속성은 이 문서가 어느나라 언어로 되어있는지 표시

 

 

3) head태그 <head></head>

: 문서의 머리부를 나타냄. 현재 문서의 각종 정보 및 제목, 설명 및 스타일시트의 링크를 선언한다.

<title>, <meta>, <link>, <style>, <script>

 

▶ generator : 이 문서를 생성한 프로그램

▶ author : 이 문서의 저자

▶ keyword : 이 문서를 나타내는 키워드

<head>
    <!--
        <head> 문서의 머리부를 나타냄 : 현재 문서의 각종 정보 및 제목, 설명 및 스크립트, 스타일시트의 링크를 선언한다.
            <title>, <meta>, <link>, <style>, <script>
        -->
    <meta charset="UTF-8">
    <meta name="generator" content="VSCode"><!-- generator : 이 문서를 생성한 프로그램 -->
    <meta name="author" content=""mkm><!-- author : 이 문서의 저자 -->
    <meta name="keywords" content="글자, 태그"> <!-- keyword : 이 문서를 나타내는 키워드 -->
    <meta name="description" content="이 문서는 글자와 관련된 태그들을 공부하는 페이지입니다.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자 관련 태그</title>
</head>

 

 

■ <title></title>  => 문서의 제목을 나타냄. 왠만하면 title은 필수임!

 

'Front-End > HTML' 카테고리의 다른 글

[HTML] 5-2. 멀티미디어 관련 태그  (1) 2023.11.01
[HTML] 5-1. 표관련태그  (0) 2023.11.01
[HTML] 4-1. 목록관련태그  (1) 2023.11.01
[HTML] 3. 글자관련태그  (0) 2023.11.01
[HTML] 0. 설치 환경 구성하기  (0) 2023.10.30