안녕하세요. 코드덤입니다.
이번 시간에는 영화 평점을 이렇게 프로그래스 바를 사용해서 표현해 볼 거예요.
부트스트랩에서 제공하는 기본 예제 코드를 활용해서 바로 이러한 프로그래스 바를 만들 수 있답니다!
위의 이미지에서처럼 줄무늬 모양도 넣어보고, 색상이나, 값도 아주 간단하게 바꿔줄 수 있어요!
그리고 이미지로는 보이지 않지만, 애니메이션 효과도 들어가 있답니다.
이 부분은 아래 영상을 통해서 확인하실 수 있어요.
프로그래스 바의 스타일부터 애니메이션까지 부트스트랩으로 간단하게 만들어 줄 수 있답니다!
자, 그러면 프로그래스 바를 활용한 영화 평점 웹 페이지를 함께 만들어 볼게요!
만들어 나가는 자세한 과정과 상세한 설명까지!!
아래 영상에 모두 담아 두었습니다!
그러니, 아래 영상을 참고해 주세요~
본 영상을 통해서 progress bar 전체 틀을 만드는 방법, 색상을 지정하고, 수치를 텍스트로 반영해 주고,
프로그래스 바의 너비와 높이를 지정해 주는 이 모든 방법에 대한 상세한 설명을 들으실 수 있어요!
코드덤 유튜브 채널을 방문하시면, 부트스트랩의 다른 예제들 뿐만 아니라, 파이썬이나 아두이노에 대한 무료 강좌들도 접하실 수 있으니까요.
한번 구경오세요~
[부트스트랩 무료 강좌] : 부트스트랩 5로 보다 효율적이고 스마트하게 웹사이트를 만들어 보세요!
부트스트랩5 무료 강좌 - 스마트하게 웹 사이트 만들기
Bootstrap 5로 빠르고 효율적으로 나만의 웹 사이트를 만들기 강의를 시작합니다! 현재 50% 얼리버드 할인 이벤트가 진행 중입니다! ($60 --) $30) 자세한 내용은 코드덤 홈페이지를 참고해 주세요! https
www.youtube.com
다만, 무료 강좌는 HTML과 CSS의 기초 개념을 이미 알고 계신 분들을 대상으로 진행되는 강의입니다.
만약 HTML이 처음이시라면, 먼저 HTML의 기초 핵심 개념부터 먼저 익히고 오셔야 하세요!
HTML은 상당히 심플한 언어입니다! 그래서 빠르게 배우실 수 있어요~
HTML과 CSS의 기초 핵심 개념부터, 부트스트랩까지 함께 배워나갈 수 있는 부트스트랩 5 강좌를 오픈하였으니까요.
HTML이 처음이시거나, 또는 부트스트랩을 보다 체계적으로 배워나가고 싶은 분들은 아래 페이지를 통해 상세한 커리큘럼을 확인해 주세요~
현재 할인 이벤트가 진행 중이니, 이 시기를 놓치지 마세요!
부트스트랩 5로 만드는 포트폴리오 웹 사이트
35% 할인 쿠폰 : EARLYBIRD35
codethem.co.kr
부트스트랩을 활용하면, 빠르게 웹 사이트를 만들어 나갈 수 있습니다!
본 과정을 통해 "부트스트랩"이라는 강력한 아이템을 획득해 보세요!
모두 모두 많이 웃을 수 있는 하루 되시길 바랍니다!
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| [부트스트랩 5 무료 강좌] 예제 6 : My Pet 소개 페이지 | 그리드(grid) 시스템 | bootstrap 5 (0) | 2022.11.30 |
|---|---|
| 부트스트랩 5 무료 강좌 | 예제 5. 프로필 섹션 | 그리드 (grid) 시스템 | bootstrap (0) | 2022.11.29 |
| [ 부트스트랩 5 무료 강좌 ] 예제 3 : 포트폴리오 갤러리 페이지 | d-flex (0) | 2022.11.26 |
| [부트스트랩5 무료 강좌] 예제 2 : 명언 카드 만들기 | 인용문, 그림자 효과, 배경 불투명도 설정 (0) | 2022.11.25 |
| [부트스트랩5로 만드는 별자리 소개 페이지] 반응형 이미지, 텍스트 스타일, 마진 등 (0) | 2022.11.24 |