Front-End/HTML

[HTML] HTML 특징, 구조, 속성

챌링킴 2021. 6. 10. 20:43
반응형
HTML(Hyper Text Markup Language)
- 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 마크업 언어
- 마크업 언어란 태그방법 체계를 의미하며 태그를 이용해서 문서나 데이터의 구조를 기술(표현)하는 언어

 

1) HTML5
- HTML문서는 확장명을 .html로 저장합니다.
- HTML문서는 문서를 작성할 수 있는 프로그램이라면 어디든지 작성이 가능합니다.
- HTML은 대소문자를 구별하지 않습니다. 단 소문자로 작성하는 것을 권장합니다.
- HTML은 띄어쓰기, 줄바꿈을 구별하지 않습니다.
- HTML은 태그 형태로 괄호(<명령어>)를 사용하여 표현합니다.
- HTML은 <명령어> 시작태그,  종료태그로 이루어져 있습니다.

(* 모든 태그가 시작태그와 종료태그로 이루어진 것은 아님)

- HTML문서의 정보를 저장하는 태그
- 브라우저에서 웹사이트를 표현하기 위한 태그

 

2) HTML5의 문서 구조
<!DOCTYPE html>
HTML 문서의 선언이며, 버전 5를 나타냄 >> HTML5
<html lang="en">
lang 속성 웹 접근성에 관한 명시

스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나, 해당 언어에 적합한 발음을 제공할 수 있음

(한국어 = "ko")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

 

3) HTML 속성
- 속성은 해당 요소에 대한 추가적인 정보를 제공

- 속성에 대한 값은 따옴표를 꼭 사용하지 않아도 되지만,

  속성값에 띄어쓰기가 있을 경우 문제가 발생할 수 있어서 따옴표를 쓰기를 권장함 (쌍따옴표, 따옴표 둘다 가능)

<img src=apple.png> (O)
<img src=맛있는 사과.jpeg> (X)
<img src="맛있는 사과.jpeg"> (O)

 

4) 인코딩(encoding)

- 문자를 표현, 해석하기 위한 방식들

EUC-KR : 완성형, 만들어져 있는 완성된 글자를 찾아옴

UTF-8 : 조합형, 글자를 만들기 위한 요소들을 하나씩 찾아와서 조합

 

1. <meta charset="UTF-8">
- <head>태그에 정보를 추가하기 위한 태그

- charset 속성은 문자를 인코딩할 때 문자코드를 설정하는 역할을 지정

- 우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만,

  다국어로 인코딩 하기 위해서는 UTF-8 문자셋을 사용하기 권장

2. <meta name="viewport" content="width=device-width, initial-scale=1.0">
모바일로 최적화된 사이트에 포함하는 META 속성

반응형