ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 비 전문가들을 위한 html,css, 웹퍼블리셔에 대한 설명
    html, css 2019.06.02 21:57

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

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

     

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

     

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

     

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

     

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

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

     

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

     

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

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

     

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

     

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

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

     

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

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

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

     

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

     

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

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

     

     

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

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

     

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

     

    html 로 사이트의 뼈대를 만든 후 css 라는것을 이용해서 html 태그에 색도 입히고, 영역도 주고(높이 나 넓이 나 간격 등...)  이런 스타일을 입혀 웹 디자이너가 만든 시안대로 브라우저에 나타 날 수 있도록 하는 역할을 해주는 것이 웹 퍼블리셔의 주요 역할 이라고 할 수 있습니다.

     

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

     

    css가 무엇인지에 대해서는 아래에 사이트에서 확인 하면 좋을 것 같습니다.

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

     

     

     

    댓글 0

Designed by Tistory.