-
[HTML] HTML 과 HTML 코드의 구성HTML & CSS 2021. 4. 3. 13:44
이번 포스팅에서는 HTML이 무엇이며 HTML 코드가 기본적으로 어떻게 구성되어 있는지 알아보겠습니다😁
1. HTML
HTML 은 Hyper Text Markup Language 의 약자입니다.
위키백과는 다음과 같이 설명하고 있는데요.
하이퍼텍스트 마크업 언어(HyperText Markup Language, HTML)는 웹 페이지를 위한 지배적인 마크업 언어다. - 위기백과 -
여기서, hyper text 는 쉽게 말해 링크를 의미하며 markup language 는 컴퓨터가 받아들일 수 있는 언어입니다.
우리가 일상적으로 사용하는 웹페이지는 수많은 링크로 구성되어 있고, html 은 글, 태그, 속성 등을 사용해 이러한 링크들을 포함하는 문서나 데이터의 구조를 컴퓨터에게 알려주고 컴퓨터는 이를 받아들여 화면을 출력해줍니다.
이때, 글은 text, 태그는 text를 감싸는 틀, 속성은 틀에 붙는 부가 설명이라고 이해하면 쉽습니다.
그런데, html 은 단순히 웹페이지의 구조를 나타내는 언어이므로 HTML을 작성할 때 웹페이지를 꾸미려하지 말고 구조를 만드는데에 집중하는 것이 좋습니다.
웹페이지를 꾸미는 일은 CSS 를 통해 할 수 있습니다.
2. HTML 코드의 구성
HTML 이 간략히 무엇인지 살펴보았다면, 코드들이 어떻게 구성되어 있는지 보겠습니다.
HTML 코드의 구성
1. 이 문서가 html 문서라고 알려주는 태그
2. 직접 화면에 등장하지 않지만, 이 문서를 설명하는 태그(title, 인코딩 방식 등)
3. 화면(문서)에 보이는 태그
HTML 문서는 위 3종류의 코드로 구성되어 있고, 코드를 보면 아래와 같습니다.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>코딩공부<title> </head> <body> </body> </html>1. 이 문서가 html 문서라고 알려주는 태그
우선 1번 줄의 <!DOCTYPE html> 과 <html></html> 은 이 문서가 html 문서라고 알려주는 태그입니다. 모든 html 문서에는 이 코드가 들어가 있습니다.
그리고 2번 줄의 <html lang="ko"> 는 html 문서가 어떤 언어로 작성되었는지 알려주는 태그입니다. ko 는 한국어, en 은 영어입니다.
2. 직접 화면에 등장하지 않지만, 이 문서를 설명하는 태그(title, 인코딩 방식 등)
또한, 화면에는 직접 보이지 않지만 이 문서를 설명하는 태그들이 있는데요, 이 코드들은 <head> 태그 안에 들어가 있습니다.
위 예시에서 <meta charset="UTF-8"> 은 이 문서에 입력한 코드들을 한국어로 인코딩해주는 코드입니다.
그리고, <title>코딩공부<title> 는 웹페이지의 제목을 의미하는데 화면 상에 나타나는 것이 아니라 웹페이지 주소창 위에 제목으로 나옵니다.아래 이미지에서 주소창 위 빨간 테두리로 표시한 부분에 나타납니다!
3. 화면(문서)에 보이는 태그
마지막으로 화면에 보이는 태그들은 <body> 태그 사이에 들어가서 여기에 코드를 작성하면 우리가 보는 웹페이지 화면에 출력됩니다.
HTML 코드는 위와 같이 구성되어 있는데요, 실제로 네이버 웹페이지의 HTML 코드를 살펴보겠습니다.
네이버 창에서 커서를 아무데나 두고 오른쪽 클릭해 맨 아래에 '검사'를 눌러보겠습니다.
그러면 개발자 도구 창이 열리면서 화면 오른쪽에 코드들이 나오는데요,
오른쪽의 Elements 라고 되어 있는 탭을 보면, 이렇게 위에서 이야기한 html 을 구성하는 코드들이 모두 들어가 있습니다.
다른 웹페이지를 살펴봐도 모두 동일한 구조로 되어 있습니다.
이렇게 간략히 HTML 이 무엇인지 그리고 HTML 문서의 구조는 어떻게 되어 있는지 살펴보았습니다!
이제 HTML 로 작성된 문서를 보면, 아 이 문서는 HTML 문서구나! 하고 알 수 있게 되었습니다 ㅎㅎ
'HTML & CSS' 카테고리의 다른 글
[CSS Grid] min-content, max-content (0) 2021.09.03 [CSS Grid] minmax 로 반응형 만들기 (0) 2021.09.03 [CSS Grid] grid-auto (0) 2021.09.03 [CSS Grid] 그리드 정렬 (0) 2021.09.03 [CSS Grid] 그리드 기초, 그리드 템플릿 (0) 2021.09.02