1. 학습한 내용
부트스트랩 실습
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<style>
/* section {border: 1px solid red;} */
.fakeimg{ height: 200px;
background-color: #aaa;}
</style>
</head>부트스트랩 기본 링크
<body>
<header class="bg-primary text-white text-center p-5">
<h1>My First Bootstrap 5 Page</h1>
<p>Resize this responsive page to see the effect!</p>
</header>p = padding, m = margin =>py, my=> 패딩,마진 y축으로(위 아래로) x축으로(왼,오른쪽)
<nav class="navbar bg-dark navbar-dark navbar-expand-sm">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>
</div>
</nav>navbar-expand-sm : sm(크기)에서 수직 정렬
fluid = width 100%
<section class="container mt-5">
<div class="row">
<aside class="col-sm-4">
<h2>About Me</h2>
<p class="h5">Photo of me: </p>
<div class="fakeimg">Fake Image</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<h3>Some Links</h3>
<ul class="nav nav-pills flex-column">
<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
<li class="nav-item"><a class="nav-link" href="#">Disabled</a></li>
</ul>
<!-- 지정된 중단점보다 큰 화면 너비에 영향을 준다 -->
<hr class="d-sm-none">
</aside>nav: 간단한 수평 메뉴
flex-column : 항상 세로 메뉴
nav-pills : active에 테두리 넣기
column = 12개 기준 나뉘어 있고, 그에 따라 나누어 사용
<article class="col-sm-8">
<h2>TITLE HEADING</h2>
<p class="h5">Title description, Dec 7, 2022</p>
<div class="fakeimg">Fake Image</div>
<p>Some text</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, consequatur accusantium tempore possimus ipsam iusto rerum laboriosam commodi, cupiditate recusandae, veritatis incidunt. Nihil odit quod, maxime non molestias ad quisquam.</p>
<h2>TITLE HEADING</h2>
<p class="h5">Title description, Dec 7, 2022</p>
<div class="fakeimg">Fake Image</div>
<p>Some text...</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint, consequatur accusantium tempore possimus ipsam iusto rerum laboriosam commodi, cupiditate recusandae, veritatis incidunt. Nihil odit quod, maxime non molestias ad quisquam.</p>
</article>
</div>
</section> <footer class="bg-dark text-white d-flex justify-content-between align-items-center p-4 mt-5">
<p>footer</p>
<div>
<i class="ms-3 bi bi-twitch"></i>
<i class="ms-3 bi bi-facebook"></i>
<i class="ms-3 bi bi-facebook"></i>
<i class="ms-3 bi bi-facebook"></i>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>부트스트랩 실습2
<!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">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
<style>
header{
background-image: url("../images/bg-top.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center top;
}
</style>
</head>
<body>
<header>nav toggle 만들기
<nav class="navbar navbar-expand-sm navbar-dark bg-dark fixed-top"> <!-- bar 고정 -->
<div class="container-fluid">
<a href="#" class="navbar-brand">
<img src="https://getbootstrap.kr/docs/5.1/assets/brand/bootstrap-logo.svg" width="30" height="30" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarcollaps">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarcollaps">
<ul class="navbar-nav me-auto"> <!-- me는 왼쪽으로, ms는 오른쪽으로 -->
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link">Freebies</a></li>
<li class="nav-item"><a href="#" class="nav-link">Log In</a></li>
</ul>
</div>
</div>
</nav>배경 이미지 불러오기
<div class="container text-center py-5">
<h1 class="text-white pt-5"><strong>Display your web disign</strong><br>in a web browser</h1>
<p class="h4 text-secondary mb-3">Fastest way to present your design and get feedback from your clients!</p>
<div class="btn btn-primary btn-lg py-3">Upload project</div>
<div class="text-secondary mt-5 d-none d-sm-block d-inline-flex-row">
<img src="../images/drop-icon.png" alt="" class="align-top pt-0">
<span class="d-inline-block ms-3">Drop here or select your project<br>prepared in the PNG or JPG format</span>
</div>
</div>
</header>첫번째 section
<section class="bg-light">
<div class="container">
<div class="row py-5">
<div class="col-md-5">
<h2>Fastest way to<br><strong>present your design</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nulla minima nostrum eius odio tempora id vitae ex veritatis ducimus debitis, magni reiciendis? Nesciunt obcaecati modi inventore impedit ipsa eum!</p>
<p><strong>present your design</strong><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
<div class="col-md-7">
<img src="../images/symu-panel-1.png" alt="" class="img-fluid">
</div>
</div>
</div>
</section>두번째 section
<section>
<div class="container">
<div class="row py-5">
<div class="col-md-7">
<img src="../images/symu-panel-2.png" alt="" class="img-fluid">
</div>
<div class="col-md-5">
<h2>Fastest way to<br><strong>present your design</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nulla minima nostrum eius odio tempora id vitae ex veritatis ducimus debitis, magni reiciendis? Nesciunt obcaecati modi inventore impedit ipsa eum!</p>
<p><strong>present your design</strong><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
</div>
</div>
</section>세번째 section
<section class="bg-light">
<div class="container">
<div class="row py-5">
<div class="col-md-5">
<h2>Fastest way to<br><strong>present your design</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis nulla minima nostrum eius odio tempora id vitae ex veritatis ducimus debitis, magni reiciendis? Nesciunt obcaecati modi inventore impedit ipsa eum!</p>
<p><strong>present your design</strong><br>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
</div>
<div class="col-md-7">
<img src="../images/home-panel-3.jpg" alt="" class="img-fluid">
</div>
</div>
</div>
</section>네번째 section
d-none d-md-block : 브레이크포인트에서 display 설정
<section>
<div class="container py-5 d-none d-md-block">
<div class="row">
<div class="col-md-6">
<img src="../images/envelope-icon.jpg">
<h2>Email<br><strong>notifications</strong></h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt optio fuga veniam nobis fugiat, labore incidunt facere. Necessitatibus provident sed aspernatur ratione libero nulla eaque exercitationem earum, maiores labore quaerat.</p>
</div>
<div class="col-md-6">
<img src="../images/lock-icon.jpg">
<h2>Email<br><strong>notifications</strong></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui saepe, amet voluptatum harum deserunt rerum nostrum quaerat officiis impedit eos molestiae nemo similique minus cupiditate eligendi eveniet, quam adipisci dignissimos.</p>
</div>
</div>
</div>
</section>다섯번째 section
<section class="bg-dark py-5 d-none d-md-block">
<div class="container">
<div class="row text-center align-items-center">
<div class="col-md-2">
<h3 class="text-white">253</h3>
<span class="text-white-50">Todays Uploads</span>
</div>
<div class="col-md-2">
<h3 class="text-white">171092</h3>
<span class="text-white-50">Todays Uploads</span>
</div>
<div class="col-md-4">
<a href="#" class="btn btn-danger btn-lg py-3">Sign Up<strong>now!</strong></a>
</div>
<div class="col-md-2">
<h3 class="text-white">253</h3>
<span class="text-white-50">Todays Uploads</span>
</div>
<div class="col-md-2">
<h3 class="text-white">171092</h3>
<span class="text-white-50">Todays Uploads</span>
</div>
</div>
</div>
</section>footer
<footer class="bg-black py-5">
<div class="container text-white-50 text-center">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>2. 학습한 내용 중 어려웠던 점
padding, margin, image 설정하고 조절하는 법을 잘 몰라서 찾아보는데 시간이 많이 걸린것 같다.
3. 해결방법
각 속성을 css와 비슷하게 html에서 적용하는 법들을 찾아보니 확실히 따로 css를 작성, 적용하지 않아도 되서 편한 것 같다.
4. 학습소감
부트스트랩을 활용한 웹페이지 만드는 실습에서 원하는 방향으로 만드는 연습을 하는 중인데 오늘 강의 덕분에 확실히 img쪽이나 padding margin 조절하는 법을 확실히 알 수 있어서 다시 연습하는데 도움이 될 것 같다.
코딩공부중