HTML의 기본양식이란?
- 모든 프로그래밍언어에는 기초가되는 틀이 있다. c언어의 int main(void) 혹은 java의 public static void main (String[]args) 처럼 html에게도 기본 뼈대가 있다. 아래 예제로 먼저 소개하겠다.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title> Studying </title>
</head>
<body>
</body>
</html>
기본 양식은 위와 같다. 이제 하나씩 천천히 알아가보자.
<!DOCTYPE html>이란
- DOCTYPE은 Document Type의 약자이다. 따라서 이를 직독직해 해보면 문서 타입 html 인데 이를 좀더 자연스럽게 바꿔본다면 문서 타입은 html 이다.그렇다 <!DOCTYPE html>은 문서의 타입을 알려주는것이다. html은 여러버전을 가지고 있다. 따라서 코드는 같은데 버전에따라서 실행결과가 달라지는 일이 발생할 수 있다. 따라서 !DOCTYPE html은 웹 및 브라우저한테 html의 버전이 몇이라고 알려주는 역활을 한다. 이를 통해 호환성을 높일 수 있다.
<head>란?
- <head> 태그는 웹 페이지의 사전 정보를 담고 있는 태그이다. 이 태그는 웹페이지상에 표시되지 않으면 보통 css 나 js의 정보를 담고 있다. 네이버에겐 미안하지만 한번만 더 예시로 사용하겠다. 아래는 네이버의 <head> 태그이다.
보면 굉장히 많은것들이 들어가있지만 공통적인 단어가 눈에 들어올것이다. 바로 <script> 태그 이다. 이 태그에 대해 간략히 설명하자면 js로 작성되어 있는 파일을 scr="파일주소" 를 통해 불러오는것이다. 현실에 비유를 해보자면 옷을 입는것이다. 이처럼 <head>태그안에는 웹페이지 구조에대한 코드보다 사전정보들을 담고 있는 태그이다.
<head>태그 안에 보면 <meta charset="utf-8"> 이라는 처음 보는 코드가 있을것이다. <head>태그는 사전정보를 담고있다고 말했듯이 <meta charset>의 의미는 페이지의 인코딩 방식을 설정한다는 의미이다. 해당 코드에서는 인코딩 방식을 utf-8로 설정하였는데 utf-8로 설정한 이유는 해당 인코딩 방식은 어떤 언어든 깨지지 않고 출력이 가능하기 때문이다. 간결히 말하면 표준 유니코드 문자를 모두 표현할 수 있기 때문이다.
그리고 <head> 태그안에는 <title> 이라는 태그가 있는걸 볼 수 있다. 해당 태그가 어떤 기능을 하는지 알아보기 위해 한번 더 네이버를 빌리겠다.
필자는 F12를 통해 네이버 <title> 태그 안에 있는 내용(회색줄)을 변경하였다. 차이점이 눈에 보이는가. 눈썰미가 좋다면 왼쪽 상단네이버 이미지 옆에 itwayup 이라는 글자가 표시된걸 볼 수 있다. 이렇게 <title> 태그는 페이지의 이름을 설정하는 역활을 한다. 이제 네이버는 내거다.
<body>태그란?
- <body> 태그는 html 뼈대의 핵심이 되는 태그이다. <body>태그는 웹페이지에 대한 전반적인 내용을 담고 있다. 이 태그 안에 우리가 전에 배웠던 <h1> 태그등이 들어가 웹페이지를 구성하게 된다. "백문불여일견" 네이버를 통해 알아보자ㅎㅎ
네이버의 <body>부분을 봐도 뭐가 무엇인지 잘모를것이다. 다른 부분 다 치워두고 <div id="wrap"> 이라는 구간만 주목해보자. F12를 눌러 해당 코드에 마우스를 올려보면 아래와 같이 표시될것이다.
잘모르겠으니 그 밑에것 봐보도록 하자.
해당 기능을 소개하자면 마우스가 올라가있는 코드가 어떤 부분인지를 알려주는 역확을 한다. 다시말해 <div id="wrap"> 이라는 코드는 네이버 페이지 전체에대한 영역을 가지고 있고 <header>는 제목 상단 <container>는 중간부분의 영역을 가지고 있는것을 볼 수 있다. 이처럼 <body> 태그안에는 페이지 전반적인 내용이 담겨져 있다.
이제 태그가 무엇인지,html의 기본 구조도 익혔으니 다음시간부터는 태그들을 하는 시간을 가지겠다.
'HTML' 카테고리의 다른 글
| HTML input 태그 (0) | 2024.03.16 |
|---|---|
| HTML 글자를 꾸며주는 태그들에대해 알아보자 (0) | 2024.03.14 |
| HTML h1 태그에대해 알아보자 (0) | 2024.03.13 |
| HTML의 태그(tag)에대해 알아보자. (0) | 2024.03.13 |
| HTML에대해서 알아보자 (1) | 2024.03.13 |