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에 비해서 살짝 느림 인터넷이 안되면 작업 불가