✔웹코딩기초강좌 - HTML, CSS, JAVA Script 기초 입문 - ①

✔HTML기초 - HTML, CSS, JAVA Script 입문 - ①

- HTML, CSS, JAVA Script 개념과 기능

- 웹 코딩을 위한 에디터 소개

'오피스샵' 쇼핑몰 웹사이트를 운영하며 HTML에 관련한 기초지식이 없어 운영에 큰 어려움을 겪었습니다. 이에 큰 마음을 먹고 주말동안 웹 코딩 강의를 신청했습니다. 주중의 바쁜 나날들을 보내면 쉬고싶은 마음이 정말 굴뚝같은데 ㅠㅠ,, 그래도 직접 할 줄 알아야 한다라는 생각으로 시작했습니다.

포스팅을 통해 배운 것에 대한 복습을 하는 동시에, 웹코딩에 관련하여 저와 같이 전반 지식이 없는 분들께 도움이 되고자 카테고리를 만들었습니다. 개인적인 기록과, 공부를 위한 포스팅인만큼, 존댓말을 쓰지 않는 것에 대해 양해 부탁드립니다 ^^;

(트..틀린 것이 있다면 댓글로 꾸짖어주세요)

---

1. HTML과 CSS, Javascript

1. HTML - 웹 페이지의 기본적인 내용과 의미를 담는다 

'Hypertext Markup Languaged'의 약자인 HTML은 인터넷 초기에 하이퍼텍스트를 만들기 위해 개발되었으며, 링크를 기반으로 문서를 검색하는 것이 첫 시작이다.

태그(Tag)라는 예약된 키워드로 작성하는 마크업(Markup)언어로써 HTML코딩을 다른 말로 '마크업한다'라고도 표현한다.

2. CSS - 웹 페이지의 외형을 담는다 

'Cascading Style Sheet'의 줄임말로 웹 페이지의 '외형'을 담당한다.

HTML이 메모장에서만 쓴 것 처럼 투박한 내용을 담고 있다면, CSS는 해당 내용에 대한 레이아웃 구성이나 색을 입히기도 하고, 배치시키는 등 웹 페이지의 모양을 다듬어주는 역할을 한다.

3. JavaScript -웹 페이지의 동적인 동작을 담는다 

자바스크립트는 웹페이지가 갖고 있는 기능 또는 동작을 담당한다.

웹서핑을 하다가 페이지 '설정'을 누르면 메뉴가 뜨거나, 글자 크기를 조절하거나, 이미지 슬라이드 등과 같은 설정들을 정립해주는 역할을 한다.

자바스크립트를 다루기 위해서는 HTML과 CSS에 대한 개념이 우선적으로 필요하다.

★ 웹 페이지의 기본 구성요소 → HTML , CSS, JAVA Script

☆ 웹 페이지에 들어있는 게시글 작성, 관리 또는 회원가입 등과 같은 

   동적인 사이트는 서버언어가 PHP, JSP, ASP 등이어야 한다.

2. 웹 코딩을 위한 에디터들

① 메모장

② 드림위버

- Adobe 사의 웹 제작 프로그램으로, 작성한 텍스트들을 직접 바로 화면상으로 확인하며 

  작업할 수 있어 매우 편리하다.

③ 에디트 플러스(Edit Plus)

- 웹제작 프로그램 중 하나로, 각 태그 및 명령어 등을 잘 구분시켜주기 때문에 작성시 편리하다.

④ 제이에스피들(jsfiddle)

- 드림위버만큼 디테일하지는 않지만, html 관련 공부를 시작할 때 가장 유용하게 사용할 수 있다.

  각각의 소스들에 관련해 화면확인이 가능하며, 소스 공유 및 저장이 가능하다.

세오의 어필로그

sseoteo@naver.com