안녕하세요 기형쌤입니다.
한동안 포스팅을 못 하다가 오랜만에 컴퓨터 앞에 앉네요.
어느새 2021년이 되었습니다. 다들 새해 복 많이받으세요!
새해가 되었음에도 아직도 코로나는 가라앉을 생각을 하지 않네요.
이대로 코로나가 생활의 일부가 되는게 아닌가 걱정이 되는 요즘입니다.
상황이 이렇다보니 취업시장은 점점 더 얼어붙고, 비대면 면접이니 뭐니 하며
일상적으로 아는 취업준비가 어려워지고 있죠.
심지어 취업에 성공하더라도 바로 자택근무를 시작하는 경우가 다반사라고 하더라구요.
상황이 이렇다보니 많은 사람들이 집에서도 할 수 있는 일을 찾기 시작했고,
그에따라 IT업계로 뛰어드는 분들도 많아졌습니다.
누가 뭐라해도 프로그래밍은 집에서도 할 수 있는 작업들이 맞으니까요.
오늘 제가 들고 온 이야기는 HTML에 관한 이야기 입니다.
HTML이란?
일단 HTML은 프로그래밍 언어가 아닙니다. HyperText Mark-up Language의 약자인 HTML은
그 이름에서 볼 수 있듯이 Mark-up Language 입니다.
그렇다면 마크업 언어는 어떤 것을 뜻할까요?
마크업 언어는 문서가 화면에 표시되는 형식을 나타내거나 데이터의 논리적인 구조를 명시하기 위한
규칙들을 정의한 언어의 일종입니다. 데이터를 기술한 언어라는 점에서 프로그래밍 언어와는 분명한 차이가 있습니다.
본래는 교정 부호 등을 표기하는데에 사용했지만, 점차 용도가 확장되어 문서의 구조를 표현하도록 발전한 언어입니다.
마크업 언어에 대해 자세히 설명하자면
실제 책을 하나의 프로그램이라고 생각하면 편하다.
그리고 사람이 그 책에 볼펜으로 밑줄을 긋거나 볼펜으로 필기를 하는 행위가 마크업의 일종이라고 할 수 있습니다.
또는 그래픽 디자이너들한테
'책 표지는 배경을 무지개 그라데이션으로 넣어주시고 제목은 중앙에 검은색 굴림체로 크게 박아주세요'
라고 말하는 것 또한 자연언어 기반 마크업 언어라고 할 수 있습니다.
우리가 흔히 웹사이트에서 보는 로그인 시스템이나 계정에 따라 다르게 보이는 프로필 등은
모두 프로그래밍 언어가 조합된 웹사이트 입니다.다.
일반적인 마크업 언어만으로는 이러한 기능을 구현하는 것이 불가능합니다.
보다 컴퓨터 상의 실제 사례를 보자면, 우선 한컴오피스 한글에서 수식 입력기를 들 수 있습니다.
한글의 수식입력기에서는 마우스로 기호를 하나하나 찾아 골라서 클릭을 하는 식으로도 수식을 입력을 할 수 있지만,
수식이 나타나는 화면의 아래창에 몇가지 명령어들을 규칙에 맞춰 직접 타이핑하며
마우스를 사용하지 않고도 여러가지 수식들을 입력할 수도 있습니다.
이때 사용되는 명령어들도 한컴오피스 한글 문서에서 수식 문자가 화면에 표시되는
모양과 형식을 결정하는 마크업 언어에 해당하게 됩니다.
돌아와서
HTML 언어는 웹 페이지의 모습을 기술하기 위한 프로그래밍 언어가 아니라 마크업 언어 입니다.
웹사이트에서 흔히 볼 수 있는 htm이나 html 확장자의 문서가 바로 이 언어로 작성된 문서입니다.
HTML은 프로그래밍 언어에 비하여 문법 오류에 관대한 편입니다.
그래서 닫는 태그를 누락하거나 태그에 오타가 나거나 하는 오류가 발생해도 어느 정도 무시하고 작동할 수 있습니다.
다만 <div> 태그 등 중요한 태그에서 오타가 난다면 사이트 레이아웃이 깨져버리기도 하니
오타나 누락이 없는게 가장 좋겠죠?
예를 들어
<h1>Hello World!라고만 써도
(<!DOCTYPE> 선언문 누락, <html> 선언 태그 누락, <head>, <body> 태그 누락, 닫는 태그 </h1> 누락)
웬만해서는 의도한 바대로 출력이 됩니다.
HTML은 서버에서 보내오는 정보대로 페이지를 그려내는 것에는 강하지만
반대로 사용자의 입력에 민감하게 반응하여 페이지를 그리는 것에는 약한 편입니다.
또한 동적인 화면 구성이 힘들다는 약점도 있습니다.
이러한 약점을 보완하기 위하여 JavaScript 등의 각종 스크립트의 도움을 받으며,
요즘 유행하는 AJAX도 그런 면을 보완하기에 적합합니다.
그 외에 멀티미디어 지원을 위하여 외부 프로그램을 불러올(embedding) 수 있습니다.
다만 브라우저 의존적인 면이 강하기 때문에
한 쪽 브라우저로 잘 표시되는 페이지가 다른 브라우저로는 완전 엉망이 되는 경우도 있습니다.
HTML5는 비디오/오디오 처리를 위한 별도의 <video>, <audio> 태그를 추가하고
동적인 그래픽은 <svg>와 <canvas> 태그를 통해 사용할 것을 권고하고 있으며
외부 플러그인은 가급적 사용하지 않으려 하고 있습니다.
그러나 아직은 <embed> 태그와 <object> 태그를 통해 외부 플러그인을 제한적으로 실행할 수는 있습니다.
하지만 2021년부터 어도비가 대표적인 플러그인인 플래시의 지원을 종료하면서 사용하지 않을 것을 권고하고 있습니다.
그래서 이전에 플래시로 할 수 있던 기능을 HTTP,CSS,JavaScript (혹은 Node.js) 등으로 통폐합 시키게 됩니다.
태그
태그는 HTML의 근간이라 불립니다.
HTML을 기술하기 위하여 사용하는 명령어의 집합을 태그(Tag)라고 합니다.
태그는 기본적으로 여는 태그와 닫는 태그로 구성되며, 닫는 태그 없이 단독으로 이용하는 태그도 있습니다.
태그에 주는 다양한 옵션은 모두 여는 태그에 지정하며,
닫는 태그는 태그 효과가 적용되는 범위의 끝을 나타내는 기능만을 합니다.
HTML은 웹 브라우저마다 지원하는 태그가 조금씩 다르며,
같은 태그라도 작동하는 방법이 다르지만 대체로 비슷한 태그를 지원합니다.
그래서 태그 종류가 수십 가지가 넘는 데다가,
지정가능한 옵션까지 일일이 열거하면 책 한 권 분량의 엄청난 분량이 됩니다.
따라서 일반적으로는 사용빈도가 높은 일부 태그만 암기하고,
나머지는 '태그사전(또는 레퍼런스)'이라고 하는 도움말 파일을 참고하는 편이 대부분 입니다.
물론 암기 범위는 고급 사용자 내지는 프로페셔널(흔히 웹 퍼블리셔라라 불리는 사람들)로 갈수록 넓어지겠죠?
웹 퍼블리셔, 웹 디자이너, 웹 프로그래머에게 태그는 기본 소양이라고 할 수 있습니다.
'태그 사전'의 도움을 받으면, 약간의 교육만으로 누구나 간단한 웹 사이트는 만들 수 있습니다.
물론 복잡한 사이트는 경험이 필요하기 때문에 입문자들은 만들기 어렵습니다.
사실 HTML 규격에는 HTML이 어떻게 표시돼야 할지에 대해서
큰 틀만 정해져 있고 구체적으로는 설명하지 않고 있습니다.
예를 들어 테이블의 경우 선을 이용해서 줄과 칸을 구별하는 식으로 정해져 있지만,
선의 모양을 구체적으로 정의하지는 않은 것처럼 생각하시면 편합니다.
애초에 HTML은 화면 구성보다는 의미 표현에 치중하고 있기 때문에
결국 한 HTML 파일도 브라우저마다 다르게 보이는 경우가 존재합니다.
이로 인해 최근의 추세는 HTML에는 표시하고자 하는 문서의 구조를 중심으로 기술하고,
구체적인 표시 방법은 CSS에서 정의하는 방향으로 나아가고 있습니다.
HTML 문서를 만드는 방법
HTML 문서의 장점은 언어를 알고있다면 작성은 쉽다는 것에 있습니다.
타 프로그래밍 언어들처럼 언어를 만들기 위한 고유의 환경이 필요하다던지
리눅스라는 OS에서 개발해야한다던지 하는 제약이 없고
간단하게 메모장에 작업을 진행해도 됩니다.
단 HTML 문서를 작성한 후 메모장에서 저장할 시, 다른 이름으로 저장을 선택한 뒤,
파일 형식을 '모든 파일 (*.*)'로 지정하고 파일명 끝에 .html이나 .htm을 추가하면 HTML 문서가 됩니다.
이렇게 하지 않으면 그냥 메모장으로 열리게 되겠죠?
.html로 바꾸고 난 이후에 수정하고 싶다면, .html 확장자 파일을 오른쪽 클릭 후,
연결 프로그램을 선택하고 Notepad(메모장)을 선택하거나, .html 파일을 메모장에 끌어다 놓기 하면 됩니다.
다시 확장자를 .txt로 바꿔도 동일하게 작동 합니다.
참고로 윈도우즈의 메모장으로 HTML 문서를 편집하면, 각 줄마다 CRLF가 달라붙어서 문제가 되기도 합니다.
그러니 웬만하면 Editplus나 vim, Notepad++ 같은 에디터로 편집하도록 하는것을 추천드립니다.
이런 에디터의 경우 HTML이나 서버 사이드 스크립트 코딩에 최적화되어 있기 때문에
구문에 따라 색상 구분도 되는 등 여러 가지 장점이 있습니다.
작성하는 방식은 크게 텍스트 에디터를 이용해 직접 코드를 편집하는 방법과
WYSIWYG 편집기를 사용하는 방법이 있습니다.
WYSIWYG 방식은 드림위버와 나모 웹에디터가 지원하는데 현재의 WYSIWYG 방식은
거의 온라인 에디터로 대체되었으며, 본격적인 웹 개발에는 사용되지 않고 있습니다.
이유는 구조화된 HTML을 강조하는 HTML5와는 심히 궁합이 안 맞기 때문입니다.
제로보드 스킨 등을 만들거나 혹은 기타 다른 홈페이지용 게시판을 자신의 홈페이지에 맞게 만들기 위하여
필요한 PHP나 CGI 파일의 이미지 수정을 위해서는 어느 정도 메모장으로 HTML을 구성하는 능력이 필요합니다.
마지막으로, 이렇게 저장한 .html 파일을 더블클릭해서 실행할 경우
HTML 파일 내부에서 다른 외부 리소스들을 불러오는 데 제약이 가해집니다.
사실상 HTML 파일 하나만 로딩되는 수준인데 이는 브라우저의 보안 모델이 로컬 컴퓨터의 리소스(파일)를
읽지 못하게 제약이 걸려있기 때문으로, 이 문제를 피하려면 웹 서버를 실행해서
http://localhost 또는 http://127.0.0.1 로 접근해야 합니다.
그냥 더블클릭했을 때의 URL은 file:// 로 시작하는 걸로 구분할 수 있습니다.
간단한 페이지를 만든다면 로컬 웹 서버를 실행하는 것보다 저렴한 웹호스팅 계정을 개설한 뒤
FTP를 통해 이용하는 방법이 더 간편하므로 이 방법을 추천드리는 편입니다.
컴파일러
2016년 즈음부터는 웹 환경이 나날이 대형화되고 복잡해짐에 따라 웹 사이트의 근간을 이루는
HTML, CSS, JavaScript는 모두 대안 언어나 기술이 존재합니다.
HTML은 열고 닫는 태그를 일일이 오타 없이 쓰는 게 불편하고 마크업 언어인 탓에
템플릿 지원이 되지 않고 객체 지향적으로 작성이 불가능한 등의 여러 단점이 있었습니다.
그래서 이것을 극복하고자 Pug(구 JADE)라는 컴파일러(트랜스컴파일러)가 만들어졌습니다.
들여쓰기로 블럭을 구분하고 변수나 템플릿 기능을 추가하고 자주 사용하는 id, class 속성을
특수 문법을 통해 간편하게 지원하는 등 여러가지 기능을 제공합니다.
그렇지만 Pug 자체는 컴파일러이고 컴파일 결과가 HTML로 나오는 것입니다.
어디까지나 정적 HTML 문서를 만들어내는 데 특화된 언어 및 유틸리티이기 때문에
Pug만으론 홈페이지에 동적인 기능을 삽입하기는 어렵습니다.
그리고 Pug는 트랜스컴파일러이지 Virtual DOM의 일종이 아닙니다.
그래서 최종 결과물인 홈페이지의 렌더링 속도를 가속해주지는 못합니다.
엄격하게 구조화된 HTML을 생성하기 때문에 HTML 문서 자체의 파싱 속도는 빠르지만
DOM 조작 속도를 개선하지는 못한다고 이해하시면 됩니다.
어디서 배울까?
HTML은 다른 프로그래밍 언어들과는 확실히 다르고 배우기 쉬워보이지만
이 또한 문법이 존재하는 언어입니다.
그래서 혼자 시작하시는 분들께는 제대로 배워보시는걸 추천드립니다.
현재 웹 개발자 관련하여 전문가 과정을 진행하고 있습니다.
확실하게 배우시고 취업까지 하셔서 코로나 시국임에도 불구하고
취업과 성공 모두 잡으시길 바랍니다.
오픈 카톡 링크를 남겨놓으니 그 쪽으로 문의 주시면 빠르게 안내드리겠습니다.
개발자로 취직의 빠른길. IT전문가과정 무료상담 진행중
#IT#취업#국비지원#국민취업지원제도#국비#화이트해커#정보보안#Java#C언어#웹개발자#스펙#무료#취업준비#빅데이터#시스템엔지니어#앱개발
open.kakao.com
'IT 정보나눔!' 카테고리의 다른 글
| 네트워크 관리사2급 취득하는 방법에 대하여 (0) | 2020.12.31 |
|---|---|
| 정보보안기사 자격증에 대하여 알아봅시다! (0) | 2020.12.30 |
| 정보처리기사 자격증에 대해 알아보자! (0) | 2020.12.29 |
| 프로그래머를 꿈꾼다면 리눅스 마스터 자격증을 취득해보자! (0) | 2020.12.28 |
| CCNA 자격증에 대하여 알아봅시다! (0) | 2020.12.26 |
