오늘부터 항해16기 본과정에 들어가기 전 필수코스를 진행했습니다.
이전까지 들었던 웹개발 종합반 복습을 포함해 CSS 강의와 SQL 강의 중
하나를 선택해 8/3 ~ 8/7 까지 오후 3시부터 오후 9시까지 진행된 예정인데요.
저는 프론트엔드 개발자를 준비하고 있기에 CSS 강의를 선택했습니다.
때문에 이번 'CSS 기초강의' 카테고리에선
5일 동안 배울 내용과 수업을 들으면서 어려웠던 점에 대한 내용을 기술할 예정입니다.
배웠던 내용
이번 5장에서는 이제까지 배웠던 HTML, CSS, 부트스트랩을 이용해
파타고니아 홈페이지를 직접 클론코딩해보았습니다.
부트스트랩\patagonia.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;
}
.up {
background-color: #500778;
height: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.up > a:first-child {
margin-left: auto;
}
.up > a {
color: white;
margin-right: 10px;
}
.up > span {
color: white;
margin-right: 10px;
}
.up > a:last-child {
margin-right: 20px;
}
.down {
height: 70px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.down > img {
width: 130px;
margin-left: 20px;
}
.down > a {
margin-left: 80px;
font-weight: 900;
color: black;
}
.down > form {
margin-left: 80px;
margin-right: auto;
width: 500px;
}
.icons {
font-size: 24px;
}
.icons > i {
margin-right: 20px;
}
.main > img {
width: 100%;
}
.items {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
padding: 30px;
}
.imgs{
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
margin-right: auto;
margin-left: 100px;
}
.imgs > .card {
margin-right: 10px;
}
.list-group > span {
font-size: 24px;
margin-left: 10px;
}
.form-select {
width: 120px;
}
</style>
</head>
<body>
<div class="gnb">
<div class="up">
<a href="#">Cilmate Goals</a>
<a href="#">푸른 심장</a>
<a href="#">Worn Wear</a>
<span>|</span>
<a href="#">더 보기</a>
</div>
<div class="down">
<img
src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_main_logo.png
"
/>
<a href="#">SHOP</a>
<a href="#">INSTIDE PATAGONIA</a>
<form class="d-flex">
<input
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<div class="icons">
<i class="bi bi-question-circle-fill"></i>
<i class="bi bi-person-fill"></i>
<i class="bi bi-cart-fill"></i>
</div>
</div>
</div>
<div class="main">
<img
src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_main_banner.png
"
/>
</div>
<div class="items">
<ul class="list-group list-group-flush">
<span>WOMEN'S</span>
<li class="list-group-item">신상품</li>
<li class="list-group-item">재킷 & 베스트</li>
<li class="list-group-item">플리스</li>
<li class="list-group-item">스웨트셔츠 & 후디</li>
<li class="list-group-item">셔츠</li>
<li class="list-group-item">티셔츠</li>
<li class="list-group-item">팬츠 & 레깅스</li>
<li class="list-group-item">모자 & 액세서리</li>
</ul>
<div class="imgs">
<div class="card" style="width: 18rem;">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_item_1.png"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<span>Women Stand Up Overalls</span></br>
<span>₩159,000</span>
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_item_2.png"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<span>Women Ridge Flow Shirt</span></br>
<span>₩89,000</span>
</p>
</div>
</div>
<div class="card" style="width: 18rem;">
<img src="https://media-sparta.s3.ap-northeast-2.amazonaws.com/media/images/patagonia_item_3.png"
class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">
<span>Women All Seasons Hemp Canvas Shorts</span></br>
<span>₩119,000</span>
</p>
</div>
</div>
</div>
<select class="form-select" aria-label="Default select example">
<option selected>상품정렬</option>
<option value="1">최신순</option>
<option value="2">높은 가격순</option>
<option value="3">낮은 가격순</option>
</select>
</div>
</body>
</html>느낀 점
홈페이지의 크기가 커질수록 웹페이지를 세분화해서 구역을 나누는 것이 중요하다는 것을 느꼈습니다.
'항해 16기 > CSS 사전강의' 카테고리의 다른 글
| [Lev.3] To-do List (0) | 2023.08.05 |
|---|---|
| [Lev.2] Netflix 클론코딩 (0) | 2023.08.04 |
| [Lev.1-4] 부트스트랩 (0) | 2023.08.03 |
| [Lev.1-3] HTML, CSS 복습하기 (0) | 2023.08.03 |
| [LEV.1-2] CSS 활용하기 (0) | 2023.08.03 |
