<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>아코 | 지노스</title>
</head>
<body>
<h1>아래에다가 버튼을 넣을 겁니다</h1>
</body>
</html>위의 예제를 실행시켜 보자
이제 <body>~</body>사이에 <h1></h1>아래에 다음 코드를 넣어보자
<button>버튼입니다</button>
그러면 다음과 같이 나온다
이 버튼은 아무런 디자인이 되어 있지 않은 버튼이다. 하지만 우리는 미리 디자인된 프레임워크를 가져다가 쓸 수 있다.
프레임워크는 코드의 '구조와 틀'정도로 우선 이해하면 될 것 같다.
https://getbootstrap.com/docs/4.5/getting-started/introduction/
Introduction
Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.
getbootstrap.com
부트스트랩은 트위터에서 사용하는 각정 레이아웃, 버튼, 입력창 등의 디자인은 CSS와 Javascript로 만들어 놓은 것이다. 프레임워크를 제공하는 곳도 여러곳이 있겠지만, 내가 배운 곳은 여기이다.
먼저 사이트에 들어가서 왼쪽 위 'search'에서 "buttons"를 입력해보자
그러면 examples와 더 아래쪽에는 outline, size, active state 등 다양한 디자인을 선택할 수 있다. 우리는 그 중 맘에드는 모양의 코드를 복사하여 붙여넣기 하면 된다. 예를 들어 위 그림에서 빨간 버튼인 Danger 코드를 복사해 보자
<button type="button" class="btn btn-danger">Danger</button>
이 코드를 처음에 입력했던 <button>~</button>코드와 바꿔넣고 실행시켜보자
색상이 적용이 안됐다. 왜 그럴까? CSS 파일을 불러오지 않았기 때문이다.(CSS → 디자인담당)
CSS 파일 적용
저번 포스팅에서 CSS파일을 분리하여 저장하고, html에선 css파일을 불러오는 링크를 적었다. 마찬가지로 부트스트랩의 디자인 요소를 적용하기 위해선 부트스트랩에 있는 CSS파일에 링크를 걸어야 한다.
다시 부트스트랩 홈페이지를 보면 CSS란에 '부트스트랩의 CSS파일을 가져오려면 아래 링크를 복사하여 <head> 안에 넣으라고 되어있다.
<!doctype html>
<html lang="ko">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 아래에 넣었습니다-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>아코 | 지노스</title>
</head>
<body>
<h1>아래에다가 버튼을 넣을 겁니다</h1>
<button type="button" class="btn btn-danger">Danger</button>
</body>
</html>
그래서 시키는대로 <head>안에 복사하여 넣고 실행시키면
빨간 버튼이 생겼다.
이 이외에도 자바스크립트나 jquery 라이브러리를 사용할 수도 있는데, 그때도 <body>안에 서식을 넣으라고 하기 때문에 처음에 시작할 때 홈페이지에 나와있는 Starter template를 적어두고 작업을 시작하는게 좋다
버튼 이외에도 다른 탬플릿들이 있는데 그건 다음 시간에 알아보겠다
공감 부탁 드려요 :)
'아무것도 모르고 시작하는 코딩' 카테고리의 다른 글
| JS(JAVASCRIPT) 자바스크립트란? | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.10 |
|---|---|
| Bootstrap jumbotron, card-columns | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.10 |
| CSS 파일 분리하기 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| 구글 웹폰트 HTML 적용하기 | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |
| MARGIN 과 PADDING | 아무것도 모르고 시작하는 코딩 (0) | 2020.08.01 |