웹개발자 필수! 부트스트랩으로 반응형 웹 쉽게 만드는 법 완전 정복
게시일:
작성자: 자청의 유튜브 추출기
부트스트랩, 웹사이트 만들기 치트키!
웹사이트 만드는 거 어렵다고? 걱정 마! 오늘은 부트스트랩이라는 엄청난 치트키를 알려줄게. 이걸 알면 웹사이트를 엄청 쉽게 만들 수 있어.
부트스트랩, 왜 어려울까?
처음 부트스트랩을 접하는 친구들은 아마 어려울 거야. 왜냐하면 처음으로 외부 코드를 가져와서 쓰는 거거든. 익숙하지 않으니까 어렵게 느껴지는 거지. 게다가 영어로 되어 있어서 어디서부터 봐야 할지도 모르겠고.
하지만 걱정 마! 부트스트랩은 사용하기 정말 쉬워. 이걸 계속 사용하다 보면 금방 익숙해질 거야.
부트스트랩, 어떻게 사용하는 걸까?
- 부트스트랩 웹사이트 접속: 구글에 "부트스트랩"이라고 검색해서 웹사이트에 들어가.
- CSS 링크 복사: 웹사이트에서 "Styles" -> "Get started"로 들어가면 두 개의 링크가 보일 거야. 먼저 CSS 링크를 복사해.
- HTML
<head>안에 붙여넣기: 복사한 CSS 링크를 HTML 파일의<head>태그 안에 붙여넣어. - JavaScript 링크 복사: 이번엔 JavaScript 링크를 복사해.
- HTML
<body>태그 직전에 붙여넣기: 복사한 JavaScript 링크를 HTML 파일의<body>태그가 닫히기 바로 직전에 붙여넣어.
이제 부트스트랩을 사용할 준비는 끝났어!
부트스트랩, 뭘 할 수 있을까?
부트스트랩은 남이 만들어 놓은 스타일을 가져다 쓸 수 있게 해줘.
- 컴포넌트: 버튼, 카드, 네비게이션 바 등 다양한 디자인 요소들을 쉽게 가져다 쓸 수 있어.
- 버튼: 예쁜 색깔의 버튼들을 그냥 복사해서 붙여넣기만 하면 돼.
- 카드: 이미지와 텍스트를 담는 카드도 쉽게 만들 수 있어.
- 네비게이션 바: 웹사이트 상단에 메뉴 바도 뚝딱 만들 수 있지. 모바일 화면에서는 자동으로 햄버거 메뉴로 바뀌는 반응형 기능까지!
- 그리드 시스템: 웹사이트를 행과 열로 나누는 것을 쉽게 도와줘. 화면 크기에 따라 자동으로 레이아웃이 바뀌는 반응형 웹사이트를 만들 때 정말 유용해.
- 한 줄을 12칸으로 보고, 각 요소에 몇 칸을 줄지 정해주면 돼. 예를 들어, 화면이 클 때는 3칸씩, 중간 크기일 때는 6칸씩 보여주도록 설정할 수 있어.
웹사이트 1분 안에 만들기?
부트스트랩에는 이미 만들어진 예제 웹사이트들도 있어!
- 예제 웹사이트 보기: 부트스트랩 웹사이트에서 "Examples"를 클릭하면 다양한 예제들을 볼 수 있어.
- 소스 코드 복사: 마음에 드는 예제 웹사이트를 찾았다면, 오른쪽 클릭해서 "View page source"를 선택해.
- HTML 파일에 붙여넣기: 소스 코드를 전부 복사해서 HTML 파일에 붙여넣고, CSS와 JavaScript 링크만 제대로 연결해주면 끝!
이렇게 복사 붙여넣기만으로도 멋진 웹사이트를 만들 수 있어. 물론 이 예제들은 참고만 하고, 직접 코드를 수정하면서 나만의 웹사이트를 만들어보는 게 실력 향상에 더 도움이 될 거야!
부트스트랩으로 웹사이트 만들기, 이제 어렵지 않지? 😉