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에 대해서 잘 알아도 난감한 상황을 마주치게 됩니다. 어딘가 한곳에서 설정을..
개인용 상업용 무료입니다.
개인용 무료입니다.
개인용 상업용 무료입니다.
개인용 무료입니다.
개인용 무료입니다. Note of the authorNOTE: This font is for PERSONAL USE ONLY! To purchase a commercial license, visit: http://www.mawns.com/fonts.html?font=brother-tattoo For questions or proposals, feel very free to mail info@mawns.com Visit my website: http://www.mawns.com Like my fonts on Facebook: http://www.facebook.com/mawnsfonts First seen on DaFont: 08-27-2012
포럼 만들기 비비프레스의 포럼은 사용하기에 따라서 여러가지 용도를 정할 수 있습니다. 원래의 취지대로 토론을 위해 포럼을 만들 수 있지만 웹사이트의 게시판으로 사용할 수 있습니다. 블로그가 아닌 웹사이트라면 방문자가 문의사항에 대한 글을 쓸 수 있는 곳이 필요합니다. QNA용도로 쓸수도 있고 자유게시판으로 사용할 수도 있습니다. 여기서는 자유게시판을 만들어 보겠습니다. 비비프레스의 포럼은 실제 글을 쓰기 위한 공간을 의미하며 블로그의 페이지와 같은 역할을 합니다. 주메뉴에서 포럼새 포럼을 선택하면 포럼을 만들 수 있는 화면이 나타납니다. 일반 글 쓰기 화면과 같은 형태지만 옵션이 많이 다릅니다. 형식에서 포럼과 카테고리를 선택할 수 있는데 카테고리는 포럼을 카테고리 형태로 분류하기 위한 것이고 실제 포..
5-14 비비프레스(bbPress) 워드프레스가 탄생하기 이전에는 대부분의 프로그램이 게시판 형태였습니다. 게시판을 영어로 Bulletin Board라고 하는데 이 당시에 php로 개발된 프로그램의 이름들이 B가 들어가는 것이 많습니다. 확인되지는 않았지만 워드프레스의 전신인 b2/cafelog의 b도 이것을 의미하리다 생각됩니다. 그러니 워드프레스도 그 시작은 게시판이라고 할 수 있습니다. 게시판은 어떤 의견을 제시하고 그 의견에 대해 토론하는 것이 기본구조이며 토론을 위해서는 댓글이 기본적으로 가능해야합니다. 블로그는 댓글을 달지 못하도록 설정할 수 있지만 게시판에서 댓글을 못달면 게시판이라고 할 수가 없죠. 비비프레스는 게시판에서 한걸음 나아가 포럼이라는 개념으로 발전했습니다. 우리나라에서 포럼문화..
개인용 무료입니다. Note of the authorS'il vous plaît faire un don pour un usage commercial. Merci! Please donate for commercial use. Thanks ! --- > For the complete version: http://www.cloutierfontes.ca/CloutierFontes/Fabrics.html First seen on DaFont: 07-15-2012
개인용 무료입니다.
개인용 무료입니다.