작성일자
카테고리 부트스트랩/부트스트랩으로 디자인하기

책 제목 : 트위터 부트스트랩 - 디자이너도 놀라워 할 매끈하고 직관적인 웹 사이트 디자인의 비밀(432페이지, PDF 포함 504페이지)

영문 제목 : Twitter Bootstrap for Web Development


2013. 3.29일 인쇄 완료되어 선정된 분들에게 오늘 날짜로 발송됩니다. 늦어도 다음 주 월요일에는 받아보실 수 있습니다.





트위터 부트스트랩 책 출간 기념으로 이벤트를 진행합니다. 이 책이 CSS와 HTML을 다룰 줄 아는 분을 기준으로 만들어졌기 때문에 어느정도 웹 디자인 지식이 있어야 따라하실 수 있습니다.


대상 : 웹디자이너, 웹 개발자, 및 CSS로 웹사이트를 스스로 만들 줄 아시는 분을 기준으로 네이버, 티스토리, 다음, 각 포털 사이트 블로거를 배분하여 10명을 선정합니다. 


조건 : 책 읽으신 후 리뷰 작성하기


기간 : 3월 31일까지(종료)


관심 있으신 분은 댓글에 자신의 블로그 URL을 입력해주세요. 추후 선정되시면 택배 배송을 위해 성함, 주소, 전화번호를 제게 알려주셔야 합니다. 


책의 자세한 내용은 관련 글을 참고하세요.


트위터 부트스트랩 책 출간 확정 - http://martian36.tistory.com/1163


트위터 부트스트랩 책 출간 예정 - http://martian36.tistory.com/1146





<책 소개 >


이 책은 4부분으로 나뉜다.


1장에서는 부트스트랩을 다루기 위한 기초 단계로 부트스트랩의 전체 내용에 대해 설명하고 있다. 일반 웹사이트 및 모바일 웹사이트를 제작하기 위해서 부트스트랩의 모든 기능을 설명한다. 부트스트랩은 스타일시트와 자바스크립트 라이브러리로서 웹페이지에 사용되는 모든 요소에 대해 미리 스타일시트를 만들어 놓고 있으므로 HTML에 선택자만 삽입해도 멋지게 웹페이지가 완성된다. 


2장은 부트스트랩의 스타일시트를 조직적이고 체계적으로 만드는데 사용된 Less Preprocessor를 다룬다. 스타일시트를 작성하다보면 중복되는 선택자나 속성이 많이 사용되는데 Less와 같은 프리프로세서를 사용하면 이러한 불필요한 코드의 반복을 대폭 줄일 수 있다. 


3장은 부트스트랩 기초 부분에서 다룬 내용을 기준으로 실제 웹사이트를 만드는 과정이다. 바로 사용할 수 있는 웹페이지를 만들 수 있는 완성단계까지 상세히 설명한다. 초기화면, 갤러리 페이지, 이벤트 페이지, 상품 페이지, 계정 설정 페이지, 블로그 페이지 등 웹사이트에서 사용되는 대표적인 페이지를 부트스트랩 관련 플러그인 뿐만 아니라 외부 자바스크립트 플러그인을 이용해서 웹페이지를 만드는 실정 과정이다. 갤러리 페이지 만들기를 응용하면 요즘 인기있는 웹페이지 레이아웃인 핀터레스트와 같은 웹페이지를 만들 수 있다. 특히 사용자 정의 스타일시트로 부트스트랩의 미디어쿼리를 이용해서 다양한 레이아웃을 변경할 수 있는 방법도 소개한다. 모바일 웹사이트는 기본적으로 만들어진다.


4장은 부트스트랩 3.0 버전을 다룬다. 부트스트랩 2.0은 모바일 겸용이지만 3.0 버전은 현재 개발 중에 있고 모바일 우선지원을 기반으로 하고 있다. 2.0과의 차이점과 3장에서 만든 웹사이트 디자인을 3.0 버전으로 수정하는 방법을 설명하고 있다.



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


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


웹사이트 개발 속도를 몇배로 단축


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


모바일은 기본! 부트스트랩 3.0은 모바일 우선 지원.


부트스트랩을 이용하면 모바일 웹사이트를 쉽게 만들 수 있습니다. 부트스트랩 2.0은 모바일 지원을 위한 스타일시트를 선택적으로 사용할 수 있었지만 3.0은 모바일 우선 지원입니다. 모바일 기기에 적합한 디자인을 만들기위해 현재 개발 중에 있으며 데트스탑 모니터에서도 훌륭한 디자인이 됩니다. 이 책에서는 부트스트랩 3.0 버전도 다루고 있습니다(PDF로 제공).



저작자 표시 비영리 변경 금지
신고
이전 댓글 더보기
BlogIcon 메리앤

드뎌 출간이 되었군요.
진심 축하드립니다. 기대가 되네요. ^^;
오늘도 의미있는 하루 되시기 바랍니다. :0

BlogIcon 베누시안

안녕하세요. 반갑습니다. 네 드디어 출간됩니다. 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

네 메리앤님은 제게 배정된 책 중에서 보내드리는 것이니 별도로 이벤트 참여하지 않으셔도 됩니다. 책이 나오는대로 출판사에서 바로 보내드리겠습니다. 감사합니다.

BlogIcon 메리앤

감사합니다. ^^;
기대와 동기부여가 많이 됩니다.
아무튼 출판에 대해 좋은 결과 있으시기 바랍니다~. :)

BlogIcon 윈컴이

책 출간 축하드립니다 :)

BlogIcon 베누시안

네 감사합니다.

BlogIcon 안형우

http://mytory.net 입니다. ^^

BlogIcon 베누시안

응모해주셔서 감사합니다.

cshock

부트스트랩 사용중인데 정리가 한번 필요했었는데 감사합니다. ^^ 예약할려구요.. 4월5일쯤 나오는거 맞죠?

BlogIcon 베누시안

그제부터 인쇄에 들어갔는데 더 빨리 나올 수도 있습니다. 최대한 길게 잡은 것이 4월 5일이거든요. 빠르면 이달 29일에도 나올 수 있습니다. 예약하시면 서점에 배송되는 대로 택배로 배달 될 겁니다. 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

어떤 폰트를 의미하시는가요? 해당 스킨에 저작권 침해할 폰트를 사용한 적이 없는데요. 모빌리스 웹폰트라면 개인 블로그에 사용할 경우 전혀 문제되지 않습니다.

비밀댓글입니다

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 응모해주셔서 감사합니다.

비밀댓글입니다

비밀댓글입니다

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 블로그 운영자를 기본으로 하고 있는데 신청자가 많지 않을 경우 선정될 수도 있습니다. 선정될 경우 인터넷 서점에서 리뷰를 올리시면 됩니다. 관심을 가져주셔서 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 응모해주셔서 감사합니다. 책을 보내드릴 예정이니 현균님의 성함, 주소, 전번을 비밀 글로 남겨주세요.
답변이 없어서 선정이 취소됐습니다.

비밀댓글입니다

BlogIcon 베누시안

안녕하세요. 응모해주셔서 감사합니다. 성함, 전번, 주소를 비밀글로 남겨주세요.

비밀댓글입니다

비밀댓글입니다

BlogIcon 베누시안

좋은 의견 부탁드립니다. 감사합니다.

비밀댓글입니다

이준석

홈페이지를 3건이나 맡아놨는데 부트스트랩이 필요합니다. ^^;
빨리 해달라고 하는데 신선한 부트스트랩으로 코딩해보려고 합니다.
마음은 급한데 4월이나 되야 책이 나온다고 하는데..
어떻게 책을 빨리 읽을 수 있는 방법이 없을까요?

BlogIcon 베누시안

내일이면 나올 예정이고 모래면 서점에 배포될 예정입니다. 웹디자인 많이 해보신 분이라면 며칠만 책을 보면 바로 사용할 수 있습니다.

비밀댓글입니다

BlogIcon 베누시안

어제 다 발송했는데요. 출판사에 요청은 해놨는데 어떨지 모르겠네요.

비밀댓글입니다

BlogIcon 베누시안

이메일 받았는데 월요일에 보내드린다고 합니다. 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

감사합니다. 좋은 의견 부탁드립니다.

BlogIcon 현균

책이 잘 도착했다고 합니다. 한국도착하면 ,열심히 리뷰할께요!~:) 정말 감사드려요!

BlogIcon 베누시안

다행이군요. 부트스트랩에 관심이 아주 많으신가 봅니다. 책이 도움이 되기를 바랍니다.

BlogIcon 현균

스타트업쪽 준비를 좀 했었는데, 개발 능력을 조금이라도 갖추고 있는게 도움되더라구요. 프론트엔드라도 좀 열심히 해야겠다는 생각에 시간날때마다 공부 조금씩 하고 있어요!~:)

BlogIcon 베누시안

웹 개발하시는 분들이 부트스트랩을 알게되면 웹디자이너가 필요없개될겁니다.

비밀댓글입니다

BlogIcon 베누시안

감사합니다. 책이 도움이 되길 바랍니다.

JH

http://book.naver.com/bookdb/book_detail.nhn?bid=7029871

음..일단 간략하게 네이버 북이랑 제 블로그에 리뷰를 남겼구요.

책 독파후 자세한 리뷰 또 남길게욤. (알라딘,yes24에도 남겼습니다.)

BlogIcon 베누시안

좋게 봐주셔서 감사합니다.

비밀댓글입니다

BlogIcon 베누시안

좋은 의견 부탁드립니다. 감사합니다.

vivid

책내용에 대한 질문을 여기에 하면 되나요?
책 내용에 나온 2.3 버전으로 따라해보고 있습니다.

1. 그리드 span 에 margin-left:30px 기본 적용되어 있어서 여백이 항상 존재하는데
이 여백을 줄이거나 없애고 싶은데 어떻게 해야할까요.

2. 그리드 레이아웃시 항상 12로 맞춰야 하는거로 알는데
예를 들어 콘텐츠 영역과 우측 사이드 영역을 나눌때
4:4:4 는 우측 영역이 너무 넓고
5:5:2 는 우측 영역이 너무 좁은 경우 어떻게 레이아웃을 짜야할까요?
4.5 : 4.5: 3 정도가 가능하다면 좋겠는데 소숫점은 안되더군요.

3. 상단 navbar 디자인의 height 값을 줄일 수 있을까요?

4. 전체적으로 각을 맞추고 여백이 적은 한국형 디자인 방식과 이질적인 디자인 형태가
나오는 것 같은데 이런 부분들은 쉽게 수정가능한건지 아니면 그냥 기존 부트스트랩 디자인을
따를 수밖에 없는건지요.












BlogIcon 베누시안

안녕하세요. 질문과 답변을 취합해서 다른 분들도 검색이 쉽도록 사이트를 만들어 운영하고 있습니다.

diywordpress.kr

위 사이트에서 트위터 부트스트랩 그룹에 가입하시고 위 질문 내용을 그대로 복사해 게시글을 만들어주세요. 번거롭게 해드려 죄송합니다.

vivid

별도 사이트에 가입을 해야만 답변을 받을 수 있다는 게 조금은 당황스럽네요. 블로그 검색이 안 되는 것도 아닐테고 이 블로그에 부트스트랩 내용이 사라진 것도 아닌데 검색 편의라는 이유가 이해하기 어렵고, 책 내용과 관계 없는 워드프레스가 주가 되는 사이트, 그것도 반드시 가입을 해야만 질문이 가능한 이유는 더욱 이해하기 힘드네요. 제 질문에 답변은 안 해주셔도 됩니다만 검색 편의 등 별도의 공간으로 옮길 저자만의 이유가 있다면 우선 답변을 하신 이후 질문자에게 가입을 권유하고, 해당 질답 정보는 저자 본인이 직접 옮기시는 게 좋을 듯 싶습니다.

BlogIcon 베누시안

질문과 답변은 검색이 안돼서 같은 질문을 하는 방문자들이 불편합니다. 그래서 다른 사이트에서 이를 편하게 이용하도록 하는 독자들의 편의를 위해 그런 것이고요. 답변을 드리는 것은 독자들의 편의를 위해서인데 그런 것도 안하신다면 저는 답변을 드릴 의향이 없습니다. 저자 본인이 옮기라는 것은 상당히 불쾌한 내용이네요.

vivid

질문을 저자 본인이 옮기라는 권유가 불쾌하신가요.
그렇다면 질문에 대한 답변을 조건으로 타 사이트 가입 및 질문까지 옮겨야 하는 독자의 불쾌감은 더욱 잘 아시겠네요.

책 내용에 질답은 이 곳 블로그에 하라고 되어 있더군요.
무슨 이유든 간에 독자에게 질문하라는 공간에 질문을 했으면 우선 답변을 해주는 게 상식 입니다.
컨텐츠 확보나 타인의 편의보다 먼저 고려되여야 할 것은 해당 독자의 질문 그 자체 입니다.
독자가 자신의 의문 해결 외에 해당 질문이 컨텐츠로서 타인에게 편리하게 이용되도록까지
고려 해야할 의무가 있나요?
그 것도 책 내용과 직접적 연관도 없는 별도의 공간에 가입까지 해가면서요?
그렇다면 이메일이나 개인적 비밀 글로는 아예 질문 조차 받으실 의향이 없으신가 보군요.
사실 저 역시 매우 불쾌했으나 최대한 예의를 갖춰 답글을 달았던 것인데 오히려 불쾌감을
드러내시니 연속으로 당황스럽네요.

티스토리 툴바