웹 Bootstrap 적용하기

 

lockcept.kr 개인 웹 사이트를 가지고 있는데

디자인이 텍스트 나열 밖에 없어서 Bootstrap 을 적용해보고자 공부하고 글을 작성하게 되었다.

 

물론 Bootstrap 을 이용한 여러 무료 템플릿을 적용하여도 되지만, 디자인을 본격적으로 적용할 마음은 없었고 공부하며 하자는 마인드로 최소한의 공부 후 직접 적용하게 되었다.

 

부트스트랩은 트위터에서 시작한 오픈소스 프론트엔드 라이브러리로, 웹 디자인의 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JS로 만들어 놓은 일종의 템플릿이라고 보면 된다.

 

웹을 만들 때에 디자인 하느라 소요되는 많은 시간들을 매우 짧게 만들어주었다.

추가로, 반응형 웹 사이트 (모바일 / PC 등 보는 크기에 따라 다르게 적용되는)를 만들 수 있다는 큰 장점이 있다.

 

 

https://getbootstrap.com/

Bootstrap

 

 

부트스트랩 페이지에 들어가서 코드를 다운받아 주거나, 복사하여 본인의 html에 붙여넣어준다.

 

 

다운 받지 않으면 커스터마이징은 안되지만 일단 복사하여 사용하였다.

 

 

이 부분을 복사하여 넣어주면 된다.

 

 

사이트의 좌측을 보면 여러가지 components가 있는데 필요한 부분을 공부하여 사용할 수 있다.

 

 

일단 Bootstrap을 적용하여 조금이라도 사람다운 사이트를 만들어 보았다.

 

 

이렇게 모바일에서보면 형태가 달라지는 반응형 사이트를 만들기에 좋다.