2023. 9. 27. 10:24ㆍHTML CSS
HTML 이란?
HTML(HyperText Markup Language)의 줄임말로 HyterText는 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 이동할 수 있는 기능을 말한다. Markup은 태그를 사용해 어느 부분이 제목이고 어느 부분이 링크인지 또는 내용인지 각 내용에 대한 것들을 태그로 감싸서 표시한다. 즉 HTML은 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 태그로 이루어진 언어이다.
HTML 기본구조
- 반드시 <!doctype>, <html>, <head>, <body> 네 가지 태그를 이용해 문서의 시작과 끝을 표시한다
- <!doctype> : 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다. HTML4에서는 문서 유형이 많았고 문서 유형을 지정하는 소스도 길었기 때문에 잘못 사용하거나 사요하지 않는 경우도 있었다. HTML4부터는 <!doctype html> 단 한줄로 문서 유형을 선언한다. <!doctype html>를 통해서 웹 브라우저는 HTML5에 맞추어 해석하면 된다는걸 알수있다.
- <html> </html> : 태그 사이에 소스를 웹 브라우저가 읽어 html 문법에 맞게 브라우저에 표시한다. <html> 태그에는 lang이라는 속성을 사용해 문서에서 사용할 언어를 지정할 수 있다. <html lang="ko">라고 되어있다고 하면 ko는 korea의 약자로 한국어로 지정한거다. 이 밖에 다른나라 언어도 두 글자로 지정할 수 있다.
ex) 독일어(de), 영어(en), 프랑스(fr)
이렇게 언어를 지정해주는 이유는 누군가 검색을 할때 영어든 독일어든 특정 언어로 된 문서의 범위를 지정해서 검색하고 싶다. 그럼 저 속성이 사용될 수 있다. 또 예를들어 화면 낭동기에서 웹 문서를 소리내어 읽어줄 때 언어가 명시되면 그 언어에 맞추어 들려줄 수 있다.<html> 태그 사이에는 실제 화면에 보여지는 <body> 태그가 포함된다.
- <head> </head> : 웹 브라우저가 웹 문서를 해석하는데 필요한 정보들을 입력하는 부분이다. 여기에 있는 정보는 실제 내용이 아니기 때문에 문서 제목만 브라우저 창에 표시되고 나머지는 웹 브라우저 화면에 나오지 않는다. 화면에 나오지는 않지만 웹 브라우저가 알아야 할 정보들을 모두 <head> 부분에 입력한다. 스타일이나 스크립트가 포함되기도 한다.
문서 정보를 위해 사용하는 태그는 주로 <title> 태그로 웹 브라우저의 제목 표시줄에 표시된다.
- <body> </body> : 실제 웹 브라우저 화면에 나타나는 내용
참고) <meta> 태그
메타 데이터는 '데이터에 대한 데이터'이다. 메타 태그도 같다. 웹 브라우저 화면에는 보이지 않지만 웹 문서와 관련된 정보를 저장한다.
-문자 세트 지정 : 화면에 글자를 표시할 때 얻너 인코딩 방법을 사용할지 지정한다. 웹 서버는 영어를 기본으로 해서 영어 이외의 문자를 화면에 표시할 대 약속된 문자 세트를 사용해야 한다.
ex) <meta charset="UTF-8">
- 모바일 기기 고려 : 웹 문서를 작성할 때 스마트폰의 기기에서 웹 문서를 제대로 표시할 수 있어야 한다.
ex) <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 인터넷 익스플로러 브라우저 고려하기 : 인터넷 익스플로러는 최신 웹 기술이 사용된 웹 문서를 제대로 해석하지 못한다. 그래서 인터넷 익스플로러를 사용할 경우 meta 태그를 사용해 현재 웹 문서를 최신 표준 모드로 해석하라고 알려줄 수 있다.
ex) <meta http-equiv="X-UA=Compatible" content="ie=edge">
- 검색엔진 고려하기 : meta 태그를 이용해 웹 사이트의 키워드나 간단한 설명, 제장자 등의 정보를 지정할 수 있다. 이 정보들은 검색 엔진에서 사이트를 검색할 때 참조하는 정보로 검색 엔진에 따라 참조하는 방법이 다를 수 있다.
ex) <meta name ="keywords" content="html, 웹표준">
<meta name ="description" content="html5 공부">
<meta name ="author" content="David">
'HTML CSS' 카테고리의 다른 글
| 이미지 태그(HTML) (0) | 2023.09.29 |
|---|---|
| 표관련 태그(HTML) (0) | 2023.09.28 |
| 목록 관련 태그정리(HTML) (0) | 2023.09.27 |
| 텍스트 관련 태그 정리(HTML) (0) | 2023.09.27 |
| 무료 웹 호스팅 서비스(닷홈), FTP로 파일 올리기(FileZilla) (0) | 2023.09.27 |