부트스트랩이 왜 안 먹히지? (2024-04-17)
0. 기본 정보
- 학습출처: 스파르타코딩클럽 웹개발종합반(1주차)
- 학습내용: HTML 기초, CSS 기초, 부트스트랩 활용
- 학습일: 2024. 4. 17.
1. 오류 내용
인프런 강의 「처음 만난 리액트」를 들으면서 가벼운 실수를 몇 차례 반복했다. 튜터의 해설이 제대로 이해가 되지 않아 재질문했다. 알고보니 내 실력이 부족한 탓이었다. 담임 매니저와 상담 후 인프런 강의 대신 웹개발종합반 강의를 듣는 것으로 결정했다.
2년 전에 완강했던 강의라 자신있었다. 하지만 착각이었다. 부트스트랩 실전편에서 허덕였다.
아래는 문제의 부트스트랩 오류 페이지다.
나만의 추억 앨범
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
(아니... 카드는 세로 정렬이 아니라 가로 정렬인데... 왜 이러는 거야...)
결론! 부트스트랩의 출처 링크를 <head>와 <body>에 입력하지 않아 발생한 문제!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나만의 추억 앨범</title>
<style>
.mytitle {
background-color: green;
height: 150px;
background-image: url(https://images.unsplash.com/photo-1511992243105-2992b3fd0410?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80);
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<button>추억 저장하기</button>
</div>
<div class="'mycards">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
2. 문제 해결하기
왜 그럴까? 부트스트랩의 소개 페이지를 살펴보았다.
<link href~>은 <head> 안에 넣고, <script>는 <body> 안에 넣으면 된다데... 그게 왜...? CDN은 뭐지?
부트스트랩은 일종에 인터넷 연결 방식으로, 내가 원하는 부트스트랩의 컨포넌트를 누군가 만들었고 그 출처를 부트스트랩에 올려두었다. 그걸 손쉽게 CDN 방식으로 복붙해서 쓸 수 있는데 반드시 그 출처를 <head>와 <body>에 입력해야 된다는 것이다.
- CDN(Content Delivery Network) 방식
- CSS CDN 링크의 경우 <head>의 <style> 바로 위에 입력
- JS CDN 링크의 경우 </body> 바로 위에 입력
