Bootstrap은 프론트엔드를 위한 웹 프레임워크입니다.
쉽게 말하면 ppt를 만들 때 템플릿과 같은 것들이 모인 곳이라고 보면 되겠네요.
하지만
우리가 템플릿만 쓰면 나만의 느낌을 가진 ppt를 만들지 못하는 것처럼
bootstrap으로만 화면을 꾸미면
그 특유의 느낌이 생깁니다.
누가봐도 bootstrap을 쓴 것 같은 느낌...?ㅎ
그래서 만약 프론트엔드 개발자 쪽을 꿈꾸신다면
부트스트랩을 탈피하여 자신만의 코드를 짜셔야겠지만!
우선 처음하는 개발자들에게
대신 꾸며주는 bootstrap은 가뭄 속의 단비와 같습니다.
자 이제 본격적으로 부트스트랩 이용방법에 대해 말씀드리겠습니다.
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
부트스트랩에 들어가면 처음 보이는 화면입니다.
그다음 Documentation을 누르면 Quick start라는 부분을 볼 수 있는데요.
이는 부트스트랩을 이용하기 위해 head 태그 안에 넣어줘야 할 링크입니다.
CSS, JS 둘 다 복사하여 head 태그 안에 넣어줍니다.
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>자 그렇다면 이 코드의 의미는 무엇인가?!!
코드에 적혀있는 하이퍼링크를 ctrl+클릭하면 하이퍼링크로 넘어가게 되는데요.
여기 있는 코드가 다~~~ css 코드입니다.
즉, 부트 스트랩에서 쓰이는 css 코드가 잘 작동되도록 다 모아놓은 것이죠!
자 이제 부트 스트랩을 사용할 준비가 되었네요.
우선 우리가 가장 흔히 쓰는 버튼에 대해 바꿔보겠습니다.
좌측 검색 창에 버튼을 입력하게 되면
짠! 다음과 같이 에제 코드들이 나오는데요.
위에 예시 중 내가 원하는 모양의 버튼이 있다면 그에 해당하는 코드를 가져가 적용시키면 됩니다.
이 외에도 아래에 다양한 버튼 예시가 있는데, 자신이 원하는 것을 선택하면 됩니다.
이렇게 부트스트랩에는 버튼 뿐만 아니라,
input 태그를 예쁘게 꾸며주는 코드, 상단 바를 만들어주는 코드 등 다양한 것들이 존재하는데요.
그때그때 좌측을 클릭하여 자신에게 해당하는 부분을 찾아 사용하시면 됩니다.
또 하나 더!
start bootstrap이라는 곳이 있는데,
여기는 부트스트랩 코드를 이용해 완성된 웹을 무료로 이용하게 해주는 곳인데요.
ppt 템플릿 사이트와 비슷한 느낌의 사이트라고 생각하시면 좋을 것 같아요.
여기서 보이는 아무 템플릿에 들어가 다운로드해주시면 되는데요.
이때 pro라고 표시되어 있는 것은 유료이니, free라고 적혀있는 것을 다운로드해주시면 됩니다.
다운로드할 때 파일 자체를 저장해도 되고, git을 사용하여 가능한데
우선은 파일 자체로 이용해보겠습니다.
free download를 누른 다음, 알집을 풀어주세요.
그럼 다음과 같은 화면을 볼 수 있을거에요.
그다음 각각의 에디터를 켜줍니다.
저는 현재 vs code를 사용 중이라 이를 켜줬습니다.
그 후 각 에디터의 open folder를 눌러줍니다.
그리고 방금 전 다운로드하여 알집을 연 파일을 찾아 더블클릭해주세요.
짠!!!
다 잘 옮겨온 것을 확인할 수 있습니다.
이 상태에서 로컬 서버를 켜주면
(vs code의 경우 love server라는 확장 프로그램 설치 후 alit+l를 누른 후, alt+o를 눌러주시면 손쉽게 켜집니다.)
우리가 아까 봤던 템플릿을 그대로 보실 수 있습니다.
이리저리 움직여보셔요 ㅎㅎ 신기하죠??
이렇게 쉽게 디자인을 적용할 수 있습니다.
코드도 이렇게 조금만 바꿔주시면
바로 적용이 되는 걸 확인할 수 있어요.
웹컴 어쩌고 영어가 히히허허로 바꾸어 적용된 거 보이시죠??
이렇게 간편하게 템플릿을 가져와 사용할 수 있습니다!
여기 템플릿 내용을 막 바꿔가면서,
코드들도 조금씩 적응하고 하시면 좋을 것 같네요!!:>
'개발 > Web(html_css)' 카테고리의 다른 글
| CSS 레이아웃 - Grid, Flex 차이 및기본 개념 (0) | 2021.03.27 |
|---|---|
| CSS - display 속성-block, inline,block-inline (0) | 2020.05.30 |
| 프론트엔드? 백엔드? 차이 (0) | 2020.04.22 |
| CSS선택자 및 이용하는 방법 -style 속성, 태그, 파일 분리하기 (0) | 2020.04.19 |
| HTML 기본 태그 정리 (0) | 2020.04.17 |
댓글