Bootstrap Code Play

Bootstrap Code Play를 통해 반응형 웹 디자인을 배우고, 직접 코드를 수정하고 미리 볼 수 있습니다. 설명, 예제 코드, 그리고 실습 환경을 제공하여 마크업 변경이 페이지에 어떤 영향을 미치는지 쉽게 파악할 수 있도록 도와줍니다.

읽고, 변경하고, 미리 보기

원하는 주제를 선택하고, 작동 방식을 읽어본 후, '직접 해보기'를 탭하여 에디터에서 예제를 열어보세요. 클래스를 변경하거나, 콘텐츠를 수정하거나, 요소를 추가해 보세요. '미리 보기'를 열어 결과를 확인한 후, '코드'로 돌아가 다른 실험을 진행해 보세요.

기본 구성 요소 학습

반응형 그리드, 타이포그래피, 버튼, 알림, 테이블, 폼을 연습해 보세요. 관련 학습 트랙에서 카드, 내비게이션 바, 아코디언, 다이얼로그와 같은 구성 요소를 살펴보세요. 단계별 학습, 과제, 일반적인 오류 해결 방법을 통해 코드를 단순히 복사하는 것이 아니라 이해할 수 있도록 구성되어 있습니다. 프로젝트 학습에서는 가격 정보 섹션, 간소화된 대시보드와 같은 예제를 통해 개념을 통합적으로 다룹니다.

학습 트랙 선택

Bootstrap 5.3.8 트랙을 학습하거나, 이전 버전 프로젝트를 위해 Bootstrap 4.6.2 및 3.4.1 트랙을 탐색해 보세요. 이전 버전 트랙은 지원이 종료되었으며 학습 및 마이그레이션 목적으로 제공됩니다. 별도의 Bootstrap 6 알파 트랙은 실험적인 버전이며, 미리보기를 위해서는 인터넷 연결과 최신 WebView가 필요합니다.

연습 계속하기

주제를 검색하거나 카테고리별로 찾아보세요. 각 버전별 완료 횟수를 확인하고 레슨을 완료로 표시할 수 있습니다. 플레이그라운드를 열어 직접 HTML 실험을 하고, 파일을 저장한 후 '저장된 파일'을 통해 다시 불러올 수 있습니다.

유용한 도구로 편집하기

예제를 작업하는 동안 구문 강조 표시, 실행 취소/다시 실행, 찾기/바꾸기, 특정 줄로 이동 기능을 활용하세요. '다른 이름으로 저장'을 선택하면 별도의 사본이 저장되고, '코드 공유'를 선택하면 편집기 텍스트를 사용 가능한 공유 옵션을 통해 전송할 수 있습니다.

학생, 자기 주도 학습자, 반응형 레이아웃을 다시 살펴보는 개발자를 위해 이 앱은 실용적인 학습 과정을 제공합니다. 설명을 읽고, 작은 변경 사항을 적용한 후, 결과를 확인해 보세요.

이 앱에는 광고가 포함되어 있습니다. 외부 리소스를 참조하는 예제를 보려면 인터넷 연결이 필요하며, 원격 리소스의 가용성은 상황에 따라 다를 수 있습니다.