안녕하세요. 코드덤입니다.
이번 시간에는 부트스트랩으로 간단한 폼을 하나 만들어 볼 거예요.
이번 폼에는 부트스트랩의 플로팅 레이블 스타일이 적용되어 있어요.
입력창을 클릭하면, 상단에 레이블이 작게 뜹니다.
바로 부트스트랩 플로팅 레이블을 적용한 스타일이랍니다.
부트스트랩에 제시된 예제 코드로 이러한 플로팅 레이블을 빠르게 적용시켜 줄 수 있습니다.
그리고 현재 폼 또한 반응형이에요.
그래서 큰 화면에서는 이름과 이메일 입력란이 가로로 배치됩니다.
하지만, 작은 화면에서는 세로로 배치되도록 만들어 볼 거예요.
부트스트랩의 플로팅 예제 코드를 활용하면, 이러한 폼을 상당히 빠르게 만들 수 있습니다.
부트스트랩 닥스, Form 카테고리에 floating label이 있는데요.
여기에서 플로팅 레이블의 다양한 예제들을 찾아보실 수 있습니다.
만들어 나가는 상세한 설명과 함께, 최종 코드는 아래 영상 속에 담겨 있습니다!
그러니, 아래 영상을 참고해서 여러분도 부트스트랩으로 폼 스타일을 만들어 보세요!
부트스트랩 플로팅 레이블 예제를 보면, 2개의 부트스트랩 클래스가 적용되어 있습니다.
form-floating이라는 클래스와 input 태그에 form-control이라는 부트스트랩 클래스가 적용되어 있습니다.
이 2개의 부트스트랩 클래스 지정만으로 이러한 스타일을 만들어 줄 수 있습니다.
이렇게 부트스트랩 예제 코드를 바탕으로 자신이 원하는 스타일로 만들어 나가시면 된 답니다!
부트스트랩 Docs에 수많은 예제들이 제시되어 있으니까요.
그러한 예제 코드를 활용해서 상당히 빠르게 웹 사이트를 만들어 나갈 수 있습니다.
2가지 실전 프로젝트를 통해서 부트스트랩을 보다 체계적으로 배워 나가실 수 있습니다.
HTML 기초 개념부터 시작하기 때문에, HTML이 처음이신 분들도 쉽게 따라오실 수 있도록 구성되어 있습니다.
본 과정을 통해서 나만의 포트폴리오 웹 사이트를 세상과 공유해 보세요!
코드덤 홈페이지 또는 아래 인프런 링크를 통해서 보다 상세한 커리큘럼을 확인하실 수 있습니다!
[ 부트스트랩 5 ] 빠르고 스마트하게 웹 사이트 만들기 | Bootsrap 입문용 - 인프런 | 강의
부트스트랩5로 나만의 색을 입힌 포트폴리오 웹 사이트 제작부터 배포까지! 전세계적으로 가장 많이 사용되고 있는 웹 디자인 툴킷! Bootstrap 5, - 강의 소개 | 인프런...
www.inflearn.com
'웹 프로그래밍 강좌 > 부트스트랩 5 강의 | bootstrap 5' 카테고리의 다른 글
| 부트스트랩 무료 강좌 | 예제 10 : bootstrap 표 스타일 | Table (0) | 2022.12.15 |
|---|---|
| 부트스트랩 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 |