부트스트랩 아이콘

다양한 아이콘을 여기저기 구글링 할 필요 없이 구할 수 있게 해주는 게 부트스트랩 아이콘 입니다. “부트스트랩 아이콘”을 이용하여 다양한 아이콘을 웹페이지에 사용할 수 있습니다. 부트스트랩 아이콘 사용하기 Bootstrap Icons · Official open source SVG icon library for Bootstrap (getbootstrap.com) 위의 링크에 접속합니다. 아이콘을 가져오기 위해서는 import를 해줘야 합니다. 여러 방법이 있지만 이번에는 간단하게 CDN으로 import … Read more

부트스트랩 카드 구현

“부트스트랩 카드“는 웹 페이지에서 정보를 시각적으로 구성하고 표현할 때 사용되며, 다양한 콘텐츠를 그룹화하고 레이아웃을 형성하는 데 유용합니다. 텍스트, 이미지, 버튼 등 다양한 요소를 카드 내에 조합하여 사용자에게 일관된 디자인과 레이아웃을 제공합니다. 이번 포스트에서는 부트스트랩 카드 구현하는 법을 정리해보았습니다. 부트스트랩 카드 추가하기 https://getbootstrap.com/docs/5.3/components/card/ 위의 링크에서 부트스트랩 메뉴 > Component > Card 로 들어가면 원하는 카드 형식을 … Read more

부트스트랩 모달 구현

페이지에서 새로고침 없이 사용자에게 정보를 표시하거나 입력 받을 때는 어떻게 해야 할까요? 정말 여러가지 방법이 있지만 부트스트랩의 “모달”은 이를 정말 쉽게 구현할 수 있게 도와줍니다. 모달이란? 모달창은 웹 페이지에서 부분적으로 띄워진 독립적인 창으로, 주로 정보를 표시하거나 사용자로부터 추가 입력을 받을 때 사용되는 팝업 형태의 UI 요소입니다. 모달 만들기 https://getbootstrap.com/docs/5.3/components/modal/위의 링크로 들어가 원하는 모달창 코드를 복사합니다. … Read more

부트스트랩 시작하기

“부트스트랩 (Bootstrap)“은 트위터에서 개발한 오픈 소스 프론트엔드 프레임워크로, HTML, CSS, JavaScript를 이용하여 웹 개발을 빠르고 쉽게 구현할 수 있게 도와주는 도구입니다. 처음 부트스트랩 개념을 들었을 때, “HTML, CSS 조금 편하게 해주는 건가….? 굳이 사용해야 될까…?” 라는 생각이 들었습니다. 그런데 막상 사용해보니 유려한 디자인의 구성을 정말 빠르고 쉽게 개발할 수 있게 해준다는 것을 깨달았습니다. (부트스트랩 없이 … Read more