1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <!-- 1 --> <html lang="ko"> <!-- 2 --> <head> <!-- 3 --> <meta charset="UTF-8"> <title>나의 웹페이지</title> </head> <body> <!-- 4 --> abcd <br/> 1234567890 <br/> 가나다라마바사아자차카타파하 </body> </html> | cs |
<!-- --> 이 사이에 1,2,3,4 써 둔 것이 주석으로 써둔 것인데
주석은 컴퓨터가 해석해서 처리하지 않는 부분입니다.
주로 뭐가 설명을 적을때 사용 합니다.
첫번째로
<!DOCTYPE html>
이 부분은 html5 형식의 문서라고 웹브라우저에 알려주는 선언부 입니다.
html의 역사에 따라 형식의 버전이 바뀌어 왔는데
최근에는 html5 로 많이 사용합니다.
그전 html4 형식이면
Html 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Html 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
이런식으로 선언을 하고 그 형태에 맞게 코딩을 하면 되는데 html5 되면서 뭔가 간단해 진거 같아서 개인적으로 맘에 듭니다.
참고로 4형식 이전에도 찾아보면 많이 나옵니다.
두번째로
<html lang="ko">
이 부분은 언어를 한글로 한다는 속성을 지정하는 부분입니다.
자세히 살펴보자면
<html lang="ko">
요소(element) == html
속성(attribute) == lang="en"!
속성명(attribute name) == lang
속성값(attribute value) == en (""안에!!)
이렇게 정리 할 수 있습니다.
세번째로
<head>
<meta charset="UTF-8">
<title>나의 웹페이지</title>
</head>
1.
head 요소에는 문서의 설정 정보와 문서의 제목을 작성합니다.
2.1
meta , title 이 두개가 head의 자식요소 (그래서 들여쓰기(tab)로 보기 편하게 밀어 놓는 것)
meta 요소는 자식요소를 아무것도 가질게 없기에 시작하자마자 바로 닫아도 상관없는것
meta 요소는 chartset 속성의 값으로 utf-8을 가지고 있습니다. (인코딩 설정)
<meta charset="UTF-8"> 이 부분은 한글로 인코딩 한다는 것을 의미합니다.
2.2
<title>나의 웹페이지</title>
이 부분은 웹페이지의 제목을 적는 부분 입니다. 예를 들어 보면
여기 위에 3페이지의 title 이 각각 'AngularJS카테고리~', '계정관리|TISTORY', Dream as if you'll~' 이렇게 코딩되어 있는 것입니다.
마지막으로
<body>
abcd <br/>
1234567890 <br/>
가나다라마바사아자차카타파하
</body>
body 요소에는 클라이언트에게 출력할 정보를 작성합니다.
body 요소의 밑에는 여러가지 종류의 자식요소 들이 있는데 여기서 사용한
그 중에 하나인 br요소는 엔터키를 치는 것과 같이 줄을 바꾸는 것을 의미 합니다.
그래서 실행시켜 보면
이렇게 출력이 되는 것을 볼수 있습니다.
참고로 서브라임텍스트에서 출력은
마우스 우클릭해서 Open in browser 클릭하면 기본적으로 지정되어 있는 웹브라우저로 출력이 되게 됩니다.
'Front-End > html' 카테고리의 다른 글
| html button 태그 (2) | 2020.12.19 |
|---|---|
| HTML 목록만들 때 사용 하는 태그 ul, ol (0) | 2020.12.19 |
| HTML 글자 크기 (0) | 2020.12.19 |
| HTML - Img 태그 (0) | 2020.12.19 |
| HTML, CSS, JS 주석 (0) | 2020.12.19 |
