부트 스트랩 사용법 [ bootstrap 5 version ]
https://getbootstrap.com/부트 스트랩은 웹사이트를 쉽게 만들 수 있게 도와주는 프레임워크 부트 스트랩을 쓴다 = 다른 사람이 만들어놓은 css를 쓴다
이렇게 다른 사람이 예쁘게 만들어놓은 걸 가져가서 쓸 수 있다
부트 스트랩과 겸용해서 쓸 때면, -을 쓰지 않기 (우리의 컨벤션)
(부트 스트랩이 -를 쓰는 클래스가 많기 때문에…)
색깔 추가하고 싶으면 클래스 이름을 직접 만들어서 추가하기!
text-primary 파랑
text-success 초록
text-danger 빨강
개발자는 문서를 보고 일한다
이런 문서를 보고, 간단한 토이 프로젝트를 만들어본다.
(토이 프로젝트 = 엄청 단순한 프로젝트!)
문서를 보면서 전부 다 하나씩 만져보는게 (실행 해 보는게) 중요
부트 스트랩 주로 사용하는 것
https://www.w3schools.com/bootstrap/bootstrap_ver.asp
* 부트 스트랩 쓸려면 이거 2개는 무조건 있어야함
* 부트스트랩은 화면을 12분할 해서 사용한다[ 컨테이너 ]
https://www.w3schools.com/bootstrap5/bootstrap_containers.phpflex는 w3school 에서 뽑아서 쓰고, grid는 w3school 쓰지 말고 직접 적기.
우린 디자인을 container로 할 것. 가운데 정렬을 할 거면 컨테이너를!
[ 백그라운드 컬러 / 텍스트 컬러 ]
https://www.w3schools.com/bootstrap5/bootstrap_colors_bg.php
https://www.w3schools.com/bootstrap5/bootstrap_colors.php
[ 테이블 디자인 ]
https://www.w3schools.com/bootstrap5/bootstrap_tables.php
크기 줄이고 싶으면 이렇게... div 박스를 새로 하나 더 만들어서 적용시키자!
[ 이미지 ]
https://www.w3schools.com/bootstrap5/bootstrap_images.php이미지 모서리 동그랗게
https://getbootstrap.kr/docs/5.2/utilities/borders/[ 버튼 ]
https://www.w3schools.com/bootstrap5/bootstrap_buttons.php[ 페이지 네이션 ]
https://www.w3schools.com/bootstrap5/bootstrap_pagination.php[ 리스트 그룹 ]
https://www.w3schools.com/bootstrap5/bootstrap_list_groups.php[ 카드 ]
https://www.w3schools.com/bootstrap5/bootstrap_cards.php[ 네브 바 ]
https://www.w3schools.com/bootstrap5/bootstrap_navbar.php창 줄이면 햄버거 버튼으로 바뀌는 걸 ‘붕괴 된 네브 바’ 라고 한다.
[ Flex ]
https://www.w3schools.com/bootstrap5/bootstrap_flex.php플렉스가 되고 싶으면 d-flex justify-content-center 클래스 걸면 된다
[ 검색 버튼 ]
1.
<form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
2.
<div class="d-flex justify-content-end mt-3 mb-3">
<form class="d-flex" style="width: 300px;">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>* form-control을 지우면 본연의 input 태그로 돌아간다
* 근데 2번째 방법을 쓰는게 더 예쁘다… justify 달아서 꾸며주자
[ Input 관련 디자인 ]
[ Grid 디자인 - 사용 XXX ]
그 외 나머지 것들은 시간 날 때, 한 번만 실행해보기
HTML-CSS 전체 코드 - 디자인 끝!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
.card_box {
margin-top: 10px;
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">홈</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">회원가입</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">로그아웃</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="d-flex justify-content-end mt-3 mb-3">
<form class="d-flex" style="width: 300px;">
<input class="form-control me-2" type="text" placeholder="Search">
<button class="btn btn-primary" type="button">Search</button>
</form>
</div>
<div class="card_box">
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
</div>
<ul class="pagination d-flex justify-content-center">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
<div class="bg-light p-5 text-center">
<h4>Created by Metacoding</h4>
<h5>☎ 010-2222-7777</h5>
<button class="btn btn-outline-primary">고객센터</button>
<button class="btn btn-outline-primary">오시는길</button>
</div>
</body>
</html>
</body>
</html>[ 부트 스트랩을 활용해서 만든 결과 화면 ]
form-control 이란?
form-control (Bootstrap 프레임워크에서 제공되는 클래스 중 하나)
* 폼 요소를 끝까지 늘리는 데 사용되는 클래스
* 마치 block처럼 동작하며, 가로 폭을 부모 요소의 가로 폭에 맞게 늘릴 수 있다
* CSS를 별도로 작성하지 않고도 폼 요소를 균일하게 스타일링할 수 있다.
disable 속성이란?
"disable" 속성은 HTML 요소를 비활성화 상태로 만드는 속성.
비활성화된 요소는 사용자가 상호작용할 수 없고, 편집이 불가능한 상태가 된다.
주로 폼 요소나 버튼과 같은 상호작용 가능한 요소에 적용 됨.
ex) <input>은 사용자가 텍스트를 입력할 수 있는 입력 필드.
하지만 "disable" 속성을 추가하면 사용자는 해당 입력 필드에 텍스트를 입력할 수 없고,
내용을 변경할 수 없다.프런트 공부는 w3school ~
Share article
