공식 문서로 배우는 부트스트랩

온개발팀 지음

온노트 2024년 09월 26일 출간

작품소개

책소개

반응형 모바일 우선 웹사이트를 구축하기 위한 세계에서 가장 인기 있는 프런트엔드 프레임워크를 이해하고 마스터하기 위한 종합 가이드인 '공식 문서로 배우는 부트스트랩'에 오신 것을 환영합니다. 이 책은 부트스트랩의 기초부터 고급 기술까지 다루며, 현대적이고 효율적이며 시각적으로 매력적인 웹 애플리케이션을 구축하는 데 필요한 지식을 제공합니다. 초보자이든 숙련된 개발자이든 이 책은 부트스트랩의 강력한 기능을 최대한 활용할 수 있도록 설계되었습니다.

1장, '시작하기'에서는 프레임워크를 설정하고 구성하는 데 필요한 필수 사항을 안내하여 부트스트랩을 소개합니다. 부트스트랩을 다운로드하고, 파일 내용을 탐색하고, 다양한 브라우저와 기기에서 부트스트랩이 어떻게 작동하는지 이해하는 방법을 배웁니다. JavaScript 통합, Webpack 및 Parcel과 같은 빌드 도구 작업, 접근성 보장, RTL 기능 사용 등의 주제를 다루며 부트스트랩 여정을 위한 포괄적인 기초를 제공합니다.

2장, '사용자 지정'에서는 부트스트랩에서 사용할 수 있는 사용자 지정 옵션에 대해 자세히 알아봅니다. 이 장에서는 Sass를 사용하여 부트스트랩 스타일을 사용자 정의하고, 색 구성표, 컴포넌트 및 CSS 변수를 조정하고, 성능을 위해 프로젝트를 최적화하는 방법을 다룹니다. 디자인 요구 사항에 더 잘 맞도록 부트스트랩의 핵심을 개인화하는 방법을 배웁니다.

3장, '레이아웃'에서는 부트스트랩의 유연한 그리드 시스템으로 웹 페이지를 구조화하는 방법을 알아봅니다. 컨테이너, 중단점, 열, 거터 및 유틸리티로 작업하여 다양한 화면 크기에 맞게 매끄럽게 조정되는 반응형 레이아웃을 만드는 방법을 알아보세요. 이 장에서는 고급 레이아웃을 위한 CSS 그리드 사용법에 대해서도 살펴봅니다.

4장, '콘텐츠'에서는 사이트의 핵심 요소 스타일링에 중점을 둡니다. 부트스트랩의 사전 구축 클래스를 사용하여 타이포그래피, 이미지, 표, 그림의 스타일을 지정하여 콘텐츠를 깔끔하고 전문적인 방식으로 표시하는 방법을 배웁니다.

5장, '폼'에서는 부트스트랩의 폼 구성 요소를 소개합니다. 기본 폼 컨트롤부터 유효성 검사, 부동 레이블, 레이아웃 사용자 지정과 같은 고급 기능까지, 이 장에서는 웹 애플리케이션을 위한 우아하고 사용자 친화적인 폼을 만드는 데 필요한 모든 것을 다룹니다.

6장, '컴포넌트'에서는 재사용 가능한 부트스트랩의 풍부한 UI 컴포넌트 라이브러리를 심층적으로 살펴봅니다. 아코디언, 알림, 버튼, 캐러셀, 드롭다운, 모달, 탐색 모음, 툴팁 등의 기능을 구현하는 방법을 배웁니다. 각 컴포넌트는 쉽게 통합하고 사용자 정의할 수 있도록 설계되어 다양한 사용 사례를 위한 다용도성을 제공합니다.

7장, '헬퍼'에서는 플로트 지우기, 텍스트 잘림 처리, 요소 위치 관리와 같은 일반적인 작업을 간소화하도록 설계된 유틸리티 클래스 세트를 소개합니다. 이러한 헬퍼 클래스는 사용자 정의 CSS를 작성하지 않고도 빠르게 변경할 수 있는 경량 솔루션을 제공합니다.

8장, '유틸리티'에서는 부트스트랩의 유틸리티 클래스로 스타일링을 제어할 수 있습니다. 이 장에서는 배경색, 테두리, 표시 설정, 플렉스박스, 텍스트 정렬, 간격, 가시성 등을 위한 유틸리티를 다룹니다. 이러한 유틸리티를 활용하여 추가 CSS 없이도 요소의 스타일을 빠르게 지정하는 방법을 배웁니다.

이 책을 마치면 이 프레임워크를 효과적으로 사용하여 반응형 최신 웹 애플리케이션을 구축하는 방법을 확실히 이해할 수 있습니다. 이 책은 설정 및 사용자 지정부터 구성 요소 및 유틸리티 사용에 이르기까지 모든 것을 다루며 고품질의 반응형 웹사이트를 쉽게 만들 수 있는 도구를 제공합니다.

부트스트랩를 처음 경험하시는 분이거나 오리지널 공식 문서를 무난히 해석하실 수 있는 분에게는 이 책을 추천드리지 않습니다.

목차

1장 : 시작하기
___1. 소개
___2. 다운로드
___3. 내용
___4. 브라우저 및 기기
___5. JavaScript
___6. Webpack
___7. Parcel
___8. 접근성
___9. RFS
___10. RTL
___11. 기여
2장 : 사용자 정의
___1. 개요
___2. Sass
___3. 옵션
___4. 색상
___5. 구성 요소
___6. CSS 변수
___7. 최적화
3장 : 레이아웃
___1. 중단점
___2. 컨테이너
___3. 그리드
___4. 열
___5. 거터
___6. 유틸리티
___7. Z-인덱스
___8. CSS 그리드
4장 : 콘텐츠
___1. 리부트
___2. 타이포그래피
___3. 이미지
___4. 표
___5. 그림
5장 : 폼
___1. 개요
___2. 폼 컨트롤
___3. 선택
___4. 체크 및 라디오
___5. 범위
___6. 입력 그룹
___7. 플로팅 레이블
___8. 레이아웃
___9. 검증
6장 : 구성 요소
___1. 아코디언
___2. 알림
___3. 배지
___4. 브레드크럼
___5. 버튼
___6. 버튼 그룹
___7. 카드
___8. 캐러셀
___9. 닫기 버튼
___10. 콜랩스
___11. 드롭다운
___12. 리스트 그룹
___13. 모달
___14. 탐색 및 탭
___15. 탐색바
___16. 오프캔버스
___17. 페이지 매김
___18. 자리 표시자
___19. 팝오버
___20. 프로그레스
___21. 스크롤스파이
___22. 스피너
___23. 토스트
___24. 툴팁
7장 : 도우미
___1. 클리어픽스
___2. 색상 링크
___3. 비율
___4. 위치
___5. 스택
___6. 시각적으로 숨김
___7. 늘어진 링크
___8. 텍스트 잘림
___9. 수직 규칙
8장 : 유틸리티
___1. API
___2. 배경
___3. 테두리
___4. 색상
___5. 디스플레이
___6. 플렉스
___7. 플로트
___8. 상호 작용
___9. 불투명도
___10. 오버플로우
___11. 위치
___12. 그림자
___13. 크기 조정
___14. 간격
___15. 텍스트
___16. 수직 정렬
___17. 가시성

작가정보

저자(글) 온개발팀

세상에 필요한 솔루션을 개발하기 위해 다양한 프로그래밍을 활용하고 있습니다.