"쉽게" ≪ 왕초보자용 ≫ "쉽게"
그래서, 부트스트랩 사용하려면 어떻게 해야하는 거야?
역시나 엄청 쉽습니다. 복사 붙여넣기, 끝!
1. 공식 홈페이지 접속: https://getbootstrap.com/
Bootstrap
The most popular HTML, CSS, and JS library in the world.
getbootstrap.com
(※ 꿀팁 - "북마크" 설정해두시면 편합니다.)
2. 설치 대신 CDN
CDN은 "Content Delivery Network"의 약자로, 한글로 풀면 "콘텐츠 전송 네트워크"라는 뜻입니다.
쉽게 얘기해서, 부트스크랩을 내 컴퓨터나 어플리케이션에 직접 설치하지 않고, "인터넷(네트워크)으로 끌어다 쓰겠다"는 소립니다.
깔끔합니다.
3. CDN 얻는 방법 (성격 급하신 분은 맨 밑으로)
▶ 공식 홈페이지 접속. "Get started" 클릭.
▶ Bootstrap의 CSS만 쓸 생각이라면 위 화살표가 지목하는 "Copy" 버튼 클릭.
본인 홈페이지의 HTML <head>와 </head> 사이 어딘가에 "붙여넣기" 하시면 됩니다. <body> 윗쪽에.
※ 참고) 녹색 화살표 부분을 자세히 보시면, "cdn"이라는 글자 보이시죠?
저 주소에 있는 CSS 파일을 네트워크로 가져다가 쓰겠다는 의미입니다.
▶ Bootstrap의 JS(자바스크립트)만 사용하실 생각이라면, 첫 번째 붉은 화살표를 따라 Bundle 부분의 "Copy" 클릭.
그마저도 Popper를 따로 분리해서 쓰시겠다 하신다면, 두 번째 붉은 화살표를 따라 Separate 부분의 "Copy" 클릭.
4. 결론: 이거 하나면 끝 (강추!)★★★
▶ 해당 페이지의 스크롤을 조금만 더 내려보시면, "Starter template"이라는 섹션이 나옵니다.
부트스트랩의 CSS와 JS의 CDN은 물론이고, HTML의 기본 세팅까지 한방에 해결하실 수 있는 snippet 입니다.
우측 붉은 화살표가 가리키는 "Copy" 클릭.
본인의 "비어있는" HTML파일에 "붙여넣기" 하면 끝.
처음엔 뭔가 복잡해 보이지만, 사실 특별한 건 없습니다.
첫 번째 파란 박스는 위에서 복사했던 CSS의 CDN이고, 아래에 위치한 파란 박스는 JS의 CDN일 뿐입니다.
(※ 단, 한글로 된 웹 사이트를 만드실 계획이라면, 붉은색 별표 부분에 적힌 "en" 부분을 "ko"로 바꿔주셔야 합니다.)
html의 language를 english에서 korean으로 바꾸겠다는 뜻일 뿐, 전혀 어려운 거 아닙니다.
<html lang="ko">
'HTML & CSS > Bootstrap' 카테고리의 다른 글
| [Bootstrap] 수직정렬: Vertical alignment (0) | 2021.08.25 |
|---|