lecture note 00.orientation

1. Study Wordpress
Joo Dongwoo
- Orientation -

2. 웹 개발의 두 영역
프론트 엔드(Front-end)
눈에 보이는 환경을 개발 – 디자인의 영역
사용 언어: html5, css, jquery 등
백 엔드(Back-end)
눈에 보이지 않는 환경을 개발 – 서버사이드 스크립트
ex) 로그인 시스템, 전자 결제 시스템, 게시판 시스템 등
사용 언어: php, ruby, ruby on rails, java, jsp, asp 등

3. HTML
Hyper Text Markup Language
Hypertext: 컴퓨터 디스플레이 같은 전자기기에서 다른 text로 접근하게 해주는
링크(link)를 가진 text
HTML: 웹 문서를 만드는데 기반이 되는 언어
Browser: HTML을 해독해서 우리 눈에 보이게 만들어주는 프로그램
브라우저마다 해독하는 방식이 미세하게 다름

4. CSS
Cascading Style Sheet
html은 뼈대, css는 옷
html로 구조를 짠다면, 눈에 보이는 거의 모든 시각적 효과는 CSS가 담당
Example) font 종류, 색상, 크기, 위치 등

5. Media query
CSS3.0에 포함되어 있음
Responsive web을 만들기 위해 사용
Device 크기를 읽어와 그 때마다 다른 CSS를 적용 가능

6. jQuery
Client Side Language
브라우저에서 작동
Dynamic Layout에 이용
Sample)
http://news.karts.ac.kr
1. main 상단 이미지 슬라이더
2. 불규칙한 크기의 div height
3. infinite scroll – scroll 내릴 시 컨텐트 추가 기능
4. 기타 등등 동적인 layout 변화에 관련 된 거의 모든 기

7. Wordpress
CMS(Contents Management System)의 일종
블로그 시스템에서 발전 - 2003년 블로그 시스템으로 처음 제
전세계 웹 사이트의 22.3%, 전세계 콘텐츠관리도구(CMS)의 60.1%를 점유
오픈소스: 누구나 소스를 수정하고 배포하는 것이 자유로움
장점: 다양한 기능, 많은 정보
단점: 구조의 크기에서 오는 속도 저하, 게시판 기능에 취약, 보안에 취

8. 수업 목표
HTML5의 기본적인 기능 이해
CSS의 기본적인 기능 이해
Wordpress를 이용한 테마 제작
jQuery plugin의 사용 (if
possible...)
개인 포트폴리오 홈페이지를 제작

9. IDE
개발은 메모장으로도 가능!
하지만 불편...
IDE: Integrated Development Environment
언어별 개발을 위한 다양한 툴 제공
Code hinting, grammar check, live view, etc
어떤 IDE를 선택해도 상관은 없음
Eclipse, webstorm, dreamweaver, cloud9, 나모 웹에디터, etc
IDE는 단지 도구일 뿐

10. Cloud 9
Cloud형 웹 개발용 IDE
Google 문서처럼 웹에 자료가 저장 → 물론 내려받기도 가능
지원 언어: Html5, css, django, ruby on rails, php5, etc
사용 이유
무료 - pricing이 있긴 하나 무료로도 충분
워드프레스 설치를 위한 중간 과정 생략
Apache2, php, mysql → local web server 구축 생략
코드의 공유가 편리 → menu → window → share → 끝!
단점
Local 기반 ide에 비해서 살짝 느림
인터넷이 안되면 작업 불가