부트스트랩으로 페이지 디자인하기

부트스트랩(Bootstrap)이란?

부트스트랩 프레임워크는 웹 디자인을 위한 오픈소스 프론트엔드 프레임워크이다.

프레임워크라고 말하면 어렵운 것 같지만 쉽게 이야기하면

미리 만들어진 레이아웃이나 버튼, 입력창 등을 가져다 쓰기 위한 툴이다.

 

기존에 만들어진 요소를 가져오는 것이기 때문에 양산형 디자인이 되기 쉽지만

나 같이 프론트엔드를 잘 모르는 사람이더라도 부트스트랩을 사용하면

그럴싸한 웹페이지를 디자인할 수 있다. 

 

사용 준비

부트스트랩을 사용하기 위해서는 소스 코드를 직접 다운받거나

CDN을 사용해 페이지에 불러올 수 있다.

 

소스 코드는 부트스트랩 홈페이지에서 다운받을 수 있고

파일들을 프로젝트 폴더에 넣은 뒤 script 태그를 통해 페이지에 파일을 불러오면 된다.

 

CDN 방식의 경우 따로 파일을 다운로드 받을 필요 없이

지정된 URI를 script 태그에 입력해 해당 소스를 페이지에 불러오면 된다.

 

사용하기

부트스트랩의 기본은 미리 디자인된 요소를 복사해 나의 페이지에 붙여넣기 하는 것이다.

부트스트랩 홈페이지나 W3Schools에서 기본적인 요소들을 가져올 수 있다.

 

https://getbootstrap.kr/

Bootstrap

https://www.w3schools.com/bootstrap5/index.php

Bootstrap 5 Tutorial

 

 

예를들어 로그인 창을 만들고 싶다면 위 사이트들에서 제공하는 기본 레이아웃을 가져오면 된다.

 

부트스트랩 홈페이지의 경우 다음과 같이 레이아웃을 표시하고 HTML코드를 제공하고 있다.

위 코드를 페이지 문서에 붙여넣으면 코드 위에 표시된 예시와 똑같은 형태의 레이아웃을 사용할 수 있다.

 

 

수정하기

이렇게 복사해 온 요소를 자기 페이지에 맞게 수정할 수 있다.

부트스트랩은 태그의 class 속성을 통해 해당 요소에 CSS를 적용할 수 있다.

 

예를들어 위의 로그인 레이아웃의 div 태그에는 class 속성으로 mb-3가 작성되어 있는데

이는 마진(margin)을 하단(bottom)에  3정도(1rem)의 마진을 주는 클래스 값이다.

 

이런식으로 클래스 속성에 정해진 속성값을 주거나 내부 / 인라인 스타일 시트를 통해

가져온 레이아웃을 수정할 수 있다.