부트스트랩 쉽게 사용하는 방법 - 웹사이트 제작 필수 프로그램
HTML 개발시 필수적으로 사용하는 부트스트랩입니다. 각종 CSS와 Javascript를 보기 편하게 만들어주는 이 프레임워크의 간단한 소개와 한줄이면 바로 사용가능하게 하는 방법에 대해 알려드리겠습니다.
부트스트랩이란
앞서 소개했듯 부트스트랩은 웹사이트를 쉽게 만들 수 있는 CSS,JS 프레임워크를 말합니다. 웹사이트 제작에 있어서 필수적인 프로그램 중 하나로 단 몇 줄의 코드 삽입으로 휴대폰, 태블릿, 데스크탑 등 다양한 기기에서도 작동할 수 있도록 할 수 있습니다.
이러한 기능 덕분에 사용자가 쉽게 웹사이트 제작 및 유지 보수할 수 있도록 환경을 제공해줍니다.
부트스트랩 쉽게 사용하는 방법
홈페이지 제작 중에 부트스트랩을 사용하기 위해서는 두가지 단계를 거치면 됩니다.
- 부트스트랩 사용 선언
- 부트스트랩 코드 사용
1. 부트스트랩 사용 선언
해당 과정은 코드 내에 부트스트랩을 사용하겠다는 선언을 하는 과정이 있어야 합니다. 부트스트랩이라는 곳에서 CSS 꾸러미를 가져오는 과정이라 생각하면 되겠습니다.
방법은 <HEAD> 태그 안에 아래 코드를 집어 넣으면 됩니다.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
아래 사진처럼 작업하면 됩니다.
2. 부트스트랩 코드 사용
head 태그에 선언했으면 이제 body 태그 안에서 부트스트랩 코드를 집어 넣으면 됩니다. 필자는 부트스트랩의 버튼을 예시로 보여드리겠습니다.
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
위의 부트스트랩 페이지를 들어가면 아래와 같은 화면이 나옵니다.
여기서 스크롤을 조금 내리니 버튼 이미지와 함께 코드가 나옵니다.
순서상으로 보니 button 태그 맨 위에 적혀 있는 게 맨 왼쪽에 있는 버튼인 것 같습니다. 이를 body 태그 안에 넣어 실행해보겠습니다.
실행하니 버튼 이미지가 나오는 것을 확인할 수 있었습니다.
Buttons
Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
getbootstrap.com
부트스트랩은 버튼 뿐만 아니라 알림 메시지, 모달, 드롭다운 버튼 등 다양한 컴포넌트와 레이아웃 등의 코드를 제공하고 있습니다.
끝으로
위의 소개한 부트스트랩 사용법과 다양한 기능 활용법을 잘 사용하여 가독성 있는 페이지 제작에 도움 되시길 바랍니다.
▼ 아래 글도 참고하세요! ▼
Git과 Github 개념 및 차이점
Git과 Github 개념 및 차이점 코드 개발에 있어서 가장 먼저 배운 것은 Git과 Github 사용법 이었습니다. 그만큼 개발보다 중요한 '협업'을 위해서라면 필수적으로 사용할 줄 알아야 하는 Git과 Github의
lemonlog.tistory.com
인생사진 쏙쏙 코딩네컷 | 스파르타코딩클럽 무료특강
1시간 만에 코딩을 무료로 배워 인생사진을 모아 추억을 기록하는 네컷사진으로 만들어보세요.
spartacodingclub.kr