다음은 몇개월 후 발행될 책 내용의 일부입니다. 1. 부트스트랩 파일 내려받기 http://twitter.github.com/bootstrap/ 위 링크로 이동하면 트위터 부트스트랩 홈페이지가 나타납니다. 부트스트랩 파일을 내려받는 방법은 3가지가 있습니다. 우선 기본적인 파일을 내려받으려면 파란색의 “Download Bootstrap” 버튼을 클릭하고, 부트스트랩 관련 전체 파일을 내려받으려면 “GitHub project” 링크를 클릭해서 페이지를 이동한 후, zip 파일을 내려받으면 됩니다. 마지막 방법은 메뉴 상단의 Customize 링크를 클릭해서 원하지 않는 부분을 제거하고 내려받는 방법입니다. 이 책에서는 아이콘의 활용도가 높은 Font Awesome 폰트 아이콘을 사용할 것이므로 Custom..
5-4 부트스트랩으로 레이아웃 만들기 5-4-1 워드프레스 기본 테마(Twenty Eleven)의 HTML 구조 기존의 레이아웃에 부트스트랩으로 레이아웃을 만들려면 다음과 같이 .container, .row, .span+숫자의 순서로 클래스 선택자를 div태그에 넣어줘야합니다. span 다음의 숫자는 컬럼 수를 의미합니다. content 부트스트랩은 총 12개의 컬럼을 사용하는데 사이드바를 사용하지 않고 전체를 12컬럼으로 사용하고자 하면 span12가 되고 사이드바를 사용하면 콘텐트 영역은 span8로 사이드바는 span4로 해줍니다. content aside 그러므로 첫번째 레이아웃은 header.php와 footer.php에 적용하고 두번째 레이아웃은 content.php와 sidebar.php에 ..
5-3-3 자바스트립트와 스타일시트 파일 붙여넣기 Font Awesome의 폰트 아이콘과 트위터 부트스트랩을 사용할 것이므로 관련 파일을 자식테마 폴더에 복사해 붙여넣습니다. 우선 Font Awesome의 관련 파일이 있는 폴더인 assets 폴더를 복사하여 붙여넣습니다. 부트스트랩 파일을 두번 내려받았는데 두번째 방법으로 내려받은 파일중 bootstrap.css를 assets/css 폴더에 붙여넣고 bootstrap.js파일은 js폴더에 붙여넣습니다. 그러면 다음과 같이 됩니다. 사용자 정의해서 내려받은 bootstrap.css 파일에는 bootstrap-responsive.css의 파일 내용이 포함돼 있습니다. 폴더 안에서 지금 붙여 넣은 폴더 안에서 파일 외에는 사용하지 않으니 삭제하거나 무시해도 ..
5-3 자식 테마(Child Theme) 폴더 만들기 워드프레스 테마 만드는 방법은 여러가지 있지만 몇가지 예를 들면 아레 목록과 같습니다. 이번장 에서는 두번째 방법을 사용합니다. 워드프레스의 기본테마인 Twenty Eleven에는 이미 기능이 많이 있고 잘 만들어진 테마입니다. 나름대로 수정해서 사용할 것을 예상하고 만든 것이라서 단순해보이지만 여러가지 기능이 내장된 고급 테마에 속합니다. 그래서 이 테마에 자식테마를 만들어 수정할 것입니다. 두번째 방법과 세번째 방법의 차이는 스타일시트와 함수파일에 있습니다. 자식테마를 만들고 난 다음 두개의 파일만 수정하면 단독의 테마가 될 수 있습니다. 네번째 방법은 스타일시트를 직접 다루는 것이 아니라 관리자 화면에서 여러가지 설정을 해서 테마를 만듭니다. 부..
5-1-3 트위터 부트스트랩의 개요 각 파일의 내용에 대해서 간단히 알아보겠습니다. Index.html 파일을 열면 부트스트랩의 간단한 소개와 하단에 이 부트스트랩으로 만든 사이트가 나옵니다. 나머지 파일들은 index.html페이지의 상단에서 메뉴를 클릭하면 나타납니다. Get Started 메뉴를 클릭하면 부트스트랩의 파일 구조에 대해 나오고 시작하는 방법, 파일에 포함된 내용에 대해 설명하고 있습니다. Scaffolding 메뉴에는 그리드 시스템, 레이아웃, 반응형 디자인에 대해 설명하고 있습니다. Base CSS를 클릭하면 글자 표현 방법, 테이블, 폼, 버튼 만드는 방법, 이미지, 아이콘 삽입하는 방법에 대해 설명합니다. Componets를 클릭하면 드랍다운 메뉴, 버튼 그룹, 내비게이션 메뉴,..
안녕하세요. 베누시안입니다. 워드프레스 책이 5장까지 완성되고 이제 부록 부분만 남았습니다. 5장은 워드프레스의 기본 테마인 Twenty Eleven을 트위터 부트스트랩으로 모바일 겸용 블로그를 만드는 과정입니다. 데모 블로그에서 확인 가능합니다. 5장의 일부분을 티스토리에 올리고 있습니다. 워드프레스 플러그인 팩인 Jetpack을 한글로 번역 중인데 조만간 한글 파일과 함께 사용법을 올리도록 하겠습니다. 워드프레스 플러그인 중에서 아주 인기 높습니다. 한글화하면 사용하는데 지장이 없을겁니다. 5-1. 트위터 부트스트랩 5-1-1 트위터 부트스트랩의 특징 CSS는 단순한 프로그래밍 언어지만 상황에 따라서 변화무쌍하여 아무리 CSS에 대해서 잘 알아도 난감한 상황을 마주치게 됩니다. 어딘가 한곳에서 설정을..