항해 16기/CSS 사전강의
[Lev.1-4] 부트스트랩
해갈
2023. 8. 3. 20:05
오늘부터 항해16기에 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
배웠던 내용
이번 4장에서는 앞에서 배웠던 내용을 토대로
인스타그램에 있는 피드를 직접 클론코딩해보았습니다.
그치만 앞에서 모바일 청첩장을 클론코딩하는 것과 다른 점은
처음부터 일일히 하드코딩하는 것이 아닌
'부트스트랩' 이라는 프레임워크를 이용해 직접 코드를 작성하지 않고도
CSS 와 JavaScript 로 만들어 놓은 각종 레이아웃, 버튼, 입력창 등의 디자인을 가져와 코딩을 했습니다.
역시 직접 코드를 전부 작성하는 것보다 훨씬 간편하고 코드의 길이도 짧아졌지만,
부트스트랩의 단점은 가져온 디자인을 사용자가 커스텀하기에는
직접 코드를 작성한 것이 아니기 때문에 어렵다는 단점이 있습니다.
부트스트랩\instagram.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"
></script>
<title>띵동코딩-부트스트랩_인스타그램</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
body,
h1,
h2,
h3,
p,
a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
/* 이름 */
.name {
color: gray;
font-size: 12px;
margin-bottom: 5px;
}
.title {
font-size: 14px;
}
.wrap {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
margin: 20px auto 0px auto;
}
.card-text {
font-size: 14px;
}
.user {
font-size: 14px;
font-weight: 500;
}
.card-body > input {
border: none;
margin-top: 10px;
font-weight: 400;
}
.icons {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.icons > .bi-send {
margin-right: auto;
}
.icons > .bi-suit-heart {
margin-right: 10px;
}
.icons > .bi-chat {
margin-right: 10px;
}
.me {
width: 280px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.me > img {
width: 25x;
height: 25px;
border: none;
border-radius: 100%;
margin-right: 10px;
}
.me > span {
margin-right: auto;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="name">SKUUKZKY</h1>
<p class="title">게시물</p>
<div class="me">
<img
src="http://www.naewoeilbo.com/news/photo/202110/414285_189601_940.png"
/>
<span>SKUUKZKY</span>
<i class="bi bi-three-dots"></i>
</div>
<div class="card" style="width: 18rem">
<img
src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/10/18/a706569b-e8db-4c05-bbd1-2c48a53a0f2f.jpg
"
class="card-img-top"
/>
<div class="card-body">
<div class="icons">
<i class="bi bi-suit-heart"></i>
<i class="bi bi-chat"></i>
<i class="bi bi-send"></i>
<i class="bi bi-bookmark"></i>
</div>
<p class="card-text">1,500명이 좋아합니다.</p>
<p class="user">SKUUKZKY</p>
<input
class="form-control form-control-sm"
type="text"
placeholder="...댓글달기"
aria-label=".form-control-sm example"
/>
</div>
</div>
</div>
</body>
</html>