트위터 부트스트랩으로 만드는 워드프레스 테마

윤가희 엮음 · 김덕기 저자(글)

위키북스 · 2015년 04월 20일

책 소개

부트스트랩은 웹사이트를 빠르게 디자인할 수 있는 웹디자인 프레임워크이다. [트위터 부트스트랩으로 만드는 워드프레스 테마]는 부트스트랩의 모든 것을 상세히 소개하는 것은 물론 부트스트랩을 이용해 워드프레스 테마와 다양한 콘텐츠를 만드는 방법을 소개한다.

작가정보

엮음 윤가희

저자(글) 김덕기

저자 김덕기는 금융기관 퇴직 후 평소 열망하던 웹디자인에 입문해 포토샵, CSS, 제이쿼리, 워드프레스 등 웹디자인 관련 지식을 블로그를 통해 공유하며 프리랜서 웹디자이너로 활동 중이다. 워드프레스 공식 한글 사이트의 편집자로 참여해 신속한 한글 버전의 발행을 하고 있으며, 워드프레스닷컴 한글 번역 리뷰어, 워드프레스닷오그 번역가(아이디 martian36) 및 밸리데이터(Validator)로서 워드프레스 한글 번역을 업데이트하고 필수 플러그인을 번역하고 있다. 티스토리 블로그(http://martian36.tistory.com)를 운영 중이며, 출간한 책으로 『워드프레스 완벽입문』 『트위터 부트스트랩』 『워드프레스 쇼핑몰 만들기』 『DIY! 워드프레스』 『DIY! 워드프레스 쇼핑몰』 『서브라임 텍스트』가 있다.

목차

• ▣ 01장: 부트스트랩 기초
  __부트스트랩이란?
  ____스타일시트의 재활용
  ____부트스트랩이 나타난 배경
  ____부트스트랩의 특징
  ____텍스트 편집기
  ____웹브라우저
  __웹서버 환경 만들기
  __부트스트랩 사용 환경 만들기
  ____부트스트랩 파일 내려받기
  __CSS
  ____그리드 시스템
  ____글자(Typography)
  ____테이블(table)
  ____폼(Forms)
  ____버튼(Buttons)
  ____이미지(Images)
  ____도움 클래스(Helper classes)
  ____반응형 선택자(Responsive utilities)
  __구성요소(Components)
  ____아이콘(Glyphicons)
  ____드롭다운
  ____버튼 그룹
  ____입력상자 그룹(Input groups)
  ____냅(Navs)
  ____냅바(Navbars)
  ____브레드크럼(Breadcrumb)
  ____페이지 처리(Pagination)
  ____레이블(Label)과 배지(Badge)
  ____점보트론(Jumbotron)
  ____페이지 헤더
  ____썸네일(Thumbnails)
  ____알림 메시지(Alerts)
  ____프로그레스 바(Progress Bar)
  ____미디어 오브젝트(Media Object)
  ____리스트 그룹(List group)
  ____패널(Panels)
  ____반응형 임베드(Responsive embed)
  ____웰(Wells)
  __자바스크립트
  ____모달(Modals)
  ____드롭다운
  ____스크롤스파이(Scrollspy)
  ____탭(Tabs)
  ____툴팁(Tooltips)
  ____팝오버(Popover)
  ____알림 메시지(Alert message)
  ____버튼
  ____체크박스와 라디오버튼
  ____콜랩스(Collapse)
  ____캐러젤(Carousel)
  ____어픽스(Affix)
  
  ▣ 02장: 워드프레스 테마 만들기
  __워드프레스 설치하기
  ____워드프레스 내려받기
  ____데이터베이스 만들기
  ____워드프레스 설치하기
  ____워드프레스 관리자 화면
  __워드프레스의 구조
  ____워드프레스의 콘텐츠
  ____워드프레스 설치 폴더의 내용
  ____워드프레스 템플릿 계층구조(Tamplate Hierarchy)
  ____템플릿 파일과 템플릿 태그
  ____워드프레스 템플릿 태그의 종류
  ____워드프레스 템플릿 태그
  ____워드프레스 기본 테마
  ____템플릿 파일의 연결 구조
  __테마 만들기
  ____테마 제작 내용
  ____자식 테마 만들기
  ____부트스트랩 관련 파일 등록하기
  ____레이아웃 만들기
  ____콘텐츠 추가하기
  ____작업 환경 만들기
  ____사이트 레이아웃 정리
  ____사이드바 수정
  ____content.php 파일 수정
  ____글 목록 페이지 레이아웃 변경 및 포스트 썸네일 다루기
  ____싱글 페이지 수정하기
  ____사이드바 있는 페이지 템플릿 만들기
  ____블로그 페이지 제목 만들기
  
  ▣ 03장: 다양한 콘텐츠 만들기
  __사용자 정의 글 타입(Custom Post Type)
  ____워드프레스 코덱스 페이지의 예제
  ____Custom Post Type UI 플러그인
  ____고급 사용자 정의 필드(Advanced Custom Fields) 플러그인 사용하기
  ____single-portfolio.php 파일 만들기
  ____Attachment 플러그인 사용하기
  ____라이트박스 플러그인 사용하기
  ____이미지 제목과 캡션 추가하기
  ____사이드바 배치하기
  ____포트폴리오 목록 페이지 만들기
  ____콘텐츠 레이아웃 만들기
  ____무한 스크롤 기능 추가하기
  ____브레드크럼과 옵션 프레임워크 사용하기
  __갤러리 페이지 만들기
  ____갤러리 이미지 만들기
  ____템플릿 파일 수정하기
  ____갤러리 글 만들기
  ____갤러리 페이지 만들기
  __슬라이더 글 타입 만들기
  ____single-slider.php 파일 만들기
  ____슬라이더 글 만들기
  __전면 페이지 만들기
  ____전면 페이지 헤더
  ____스타일 수정
  ____포트폴리오 코드 블록 추가
  ____갤러리 코드 블록 추가
  ____부트스트랩 스크롤 스파이 이용하기
  __팀원 글 타입 페이지 만들기
  ____팀원 페이지 만들기
  ____page-team.php 파일 만들기
  ____관리자 화면에서 페이지 만들기
  ____전면 페이지에 코드 블록 삽입하기
  __회사 소개 페이지 만들기
  ____page-about.php 템플릿 만들기
  ____전면 페이지 코드 블록 만들기
  ____웨이포인트와 애니메이션 스타일시트 사용하기
  __그리드 블로그 글 타입
  ____page-gridblog.php 템플릿 만들기
  ____블로그 글 타입 변경하기
  ____부트스트랩 모달 기능 추가하기
  ____전면 페이지에 코드 블록 추가하기
  __게시판 페이지 만들기
  ____page-board.php 템플릿 만들기
  ____게시판 싱글 페이지 수정하기
  ____템플릿으로 페이지 만들기
  ____템플릿 추가 수정
  ____content.php 템플릿 수정하기
  ____content-page.php 파일 수정하기
  ____게시판 추가 설정
  ____게시판 스타일 수정
  ____드롭다운 버튼 문제 해결 방법
  ____영어로 나타나는 문제 해결 방법
  
  ▣ 04장: 디테일
  __메뉴바 만들기
  ____로고 추가하기
  ____메뉴바 수정
  ____WP-Members 플러그인 사용하기
  ____WP-Members 관련 페이지 만들기
  ____탑메뉴 만들기
  ____이용약관 페이지 만들기
  __컨택트 페이지 만들기
  ____Contact Form 7 사용하기
  ____컨택트 폼 페이지 만들기
  __구글 맵 사용하기
  ____파일 내려받아 설치하기
  ____전면 페이지에 코드 블록 만들기
  __푸터 만들기
  ____두 번째 홈페이지 푸터
  ____전면 페이지 푸터
  ____사용자 정의 필드 만들기
  __콘텐츠 영역을 전체 너비로 사용하기
  ____갤러리 템플릿 수정
  ____와이드 갤러리 페이지 만들기
  __두 번째 홈페이지 만들기
  ____캐러젤 만들기
  ____캐러젤 글 만들기
  ____home-page.php 템플릿 만들기
  __스타일 정리

출판사 서평

부트스트랩! 웹 디자이너와 웹 개발자를 위한 웹 프레임워크

부트스트랩은 웹사이트를 빠르게 디자인할 수 있는 웹디자인 프레임워크이다. 트위터 개발자들이 만든 오픈소스 프로그램인 부트스트랩은 발표된 이후 깃허브에서 최고의 인기를 누리고 있으며 관련 프로젝트만 해도 수백 개에 이르고 계속 추가되고 있다. 웹사이트에 사용되는 모든 요소에 대해서 스타일시트가 미리 정해져 있으므로 어떤 스타일시트를 어떻게 만들어야 할지 고민할 필요없이 세부 조정을 위해 몇 줄의 사용자 스타일시트만 추가하면 된다.

이 책에서는 부트스트랩의 모든 것을 상세히 소개하는 것은 물론 부트스트랩을 이용해 워드프레스 테마와 다양한 콘텐츠를 만드는 방법을 소개한다. 부트스트랩을 이용해서 빠르게 웹사이트를 디자인하기를 원하거나 자신만의 워드프레스 테마를 만들려는 사람을 위한 좋은 선택이 될 것이다.

출판사 리뷰

◎ 쉽고 편리한 트위터 부트스트랩!
부트스트랩은 웹페이지에서 사용되는 모든 요소에 대해서 스타일시트를 만들어 놓았기 때문에 필요한 라이브러리를 찾아다닐 필요가 없습니다. 없으면 응용해서 사용할 수 있도록 스타일 변경도 자유롭습니다. 더구나 부트스트랩과 관련된 프로젝트가 아주 많이 있어서 다양한 프로젝트를 알고 있으면 웹사이트 제작에 많은 시간이 절약됩니다. 이러한 프로젝트는 수백 개에 이르고 대부분이 자바스크립트 플러그인화돼 있어서 스타일시트로 배치하고 옵션 설정만 하면 손쉽게 사용할 수 있습니다.

◎ 웹사이트 개발 속도를 몇 배로 단축
HTML에 선택자의 추가만으로 레이아웃을 만들 수 있습니다. 웹페이지에서 사용되는 모든 요소에 대해서 복잡한 구조의 스타일시트가 이미 만들어져 있으므로 선택자만 삽입하면 멋진 디자인이 간단하게 만들어집니다. 부트스트랩을 사용하면 빨라진 작업 속도를 실감할 수 있습니다. 디자이너는 자신만의 고유한 디자인만 구상하면 됩니다.

◎ 모바일은 기본! 부트스트랩 3.0은 모바일 우선 지원
부트스트랩을 이용하면 모바일 웹사이트를 쉽게 만들 수 있습니다. 부트스트랩 2.0은 모바일 지원을 위한 스타일시트를 선택적으로 사용할 수 있었지만 3.0은 모바일 우선 지원이며 데스크톱 모니터에서도 훌륭한 디자인이 됩니다.

기본정보

ISBN	9788998139957
발행(출시)일자	2015년 04월 20일
쪽수	504쪽
크기	188 * 240 * 23 mm
총권수	1권
시리즈명	위키북스 오픈소스 & 웹 시리즈