비 전문가들을 위한 html,css, 웹퍼블리셔에 대한 설명

보통 웹에 관련 일을 한다거나 웹을 공부 하는 분들을 제외한 일반 웹 사용자들은 크롬, 익스플로러 같은 브라우저 정도만 알 것입니다.

저 같은 경우도 웹 퍼블리셔 하기 전에는 크롬도 몰랐었는데요.;;

 

다른 사람들에게 제 직업을 소개 할 때 웹 퍼블리셔라고 소개 하면 함께 보충으로 설명을 해야 하는 것이 html 과 css 인대 이것 또한 웹에 관한 배경 지식이 없는 분들에게 이해가 가도록 설명을을 하는 것도 어려운대요.

 

그래서 html 과 css, 웹퍼블리셔에 대해서 웹에 관련 지식이 없는 분들도 이해가 가도록 포스팅을 하려고 합니다.

 

하나 하나 씩 천천히 설명을 해 보겠습니다.

 

우리가 즐겨 가는 쇼핑몰이나 포털 사이트,  그밖의 사이트 들은 그 사이트 만의 디자인이 있습니다. 

(사이트들이 레이아웃이나 폰트컬러, 폰트싸이즈. 사이트에 들어가는 이미지, 배경 컬러들이 다 다른대요)

 

보통 하나의 사이트를 만들게 될 때 사이트 기획을 하고 그 기획에 맞춰서 웹 디자이너가 웹 사이트 디자인을 합니다.

 

보통 웹 디자인은 포토샵을 이용해서 시안을 만드는대요, 웹 디자이너가 만든 결과물, 시안을 웹 브라우저(크롬,익스플로러, 등)에 나오게 해야겠죠?

디자인이 된 시안을 브라우저에 나오도록 하는 임무?를 웹퍼블리셔가 하는일 중에 하나라고 이해 하면 좋을 것 같습니다. (포스팅은 안했지만 웹퍼블리셔가 하는일은 더 있습니다.)

 

그 다음 이제 웹 퍼블리셔는 웹 브라우저에 디자인 시안을 표현 해야되는데 어떻게 표현을 할가요?

 

그것이 바로 html 과 css 입니다.

html 과  css를 사용하여 브라우저에 디자인 시안을 보여 줄 수 있게 해줍니다.

 

이제 html과 css에 대해서 설명을 할 텐데요,

그 전에 먼저 크롬 브라우저에서 하나의 사이트를 접속하고 키보드 f12키를 눌러 보겠습니다.

그러면 새로운 창이 하나 나타 나는대요, 그 창으로 지금 내가 open 한 페이지의 소스를 볼 수 있습니다.

 

저는 티스토리를 열고 f12 키로 확인을 했더니 다음과 같이 나왔는대요,

 

이미지를 보면 핑크 색 박스 처리한 부분이 있는대요, 박스 표시 한 부분이 html 태그 라는 것인대요,

html 태그가 많아서 전부 박스처리를 하지는 않았습니다.

 

 

모든 사이트는 참고 이미지처럼 html 태그라는 것으로 사이트의 컨텐츠(내용)를 표시 하고 있습니다.

더 깊이 알고 싶으신 분은 https://ko.wikipedia.org/wiki/HTML 여기에서 확인 부탁드리구요, 저는 마저 저대로 설명을 이어 하겠습니다.

HTML - 위키백과, 우리 모두의 백과사전

 

html 태그는 종류가 많고 그 태그마다 하는 역할이 있는대요, 웹 퍼블리셔는 기획서 와 디자인을 보고 html 태그를 사용하여 사이트의 레이아웃을 만들고 고 사이트의 컨텐츠들을 어떤 태그로 표현을 할 지 정합니다.

 

html 로 사이트의 뼈대를 만든 후 css 라는것을 이용해서 html 태그에 색도 입히고, 영역도 주고(높이 나 넓이 나 간격 등...)  이런 스타일을 입힙니다.

 

css 에 대해서 좀더 자세한 설명을 원하시면 아래에 사이트에서 확인 하실 수 있습니다.

https://developer.mozilla.org/ko/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works

How CSS works

 

웹 디자이너가 만든 시안대로 웹사이트의 페이지 들이 브라우저에 나오게 하는 역할을 하는 것이 웹 퍼블리셔의 주요 역할 이라고 할 수 있습니다.

웹 퍼블리셔의 역할은 이것이 전부는 아닌대 더 깊은 설명은 안하고 이정도로만 이해를 해도 괜찮을 것 같습니다.