Web HTML이란?
페이지 정보
본문
안녕하세요. 소심비형입니다. HTML(HyperText Markup Language)은 어떤 웹사이트를 만든다고 할 때 Client side를 담당하는 역할을 합니다. 당연히 서비스를 제공하는 주체(회사)의 서버에서 실행되는 언어(ASP.NET, JAVA, PHP)들을 Server side script라고 부릅니다. 요즘에 와서는 Front end와 Back end라는 용어를 사용하기도 합니다. 아무튼, Designer와 Developer를 구분하면 아래 그림과 비슷하게 표현할 수 있습니다. 어느정도 중복되는 부분도 있고, 협력해야 하는 부분도 있죠. 그래서 디자이너와 개발자 커플이 많기도 합니다. 아래 그림에서 보면 중간에 있는 HTML, CSS, JS, AJAX같은 부분을 Client Side에서 처리되는 언어들입니다. 그리고 MYSQL,, PHP, ASP, RUBY와 같이 Server Side에서 실행되는 언어들이 있습니다. 여기에서 이야기할 부분은 아니지만 UX만을 담당하는 디자이너가 따로 있을수도 있습니다.
제가 언급할 내용은 아니지만, UI와 UX에 대해서 혼동하면 안되기에 간단하게 언급만 하고 넘어가겠습니다.
-
UI(User Interface): 어떤 사이트를 이용할 때 사용자와 서비스를 제공하는 회사가 상호 작용할 수 있도록 소통할 수 있는 창구입니다. 간단하게 NAVER나 DAUM의 검색어를 입력할 수 있는 검색바가 UI를 실현하는 접점이 됩니다.
-
UX(User eXperience): UI보다는 폭넓은 개념으로 사용자가 서비스를 이용하면서 느끼는 경험(좋은 또는 익숙한)을 나타내는데, 여기에서 말하는 경험이란 사이트의 구성, 서비스, 속도, 색상등등이 모두 포함될 수 있습니다.
명확하게 UX라는 개념 또는 디자인의 정리가 되지 않았던 시절에도, 기획자 또는 웹사이트를 의뢰하는 고객들은 이런것들의 중요성을 인지하고 있었습니다. 그래서 보통 비슷한 서비스를 제공하는 홈페이지들을 보면 기본 구성이 비슷한 것을 알 수 있습니다. 쉽게 대형 마트들의 동선과 상품의 진열, 위치들을 생각해보면 좋겠네요. 아래의 이미지는 Front와 Back end가 어떻게 구별되는지 잘 설명하고 있습니다. 그리고 Front end에서 사용되는 Client side 언어들이 있고, Back end에서 사용되는 Server side 언어들도 표시되어 있습니다.
위의 설명을 좀 더 재미있게 표현한 그림이 있네요^^
그래서 HTML이 뭐야?
HTML은 최종 사용자에게 보여질 문서를 작성하는 언어입니다. 그리고 이 문서는 다른 문서로 이동할 수 있는 링크를 가지고 있습니다. 그렇다면, 이 문서를 만들기 위한 방법을 알아야 합니다. 먼저 아래 예제를 보도록 합니다.
HTML문서의 선언.
<!DOCTYPE html>
문자 인코딩의 선언.
<meta charset="UTF-8">
HTML5를 이용한 문서 구조.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Title of the document </title>
</head>
<body> 안녕하세요! 소심비형입니다. </body>
</html>
위의 코드를 메모장에 붙여넣기 한 후 저장합니다.
바탕화면에 Test1.html로 파일 이름을 지정하고 인코딩은 UTF-8을 선택하고 저장 하세요.
실행해보면 아래와 같이 <body></body> 태그 사이에 있는 Contents가 출력되는걸 볼 수 있습니다.
HTML은 <tag></tag>와 같이 꺽쇠괄호 또는 화살괄호안에 약속된 마크업을 사용하여 문서를 작성하게 됩니다. html이 1989년부터 지금까지 많은 변화들이 있었습니다. 태그는 2가지 종류가 존재하는데 시작만 있는 태그, 시작과 종료가 있는 태그로 나뉩니다. 앞으로 자주 보게 될 태그들에서 이런 차이점을 확인할 수 있습니다. 요즘은 호환성을 고려해서 예전 엔진에 대한 고려가 크게 필요 없어 보입니다. 하지만, 과도기 때에는 이전 버전과의 호환성을 위해 여러가지 팁들이 있었죠. 대표적인 Self-closing tag에 대해 빈칸을 추가한다던가 하는 것들입니다. 또한, html 4이전에 사용되던 단일 태그에 대해서도 Self-closing으로 변경된 처리도 있죠.
마지막으로 DHTML(Dynamic HTML)이 있습니다. 이건 언어는 아니고 개념적인 내용입니다. 정적인 HTML을 좀 더 동적으로 사용하기 위해 브라우저(Chrome, IE, FireFox, Safari)에서 제공하는 JavaScript(넷스케이프)와 JScript(마이크로소프트), CSS(Casecading Style Sheets)를 제공합니다. 여기에 추가로 VBScript도 있습니다. 많은것들을 배워야 하지만, 그래도 지금은 사정이 좋아졌다고 할 수 있습니다. 2000년대에만 하더라도 표준의 난립으로 인해 Front end 개발자들은 골머리를 앓아야 했죠. 지금은 HTML과 JavaScript, CSS가 표준화되고 라이브러리 또는 프레임워크화 되었습니다. 아주 긍정적인 현상이죠. 동적인 웹페이지를 만들기 위해 jQuery가 사실상 표준으로 자리잡아가고, Back end는 Node가 자리를 굳히고 있는 모양세라 할 수 있습니다. CSS쪽에서는 Bootstrap이 최고의 자리에 있다가 Gumby에게 자리를 내주게 되었습니다. 뭐 기술의 변화와 동향이야 어떻든간에 웹 응용 프로그램은 격동의 세월을 거쳐 표준화라는 긍정적인 방향으로 가고 있다는 것이 정말 다행입니다.
HTML이라는 단순한 언어를 가지고 너무 방대한 내용을 적었네요. HTML만으로 어떤 정보를 전달하는데에는 무리가 없습니다. 다만, 요즘에 말하는 웹은 사용자가 필요로 하는 정보를 제공하는 것 뿐만 아니라 상호 작용하는 것에 더 중점을 두고 있기 때문이죠. 이 상호 작용하기 위한 방법을 서버 사이드 언어가 제공합니다. 그리고, 상호 작용하는 방법을 좀 더 유연하고 부드럽게 만들어 주는 것들이 동적 기술이 되겠죠. HTML이라는 하나의 주제를 이야기 하면서 너무 많은 주변 기술들로 인해 글의 내용이 중심을 잃고 요점을 벗어나고 있습니다. 그냥 가볍게 읽어주세요^^;
제 홈페이지에서는 서버 사이드 스크립트 언어를 중점으로 진행할 예정입니다. 클라이언트 사이드 언어들은 강좌를 진행하면서 하나 하나 알아보는게 좋겠네요. HTML, CSS, JavaScript에 치중하다보면 정작 ASP.NET 진행이 늦어질게 뻔하고, HTML과 같은 경우, 암기 과목과 같아서 직접 찾아서 사용해보면서 학습하는게 더 효율적입니다. 하지만, 대부분은 검색하면서 사용하다보면 자연스럽게 외워지기 때문에 부담을 가질 필요는 없죠. 자주 사용되는 태그들은 자연스럽게 외워지게 되거든요.
HTML을 공부하려면 아래의 사이트를 참고하세요.
다음 시간에...
- 이전글HTTP란? 20.09.12
- 다음글안전하지 않기 때문에 파일 공유에 연결할 수 없습니다. (SMB1, SMB2) 20.09.02
댓글목록
등록된 댓글이 없습니다.