안녕하세요. 코드덤입니다.
이번 시간에는 부트스트랩 5로 심플한 테이블을 만들어 볼 거예요.
총 2가지 테이블을 만들어 볼 건데요.
첫 번째 테이블이 부트스트랩의 기본 스타일을 적용한 예시입니다.
그리고 이전 시간에 배웠던 프로그래스 바도 넣어 보았습니다.

그리고 두 번째 테이블은 색상과 줄무늬 스타일이 적용된 예시입니다.
또한 마우스 포인터에 닿을 때마다 하이라이트 효과도 넣어 볼 거예요.
그리고 두 번째 예시에서는 부트스트랩의 뱃지 스타일을 넣는 방법에 대해서도 소개해 드립니다.
만들어 나가는 자세한 과정은 아래 영상에 담겨 있습니다.
아래 영상을 참고해서 여러분도 빠르게 테이블의 스타일을 잡아 보세요!
2가지 실천 프로젝트를 통해서 부트스트랩을 보다 체계적으로 배워나갈 수 있는 강좌를 오픈하였습니다.
본 강좌는 인프런, 코드덤 홈페이지, 구름edu, 코드덤 유튜브 멤버십을 통해서 만나실 수 있습니다.
HTML이 처음이신 분들을 위해, HTML과 CSS의 기초 개념까지 포함되어 있습니다!
전 세계적인 웹 디자인 툴킷! 부트스트랩을 통해 보다 빠르고 효율적으로 나만의 웹 사이트를 만들어 보세요!
부트스트랩 5를 통해 여러분의 색깔을 이 세상 속으로 표출시켜 보시기 바랍니다.
아래 링크를 통해 상세한 커리큘럼을 확인하실 수 있습니다.
부트스트랩 5로 만드는 포트폴리오 웹 사이트
20% 할인 쿠폰 : welcome20
codethem.co.kr
오늘도 한 걸음 크게 도약하는 하루 되시기 바랍니다!
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| 예제로 배우는 부트스트랩 5 | 예제 11 : 입력 폼 스타일 | bootstrap 플로팅 레이블 (0) | 2022.12.22 |
|---|---|
| 부트스트랩 5 무료 강좌 | 이미지 슬라이드 쇼 만들기 | bootstrap 캐러셀 (0) | 2022.12.07 |
| 부트스트랩 5 무료 강좌 | 디지털 명함 만들기 | bootstrap (0) | 2022.12.02 |
| 부트스트랩 5 card overlay | 카드 스타일에 배경 이미지 넣기 (0) | 2022.12.01 |
| [부트스트랩 5 무료 강좌] 예제 6 : My Pet 소개 페이지 | 그리드(grid) 시스템 | bootstrap 5 (0) | 2022.11.30 |