맨 땅에 프론트엔드 개발자 되기

코딩독학) HTML이란? HTML 문서의 기본 레이아웃 본문

코딩 공부 일지/HTML5

코딩독학) HTML이란? HTML 문서의 기본 레이아웃

헬로코딩 2021. 9. 17. 20:55
728x90

HTML (Hyper Text Markup Language)

 

'인터넷은 왜 만들어졌을까?'를 알게 되면 HTML 문서의 특성을 알 수 있다. 

과거에는 어떤 지식, 또는 정보는 책과 같은 인쇄물을 통해 다른 사람과 공유될 수 있었다. 컴퓨터의 발명 그리고 통신 기술의 발전으로 인쇄물 없이 인터넷 공간에 정보를 기록해둘 수 있게 되었고, 인쇄물의 한계를 뛰어넘어 더 많은 사람들과 정보를 공유하고 상호 수정, 발전을 시킬 수 있게 되었다.

 

이러한 문서들은 사람들에 의해 어떤 특별한 형식으로 만들도록 고안되었고, 이것이 바로 HTML 문서 형식이라 부르는 것이다. HTML 문서 형식으로 문서를 만들게 되면 HTML 문서를 읽을 수 있도록 고안된 웹 브라우저가 HTML 문서 안의 태그를 해석해서 웹 브라우저 상에 문서를 보여주는 방식으로 작동된다. 그러므로, 보통 HTML 문서 작성 프로그램 (메모장, Visual Studio Code, Text Editor 등)으로 문서를 작성한 뒤 웹 브라우저(Internet Explorer, Microsoft Edge, Google Chrome, Safari, Firefox 등)로 문서를 열어서 사용하는 형식이다.

 

HTML은 'Hyper Text Markup Language' 의 약자로 Hyper Text는 다른 문서로 '하이퍼' 즉, 이동한다는 뜻이며 여러 문서가 연결되어 상호 이동가능한 문서를 말한다. 소설과 같은 문서의 형식이 '발단, 전개, 위기, 절정, 결말'의 5단계 형식을 갖추고 있듯이 HTML 문서도 문서 형식을 가지고 있다. 이 형식은 사람들에게 가장 정보를 효과적으로 보여주고, 여러 정보를 '하이퍼' 하면서 효율적으로 탐색할 수 있도록 사람들에 의해 고안된 형태다. HTML 문서는 태그(명령어)로 이루어지는데, 꺽쇠괄호 "<>"를 사용하여 나타낸다. 일반적으로는 명령어의 종료를 뜻하는 슬래시 문자 /를 넣어 쌍으로 태그를 만든다.

 

기본형태는 아래와 같다.

<html> - 이 문서를 html 문서 형식으로 만들겠다는 태그

<head> - 화면에 보여지기 위한 부가 정보(메타 정보)를 담고있는 부분

<body> - 화면에 보여지는 부분

 

HTML 문서는 기본적으로 html 태그 안에 head와 body로 두 영역으로 구분된다. 보통 들여쓰기를 통해 태그 간의 포함관계를 나타낸다. head 영역 안에는 이 문서의 특징, 호환성 등의 부가 정보를 담고, body 영역 안에 문서의 본문을 작성하게 된다. body 영역도 기본 레이아웃 형태를 가지고 있다. 이는 디자인에 따라 변경될 수 있지만, 기본적인 형식이 이러한 형태라는 것을 지식으로 알아두면 좋다.

 

 

HTML 문서의 레이아웃 기본 형태

출처 - 구글

<header> - 헤더 영역에는 보통 이 문서의 제목을 넣는다.

<nav> - navigation 의 축약으로 다른 html 문서로 이동할 수 있는 메뉴를 놓는 곳이다.

<section> - 본문의 영역

<article> - section 과 비슷하지만, 독립적인 영역으로 구분할 때 사용

<aside> - 본문과 구별되어 별도의 영역으로 구분할 때 사용

<footer> - 문서의 하단 영역, 보통 저작권이나 저자의 정보를 적을 때 사용

 

section, article, aside 등 구분이 뚜렷하게 명확하진 않지만, 예시에 사용된 그림과 같이 디자인적으로 구분하기 위한 용도인 것 같은 느낌... 아직까지 코딩 초보로서 그 구분을 확실하게 하진 못 하겠다. 나중에 알게된다면 업데이트 해야지.

 

우리가 흔히 보는 HTML 문서의 구조

 

프로그래머로서 HTML 문서를 본다면, 문서의 내용보다도 문서의 구조와 그 역할을 볼 줄 알아야 한다. 그 영역을 구성하고 만드는 것이 바로 프로그래머가 하는 일이기 때문이다. (이는 사실, 퍼블리셔의 역할에 더 가깝긴 하지만...) 요점은, 프로그래머는 웹 브라우저를 통해 구동되는 코딩 언어를 이해하고 사용할 줄 아는 것이 내용을 채우는 일 보다 중요하다는 것이다.

문서 구조의 형식을 처음 봤을 때 "굳이 저 형식을 따라서 만들어야 해?" 라는 생각이 들었지만, 이것이 레거시이고, 레거시를 알아야 나중에 이를 통한 활용도 할 수 있을 것이라 생각한다.

 

 

 

출처

네이버 지식백과 HTML

https://terms.naver.com/entry.naver?docId=1168097&cid=40942&categoryId=32838 

 

HTML

웹 문서를 만들기 위하여 사용하는 기본적인 웹 언어의 한 종류이다. 하이퍼텍스트를 작성하기 위해 개발되었다. 인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사

terms.naver.com

유노코딩 - 입문자를 위한 HTML 기초 강의

https://www.inflearn.com/course/%EC%9E%85%EB%AC%B8%EC%9E%90-html-%EA%B8%B0%EC%B4%88%EA%B0%95%EC%9D%98/dashboard

 

[무료] 입문자를 위한 HTML 기초 강의 - 인프런 | 강의

웹사이트 만드는 데 가장 기본이 되는 HTML의 주요 개념과 기본 문법을 소개합니다. 아무런 관련 지식을 보유하지 않은 입문자들도 소화할 수 있도록 만든 강의입니다., 'HTML 어린이' 를 위한 기초

www.inflearn.com

윤지수 선생님의 초보자를 위한 HTML & CSS 동작과 원리 (edwith)

https://www.edwith.org/htmlcss/joinLectures/12826

 

초보자를 위한 HTML & CSS 동작과 원리 강좌소개 : edwith

- 윤지수

www.edwith.org

 

728x90
저작자표시

'코딩 공부 일지 > HTML5' 카테고리의 다른 글

HTML 시맨틱 태그를 사용하는 이유  (0) 2022.02.14
코딩독학) HTML 태그 ID와 CLASS  (0) 2021.09.19
코딩독학) HTML 태그의 종류와 역할3 Form & Input  (0) 2021.09.19
코딩독학) HTML 태그의 종류와 역할2 영역 태그  (0) 2021.09.19
코딩독학) HTML 태그의 종류와 역할  (0) 2021.09.17
'코딩 공부 일지/HTML5' Related Articles more