티스토리 뷰
자, 여러분들은 혼자서 홈페이지를 만들 수 있어야합니다. 번거롭더라도 참고 사이트들에 꼭 들어가서 확인해 보시는걸 추천드립니다. 실제 홈페이지를 제작 할 때도 개발자들은 들어가서 확인해 보시면서 제작을 합니다!
1단계에서 card 틀을 만들었습니다.
이제 꾸며봅시다.
2단계에서는 badge를 이용해보고 카드를 조금 더 보기 좋게 바꿔보겠습니다.
아래의 코드를 복사하세요!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/200" class="card-img-top" alt="무작위사진">
<div class="card-body">
<h5 class="card-title">랜덤 그림</h5>
<p class="card-text">새로고침을 할때마다 그림이 바뀜니다. 신기하죠? 랜덤 이미지코드가 궁금하시면 아래의 버튼을 눌러서 랜덤이미지를 찾아주세요</p>
<a href="https://han-py.tistory.com/6" class="btn btn-primary">눌러주세요</a>
</div>
</div>
</div>
<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>
</body>
</html>
|
cs |
위의 코드가 궁금하다면 아래의 링크를 타고 보고 오시면 됩니다.
시작해봅시다
이번 단계에서는 간단히 card title 옆에 hot 이라는 빨간 모양의 네모 상자를 넣어 볼 생각입니다.
예를들면 옷가게에 들어가 보면 옆에 옷 이름 옆에 hot 이나 new나 적혀 있는거 보신적 있으시죠? 그걸 만들어 봅시다.
먼말인지 모르겠으면 제일 아래로 가서 태그를 복사해서 보시고 위의 태그랑 비교해 보시면 됩니다.
일단은 우리가 쓸 badge중 어떤 탬플릿을 쓸지 골라야겠죠??
아래의 링크를 타고가서 원하는 것을 찾아서 쓰시면 됩니다.
https://getbootstrap.com/docs/4.4/components/badge/
Badges
Documentation and examples for badges, our small count and labeling component.
getbootstrap.com
이때 주의 할 점은 색표현이 다르다는 것입니다.
ex> <span class="badge badge-primary">Primary</span>
에서 badge-primary에서 primary는 파란색을 뜻합니다.
badge-danger에서 danger은 빨간색을 뜻합니다.
위의 페이지를 들어가서 색들을 확인해 봅시다.
아래의 코드를 보면서 설명을 드리겠습니다. 복사해서 실행해 보세요!
'Web > Bootstrap' 카테고리의 다른 글
| Bootstrap으로 nav만들기 (0) | 2020.03.24 |
|---|
- Total
- Today
- Yesterday
- next.config.js
- TensorFlow
- django
- pandas
- useState
- vuejs
- react autoFocus
- logout
- BFS
- error:0308010C:digital envelope routines::unsupported
- Queue
- mongoDB
- Python
- Express
- typescript
- nextjs autoFocus
- useHistory 안됨
- nodejs
- login
- NextJS
- UserCreationForm
- DFS
- JavaScript
- 클라우데라
- Deque
- 자료구조
- read_csv
- react
- 자연어처리
- Vue
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |