s1.part.2.워드프레스 테마 시작하기
DESCRIPTION
워드캠프 서울 2010 세션 1 - 파트 2 조훈 (후니)TRANSCRIPT
![Page 2: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/2.jpg)
소개: hooney
![Page 3: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/3.jpg)
서비스형 블로그의 한계
• 제약: 구조, 디자인, 기능
• 의존: 서비스 제공 업체
![Page 4: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/4.jpg)
설치형 블로그의 아름다움
• 내 마음대로 만드는 나만의 터전
![Page 5: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/5.jpg)
워드프레스 테마 기행
• 서비스형 블로그(웹 사이트)
• 설치형 블로그
• 무료(유료) 테마
• 나만의 테마
![Page 6: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/6.jpg)
나만의 테마 기행
• 기본(무료) 테마를 이용한 블로그 운영
• 컨텐츠, 이용자 증가
• 인덱싱, 리스팅 등 기능 필요
• 기능, 디자인 하나씩 추가
• 나만의 테마 완성
![Page 7: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/7.jpg)
워드프레스 테마 구성요소
• 콘텐츠, 디자인
• 클라이언트/프론트엔드 웹 기술
– HTML, CSS, JS
• 워드프레스 템플릿 파일, 태그, 루프
![Page 8: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/8.jpg)
콘텐츠 먼저? 디자인 먼저?
![Page 9: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/9.jpg)
목적에 맞는 프로세스 선택
![Page 10: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/10.jpg)
워드 프레스 기본 테마
![Page 11: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/11.jpg)
워드프레스 무료 테마
![Page 12: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/12.jpg)
워드프레스 유료 테마
![Page 13: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/13.jpg)
영감을 주는 사이트
![Page 14: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/14.jpg)
WSJ magazine
![Page 15: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/15.jpg)
The New York Times Blogs
![Page 16: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/16.jpg)
영국 수상 공식 사이트
![Page 17: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/17.jpg)
vancouver convention centre.
![Page 18: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/18.jpg)
클라이언트 웹 기술
• 구조, 표현, 동작 분리
– 구조: HTML
– 표현: CSS
– 동작: JS + DOM
• 프레임워크
• 모듈 베이스 디자인
![Page 19: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/19.jpg)
Kubrick
![Page 20: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/20.jpg)
Twenty Ten
![Page 21: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/21.jpg)
테마 프레임워크
![Page 22: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/22.jpg)
CSS
• HTML을 꾸미는 역할
– 레이아웃
– 박스모델
– 타이포그라피
– 컬러
– 배경(이미지)
![Page 23: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/23.jpg)
CSS Zen Garden
![Page 24: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/24.jpg)
CSS Zen Garden
![Page 25: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/25.jpg)
CSS Zen Garden
![Page 26: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/26.jpg)
CSS Zen Garden
![Page 27: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/27.jpg)
CSS Zen Garden
![Page 28: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/28.jpg)
JavaScript
• 동작, 움직임을 부여하는 역할
– 2단 네비게이션, 탭 네비게이션
– 사용자 인터렉션
– Ajax
• JS 라이브러리
– JQuery
![Page 29: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/29.jpg)
http://jquery.com
![Page 30: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/30.jpg)
jquery api
![Page 31: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/31.jpg)
워드 프레스 템플릿 파일
![Page 32: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/32.jpg)
워드프레스 템플릿 태그
![Page 33: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/33.jpg)
워드프레스 루프
![Page 34: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/34.jpg)
![Page 35: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/35.jpg)
header.php
home.php sidebar.php
search.php
![Page 36: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/36.jpg)
category.php sidebar.php
![Page 37: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/37.jpg)
최글 글 목록: 제목 + 내용요약 + 기타..
![Page 38: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/38.jpg)
<?php while ( have_posts() ) : the_post(); ?>
<?php the_post_thumbnail(); ?>
<?php the_title(); ?>
<?php the_content(); ?>
<?php comments_number(); ?>
<?php the_category(','); ?>
<?php the_author(); ?>
<?php endwhile; } else { ?>
sidebar.php
![Page 39: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/39.jpg)
single.php
![Page 40: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/40.jpg)
comments.php
comments list
comments form
댓글 템플릿 파일: 댓글 목록 + 댓글 입력양식
![Page 41: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/41.jpg)
어떤 테마를 만들 것인가?
![Page 42: S1.part.2.워드프레스 테마 시작하기](https://reader033.vdocuments.net/reader033/viewer/2022050920/54c450e14a7959ce118b457e/html5/thumbnails/42.jpg)
누가 어떻게 테마를 만들 것인가?