하루 3분 : 웹사이트와 HTML
시작하기에 앞서
비록, 글쓰는 재주는 없지만 내가 알고 있는 지식을 최대한 활용하여 글을 작성하고자 한다.
웹에 대해서 짧고 쉽게 설명하는게 목적이며, 보다 깊은 내용이나 원론적인 부분에 대해서는 ‘구글’,‘다음’,‘네이버’ 등의 사이트를 통해 습득하기를 기대한다.
_01 웹사이트가 뭘까?
웹사이트는 웹페이지들의 묶음이다. 웹페이지는 인터넷 익스플로어, 크롬, 사파리, 오페라 등과 같은 브라우저에서 표현되는 하나의 화면이다.
_02 웹사이트는 어떻게 만들어질까?
웹사이트는 크게 Front 와 Backend 로 나뉘는데, 화면에 보이는 모든걸 스타일리쉬하게 꾸며주는 Front 개발자와 화면에 보여지는 DATA 를 관리해주는 Backend 개발자의 합작이다. 여러분이 보는 모든 것은 Front 개발자로 인해 아름다워지고, 여러분이 했던 모든 것은 Backend 개발자로 인해 기록,수정된다.
Front 개발자들은 Publisher 라고도 불리운다. 그들은 ‘HTML’,‘CSS’,‘JS’ 등등의 언어를 이용하여 화면에 표현한다. 이때, 나오는 용어들 중 UI,UX라는 말들이 있지만. 더 알고 싶은 분들은 검색하여 공부를 하길 기대한다. 웹은 모두에게 열려있다.
Backend 개발자들은 서버개발자 라고도 한다. 그들은 다양한 언어 예컨대 ‘Python’,‘Node.js’,‘PHP’,‘JSP’,‘ASP’ 등과 같은 언어를 사용하고, ‘NoSQL’,‘RDBMS’,‘In Memory DB’,‘File’ 등을 이용하여 데이터를 관리한다. 빅데이터,머신런닝이라는 어려워보이는 용어와 친근한 사람들이다.
구구 절절 말이 길었다. 저 위의 길다란 설명을 요약해보자면.
여러분이 티비를 본다고 생각해보자. 여러분이 보는 방송물은 Front 개발자들이 개발한 웹사이트와 같다. 이를, 여러분의 티비로 방송해주는 역할을 Backend 개발자들이 한다고 생각하면 조금 쉬울 것 같다. 물론, 완전히 똑같지는 않지만 말이다.
_03 HTML
HYPER TEXT MARKUP LANGUAGE
도대체 이녀석은 무엇일까? 여러분들이 무언가를 그릴때 스케치를 할 것이다. 채색없이. 어쩌면, 그 그림은 단순한 선들의 나열일지도 모르겠다.
그러나 그 선들로 여러분들은 여러분들의 생각을 구체화시키는데 한발 더 다가갈 수 있을 거라고 생각한다. 어쩌면, 그 곳에는 선이 아닌 무언가가 색칠되어 있을지도 모르겠다. 그러나, 여기서는 내가 설명하기 편한대로 얘기를 하겠다.
우선 여러분들이 무언가를 만든다고 가정하자. 여러분은 도면을 그릴 것이다. 그 도면을 개발자들은 HTML 을 이용하여 그린다.
HTML 은 다음과 같이 표현된다.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
Hello World
</body>
</html>
다음과 같은 HTML코드는 화면에 이런식으로 표현된다.
Hello World
여러분은 빈화면에 다음의 글을 확인할 수 있을 것이다.
그렇다면, 우리가 자주 접하는 포털사이트 중 하나를 선택하여 어떤 HTML 코드가 있는지 잠시 살펴보겠다.
<html lang="ko"><div style="display: none;"><input type="input" name="jindo1472144914540"></div><head>
<meta charset="utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=960">
<meta name="apple-mobile-web-app-title" content="NAVER">
<meta property="og:title" content="네이버 메인">
<meta property="og:url" content="http://www.naver.com/">
<meta property="og:image" content="http://static.naver.net/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta property="og:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="네이버 메인">
<meta name="twitter:url" content="http://www.naver.com/">
<meta name="twitter:image" content="http://static.naver.net/www/mobile/edit/2016/0705/mobile_212852414260.png">
<meta name="twitter:description" content="네이버 메인에서 다양한 정보와 유용한 컨텐츠를 만나 보세요">
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?1">
<title>NAVER</title>
-- 중략 --
<span class="opt_weather_group">
<span class="opt_weather_state">@7@</span>
<span class="opt_weather_state">기온 <em class="opt_deg">@8@</em><span class="opt_unit">℃</span></span>
<span class="opt_weather_state">@9@ <em>@10@</em><span class="opt_unit">@11@</span></span>
</span>
</a>
</div>
</script>
<script type="text/template" id="_atcmp_answer_11">아래는 ‘네이버’ 포털사이트를 HTML만으로 구성했을 때를 캡처한 사진이다.
우리가 항상 보던 그 웹사이트가 아니다. 이처럼, 단순히 HTML 은 어느정도의 형태만을 잡아준다. 이는, 보다 더 웹사이트 처럼 보이려면 다른 무언가가 필요하다는 말이다. 말이 길었다.
정리
- 웹사이트는 웹페이지들의 집합이다.
- HTML은 뼈다귀를 만드는 과정이라고 생각하자.
3분 스포
- 뼈만 있으면 앙상하고 볼품없으니까, 살을 붙이고 이쁘게 만들어보자. 뭐가 필요할까?
'Programming > 하루 3분 웹 공부' 카테고리의 다른 글
| [03] 자바스크립트 (0) | 2017.01.05 |
|---|---|
| [02] 스타일 시트 CSS (0) | 2016.08.28 |