0. HTML 별거 없다
HTML 이라는 단어는 굳이 개발자가 아니더라도 많이 들어본 단어일 것이다.
인터넷과 스마트폰이 일상생활이 된 요즘
하루에도 몇 번씩 접근하고 사용하는 만큼 친숙한 영역일 것이다.
Web(웹) 개발을 하게되면 3가지를 기본으로 배우게 되는데,
HTML, CSS, JavaScript 이다.
오늘은 HTML에 대해서 먼저 기초를 다져 보기로 하겠다.
HTML은 웹에서 뼈대를 장식하는 Markup Language이다.
아래의 그림과 같이 오른쪽에 HTML로 작성된 내용이
왼쪽 화면 같은 형태로 보여지게 된다.
(* 나무위키에서 HTML에 대한 웹페이지 화면과 소스(HTML)이며,
빨간색 표시된 영역 처럼 중간 중간 웹페이지에 있는 텍스트 내용이 우측 소스에서도 확인이 되며,
실제 사용자가 보게 되는 페이지의 경우 CSS 코드도 포함이 되어있다.)
하지만 이렇게 많은 내용이 담겨서 작성된 HTML 소스코드를 보게 되면
HTML 자체에 대해 거리감과 이질감이 생기고, 어려운 영역이라 생각할 수 있지만,
오늘 알려줄 기본만 알면 이런 많은 소스코드들도
기본에 기본이 계속 추가되고 반복되었다는 것을 알 수 있을 것이다.
오늘 포스팅의 목적은 이러한 html 문서를 보면 머리가 어질어질한,
스스로 전산분야와는 동떨어져 있다고 생각하는 내추럴 문과생들도
이해할 수 있는 설명을 해보는 것이다.
초등학교 시절 원고지에 글을 쓰던 글쓰기 시간을 잠시 떠올려보자.
우리는 원고지에 무작정 적지 않았다.
선생님이 알려주시는대로 한 줄을 띄우고,제목을 가운데 적고,
문단의 시작 시 한 칸을 띄우는 등 글을 쓸 때에도 정해진 규칙이 있었다.
HTML도 정해진 규칙들이 있는데,
HTML의 시작이 웹상에서 다른 사람이 볼 수 있게 하기 위한
전자 문서의 한 형태라고는 것을 생각한다면
이러한 규칙만 알고 있으면 난해한 것 같은 HTML을 작성하거나 이해할 수 있다.
1. HTML의 구조
HTML은 크게 head와 body 부분으로 나뉜다.
head 부분에는 meta 정보나 style 정보 등과 같은 설정 정보를 포함하고,
(이러한 내용은 지금은 크게 중요치 않으니, 나중에 다시 다뤄보자.)
body 부분에는 화면에 보여지는 전체적인 내용을 작성한다.
작성된 HTML은 흔히 알고 있는 크롬이나 엣지 같은 브라우저를 통해
보기 좋게 볼 수 있다.
위에서 언급한대로 브라우저는 HTML을 읽고 양식에 맞게 사용자에게 보여주게 되는데,
html을 읽는 순서는 상단의 head를 먼저 읽고 body를 읽게 된다.
그래서 웹 3대장이라 불리는 CSS나 JS의 경우,
head 하단에 생성하는게 일반적(정석)이나,
JS의 경우, 해당 페이지를 빨리 보여주는 듯한 눈속임을 위해 body 아래 부분에 작성하기도 한다.
그 이유는 html의 font나 color 등 style을 다루는 CSS와는 달리
JS는 사용자가 별도의 동작을 하기 위한 내용을 가지고 있기 때문인데,
내용을 보지도 않고 사용자가 별도의 동작을 요청할 수는 없기 때문이다.
그래서 JS를 먼저 보여주더라도 해당 페이지의 내용이 나타나지 않으면
아무런 쓸모가 없는 대기 시간이 발생하게 되는데,
브라우져가 HTML 전체를 다 읽는 시간은 동일하나,
사용자가 눈에 보이지 않는 동작에 대한 기능들을 나중에 읽음으로써
아직 body 아래(JavaScript) 부분을 읽지 못했지만,
사용자는 내용을 먼저 확인할 수 있게 되고
사용자가 내용을 확인하는 동안 body 아래(JavaScript) 부분을 마저 읽어 들이는 것이다.
조삼모사 같은 이야기지만, 실제 사용자는 해당 방식이 더 빠르다고 느끼게 된다.
2. HTML 표기(Tag, Element)
html에 대한 강의를 보게 되면 가장 먼저 듣는 단어들이 태그(Tag) 또는 엘리먼트(Element) 일 것이다.
태그는 '<html>' 와 같은 괄호를 이용하여 표기하는데 명령어 종류라고 생각하면 된다.
태그의 종류는 수십가지가 넘고, '<html>'과 같이 역슬러쉬('/') 없이 작성된 태그를 여는 태그,
'</html>'와 같이 역슬러쉬('/')를 포함한 태그를 닫는 태그라고 말하는데,
이 사이에 원하는 다른 태그를 추가하거나 반복하여 원하는 내용을 담는 것이다.
(*모든 태그가 닫는 태그를 사용하지는 않는다. img 같은 일부 태그는 여는 태그만 있으면 된다.)
엘리먼트의 경우, <title>To올라운더의 HTML연습</title> 과 같이
여는 태그(<title>)와 내용(To올라운더의 HTML연습), 닫는 태그(</title>)로 구성된 상태를 말하며,
우리말로 '요소'라고 표현하는 경우도 있다.
혹시나 나중에 웹에서 데이터를 수집하는 크롤링 작업을 하게되면
태그와 엘리먼트를 통해 우리는 원하는 내용을 수집하게 된다.
믿을 수 없게지만 큰 틀은 이게 전부다.......
이제 세부적인 사용 예시를 다음 포스팅으로 들여다 보겠다.
'IT 배우기 > 이것저것' 카테고리의 다른 글
| 파일 명령어로 일괄 삭제하기(forfiles) (0) | 2023.06.01 |
|---|---|
| Visual Studio Code 설치 (0) | 2023.05.29 |
| HTML 기초다지기2 (1) | 2023.05.25 |
| 임시저장 이어쓰기 (0) | 2023.05.22 |
| 취미 겸 부업, 코딩1 (2) | 2023.05.21 |
