-
[HTML] 시작하기 - 2프로그래밍/HTML 2017. 12. 22. 10:34
▶HTML 시작하기 - 2
▶코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <title>Tutorial</title> </head> <body> Hello World!! </body> </html>▶설명
이제 코드에 대해 간단히 설명하도록 하겠습니다.1번째 줄 : DTD 태그
<!DOCTYPE html>
<!DOCTYPE html>에 대한 선언은 <html> 태그보다 먼저써야 합니다.
마크업 언어용 DTD(Document Type Definition) 태그입니다.현재 페이지가 쓰여지는 HTML 버전을 HTML5를 사용하겠다는 뜻 입니다.
2, 12번째 줄 : html 태그
<html lang="ko">
</html>
<html> 태그는 위의 DTD(Document Type Definition)를 제외한 HTML 코드 전체를 감싸는 태그입니다.<html> 태그 안에 추가적인 속성(Attribute)이 존재합니다.lang이라는 속성에 ko라는 값을 넣었습니다. 저게 의미하는 것은 현재 HTML이 어떤 언어를 사용하는지를 나타냅니다.
* 쌍을 맞춰야하는 태그 : <태그명>로 태그를 열고 </태그> 닫는 쌍을 맞춰야합니다. (ex : <html>, <head>, <body>, <title>, <a>)* 단일로 사용 가능한 태그 : <태그명/> 쌍을 맞춰야하는 태그가 아니면, 단일로 사용하는 태그라는 의미로 끝에 /를 붙여주기를 권장합니다. (ex : <meta/>, <br/>)3, 8번째 줄 : head 태그
<head>
</head>
<head> 태그는 HTML 속성을 지정하기 위한 태그입니다. <head> 태그는 <html> 상위에 위치시켜야합니다.
<head> 태그는 <body> 태그보다 우선적으로 읽힙니다.
4~6번째 줄 : meta 태그
<meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta> 태그는 HTML의 부가 정보를 나타내는 태그입니다. (단일로 사용하는 태그이기 때문에 끝에 /를 추가했습니다.)
4번째 줄 : 현재 HTML 문서의 인코딩(= 문자셋 혹은 charset)을 의미하는 코드입니다. (현재 HTML 문서의 인코딩과 불일치하게 사용하면 문자가 깨져보입니다.)
* 한국에서는 일반적으로 UTF-8 혹은 EUC-KR을 문자셋으로 사용합니다. (웹페이지는 글로벌하기를 권장하므로, UTF-8를 추천합니다!)
5번째 줄 : 모바일 반응형을 대응하기 위해 사용하는 코드입니다. (PC에서만 사용하는 웹페이지 제작시에는 제거해도 문제없습니다.)
6번째 줄 : 웹 브라우저 호환성을 나타내는 코드입니다. IE(Internet Explorer)은 브라우저가 버전이 높아도, 버전보다 호환성이 낮게 설정되어, CSS가 정상적으로 적용되지 않는 경우가 발생합니다. 그렇기 때문에, 위의 코드로 현재 브라우저에 최신 버전으로 호환성을 맞춰주는 것입니다.
7번째 줄 : title 태그
<title>Tutorial</title>
<title> 태그는 HTML 제목을 나타내는 태그입니다. 제목은 브라우저 상단에 표시됩니다.9, 11번째 줄 : body 태그
<body>
</body>
<body> 태그는 HTML에 본문에 해당하는 내용이 들어가는 태그입니다.
우리가 페이지에서 실제로 볼 수 있는 내용은 전부 <body> 태그 안에 들어가 있는 내용입니다.
그렇기 때문에, 우리는 Hello World!!라는 내용을 볼 수 있었습니다.
10번째 줄 : 본문
Hello World!
body 내부에 본문입니다!
이곳에 우리가 원하는 태그를 넣어, 보여주고 싶은 웹브라우저를 만드는 것입니다.
'프로그래밍 > HTML' 카테고리의 다른 글
[HTML] 시작하기 (0) 2017.12.21