HTML/CSS/드림위버/ Javascript/제이쿼리 기본 기념부터 시작하기!

기획자라 기획하고

개발자라 개발하고

디자이너라 디자인하는 

시대는 이젠 지나간것 같아요.

개빠기엄은 웹 기획, 운영을 하다보니  

컨텐츠 운영을 위해 일러/ 포토샵 뿐만아니라

HTML/CSS/J Query도 하게 되더군요.

개인적으로도 웹디자인에 관심이 있어서도 그렇지만

웹기획을 할때에도 제가 HTML/CSS/J Query를 

알때와 모를 때 업무소통부터 결과물까지 많이 다르더군요.

오늘부터는 소소하게 HTML/CSS부터 시작해서

 Javascript/JAVA까지 웹기획자도 알아야할 웹디자인 구조에 대해 공유합니다.

---

제일먼저 웹디자인을 시작하게되면 듣게되는 첫단추!

HTML

[Hypertext Markup Language]

웹 문서를 만들기 위하여 사용하는 기본적인 프로그래밍 언어로 

하이퍼텍스트로 문자와 문자를 연결시켜주는데이터.

네??무슨 말이ㅈ ㅣ 음....오...아...예....

저는 태생 문과생이기 때문에 쉽게 풀어써야 이해가 쉽네요.

웹 화면상의 브라우저 데이터를 표시해주는 언어로

웹제작에 쓰이는 프로그래밍 언어라고 생각하시면 된답니다.

그래서 웹문서 제작에 가장 기본 베이스가 됩니다.

CSS

[cascading style sheets]

웹문서에 전반적인 스타일을 미리 저장해 둔 스타일 시트입니다.

문서 전체의 일관성을 유지할 수 있고 세세한 스타일 지정 필요가 줄어들게 되죠.

 Instagram에 사진을 올릴 때 밝기/대비/구조/온도/채도 등을 미리 조정하여 

Clarendon, Gingham, Lark 와 같은 이름을 정한 필터를 두는것과 똑같습니다.

내 인스타에 사진에 동일한 필터를 적용하여 통일감을 중는것 처럼

작성된 HTML의 다양한 모양을 추가,변경하여 웹사이트의 통일감 부여할수 있는 것이죠.

글자의 모양과 크기, 줄 간격 등을 자유롭게 컨트롤 할 수 있게 한 언어로 

HTML로 만든 베이스에 예쁘게 디자인을 할수 있는 것이 바로 CSS입니다.

Javascript

그렇다면 자바스크립트는 무엇일까요?

앞서 말한 것 처럼 HTML은 웹페이지의 기본 베이스를 제공하고, 

CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리합니다. 

그 다음 자바스크립트는 크로스플랫폼( cross platform) 객체지향 스크립트 언어로 웹페이지 동작을 담당합니다. 

웹문서의 HTML을 이용하여 정보를 보고 연결하는 것 외에 

팝업창, 전화번호 연결, 이메일 체크 등 기능적인 요소를 위해 사용되는 언어로 

웹사이트의 보여지는 모든 모션, 액션을 입히는 것을 말합니다.

DREAMWEAVER

드림위버는 HTML/CSS/Javascript와 같은 프로그래밍언어를

쉽게 편집할수 있도록 도와주는 편집 툴입니다.

매크로 미디어가 개발하여 어도비에서 인수를 하면서 가장 대표적인 프레스토기반 편집기가 되었습니다.

이제는 웹페이지 제작을 처음 접하는 사람들에게 

코딩의 충격을 완화시키는 쉬운 툴로써 가장 기본적인 툴로 자리잡았습니다.

아기가 걷기 전에는 뗄수 없는 보행기처럼

직코딩을 하기 전까지는 달고 가야할 것이 드림위버죠.

---

우리가 매일 접하는 웹사이트의 3대 요소!

HTML/ CSS/ Javascript 

더 나은 기획결과물을 위해 하나씩 돌파해 나가봅시다!

 posted at 14.10.2016

개빠기엄