-
0726. CSS(2)CSS 2023. 7. 26. 19:41
*정렬
container : block -> width가 부여된 박스를 정렬할 수 있음
(text-align 시 특정 영역 내(margin박스 내에서) 정렬됨
=> margin에 대한 값을 매겨 박스 자체 이동
container-fluid : inline -> 내용의 길이에 따라 폭이 조절됨(정렬 자체를 따로 못 함) -> "text-align" 내용 자체라 가능
이미지
반응형 이미지
.img-fluid
max-width: 100%; height: auto;
(min-width 도 존재)
class="img-fluid"위 아래 둘다 같은 뜻style="max-width: 100%; height: auto;" <<height는 default 값Grid 시스템에서 폭이 변하도록 설정할 때 쓴다.
jumbotron
헤더 작업 시 사용, 부트스트랩 4버전까지만 지원
- button
- 등록 버튼
<body><button type="button">등록</button><button type="button" class="btn btn-primary"><i class="fa-regular fa-pen-to-square"></i>등록</button></body>
아이콘 붙인 것 - 버튼 내 아이콘과 등록글자 간격 띄우기
<button type="button" class="btn btn-primary"><i class="fa-regular fa-pen-to-square mr-3"></i>등록 << mr-3 삽입함</button>
primary - 삭제 버튼
<button type="button" class="btn btn-danger"><i class="fa-regular fa-circle-xmark mr-3"></i>삭제</button>
danger - 수평선 하고 아웃라인
<button type="button" class="btn btn-outline-danger"><i class="fa-regular fa-circle-xmark mr-3"></i>삭제</button><button type="button" class="btn btn-link">링크</button><a href="#" class="btn btn-outline-success">이동</a>
btn-outline - 스몰 버튼
<button type="button" class="btn btn-outline-primary"><i class="fa-regular fa-pen-to-square mr-3"></i>등록</button><button type="button" class="btn btn-outline-danger"><i class="fa-regular fa-circle-xmark mr-3"></i>삭제</button>
btn-sm
- a 사용
<a href="#" class="btn btn-success">이동</a>버튼은 inline 태그이므로 정렬을 시키려면 block인 div 클래스로 묶어줘야 한다.
<div class="text-center"><button type="button" class="btn btn-primary"><i class="fa-regular fa-pen-to-square mr-3"></i>추가</button></div>- 그 외에 또 버튼을 블럭으로 쓰는 법
- btn-block
(width:100%) 부모 폭을 100%로 가짐. 사이드메뉴로 많이 씀
<div class="col-sm-3">사이드 메뉴<button type="button" class="btn btn-primary btn-block"><i class="fa-solid fa-right-to-bracket m-2"></i>로그인</button><button type="button" class="btn btn-primary btn-block"><i class="fa-solid fa-user-plus m-2"></i>회원가입</button></div>
btn-block - active / disabled
<button type="button" class="btn btn-primary btn-block active"><i class="fa-solid fa-right-to-bracket m-2"></i>로그인</button><button type="button" class="btn btn-primary btn-block disabled"><i class="fa-solid fa-user-plus m-2"></i>회원가입
active / disabled - badge
태그를 나열하거나 새로운 알림
<td>John <span class="badge badge-danger">new</span></td>
badge 대신 특정 상황에서만 나타나도록 해야 함
<semantic tag>
<div> 태그를 더 가독성있게 시맨틱 태그를 사용해 보자
<div class="container"><header class="jumbotron"> <<header<h1>Jumbo burger</h1><p>점보 버거에 점보트론 적용하기</p></header>
<nav>메뉴 영역</nav> <<nav<div class="row"><div class="col-sm-9"><aside class="col-sm-3"> <<aside사이드 메뉴<button type="button" class="btn btn-primary btn-block"><i class="fa-solid fa-right-to-bracket m-2"></i>로그인</button><button type="button" class="btn btn-primary btn-block"><i class="fa-solid fa-user-plus m-2"></i>회원가입</button></aside></div><footer class="text-center p-3 footer mt-5"> <<footer<i class="fa-regular fa-copyright"></i>2023.7. created by java-backend</footer>
⭐pagination
.pagination
구조가 복잡해서 pdf에서 복사하는 게 낫다.
<body class="m-5"><ul class="pagination"><li class="page-item"><a class="page-link" href="#"><i class="fa-solid fa-angles-left"></i></a></li><li class="page-item"><a class="page-link" href="#"><i class="fa-solid fa-chevron-left"></i></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#"><i class="fa-solid fa-chevron-right"></i></a></li><li class="page-item"><a class="page-link" href="#"><i class="fa-solid fa-angles-right"></i></a></li></ul></body>
arrow pagination page 버튼 테두리를 없애보장
이 테두리는 <li>에 대한 각각의 선이 생긴 것이므로 해당 클래스에 보더리스를 해 주자.
<style>.page-link {border-width: 0px;}</style>부트스트랩의 기본 스타일보다 구체적으로 해야하므로 검사 눌러서 찾아야 함.
border 쟤를 봐야 함. 정렬해 보자
<ul class="pagination justify-content-center">
Breadcrumbs
Cards
ex: 유튜브 썸네일 형식들
<div class="card"><imgclass="card-img-top"alt="Card image"/><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>card는 div class 에서 따로 style로 width를 설정하지 않는 한, 사이즈가 반응형이다.
Navigation Bar
<nav class="navbar navbar-expand-sm bg-light"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link" href="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul></nav>
navigaion-bar sm기준 이상 작아지면 세로로 배열됨
실제 사용할 때는 숨겨지도록 한다.
=>
- 햄버거
화면 사이즈 줄이면 햄버거 버튼으로 만들기
<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#collapsibleNavbar"><span class="navbar-toggler-icon"></span></button>
#=id 이므로 해당 영역을 숨겼다가 펼쳐라 data- :사용자 정의 속성
target : 속성명
햄버거 div 클래스 태그에 id를 부여한 후 button 클래스에서 #으로 id선택자 연결해 준다.
<body><navclass="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center"><a class="navbar-brand" href="#"><i class="fa-solid fa-house mx-2"></i>Backend</a><buttonclass="navbar-toggler"type="button"data-toggle="collapse "data-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="#">Link 1</a></li><li class="nav-item"><a class="nav-link" href="#">Link 2</a></li><li class="nav-item"><a class="nav-link" href="#">Link 3</a></li></ul></div></nav></body>=> 화면 줄이면 link가 없어지고 햄버거버튼 나옴.
- 좌우 정렬하기
<body> <nav class="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center" > <a class="navbar-brand" href="#"> <i class="fa-solid fa-house mx-2"></i>Backend </a> <button class="navbar-toggler" type="button" data-toggle="collapse " data-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="#" ><i class="fa-regular fa-address-book m-1"></i>연락처</a > </li> <li class="nav-item"> <a class="nav-link" href="#" ><i class="fa-regular fa-clipboard m-1"></i>블로그</a > </li> <li class="nav-item"> <a class="nav-link" href="#" ><i class="fa-solid fa-magnifying-glass-plus m-1"></i>친구찾기</a > </li> </ul> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#" ><i class="fa-solid fa-user"></i>로그인</a > </li> <li class="nav-item"> <a class="nav-link" href="#" ><i class="fa-solid fa-arrow-right-from-bracket"></i>로그아웃</a > </li> </ul> </div> </nav> </body>
margin으로 밀기 - 프로필 사진
<style>.avatar-sm {width: 24px;height: 24px;border-radius: 50%;}</style><li class="nav-item"><a class="nav-link" href="#"><imgclass="avatar-sm"/>얼굴</a></li>
원래는 프로필이나 헷갈리므로 로그인이랑 얼굴로 두겠다. fixed Navigation Bar
<navclass="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center fixed-top">fixed-top
fixed-top 🖤sticky top
스크롤 할 때 내려가면 위에 고정되어있다가, 충분히 올라가면 다시 제자리에 있음.
<navclass="navbar navbar-expand-sm bg-primary navbar-dark justify-content-center sticky-top">https://lc.multicampus.com/kdt-developer/#/discoverWidget
https://lc.multicampus.com/kdt-developer/#/discoverWidget
lc.multicampus.com
여기 사이트 메뉴바를 보면 된다.
Form
stacked form
위 이미지에서 타이틀부분엔 텍스트만 쓸 수 있고 아이콘 삽입이 안 됨.
decoration로 해야함
외부 스타일 시트
본문 index <head> 안쪽 style => link로 변경 후 위와 같은 css 파일 링크해 준다.
※ 처음부터 css 따로 지정해 두면 좋으나 뒤에 변경 시 img 파일 위치를 재설정해 줘야 한다.
<link rel="stylesheet" href="css/main.css" /></head><body>이미지 위치를 설정해 보자.
다음의 경우 다양한 방법이 있다. 상대경로, 절대경로
../ 부모폴더
./ 현재 폴더
ㅇㅇ
input
- 검색 기능
- 검색창과 버튼 결합
- media object (부트스트랩 4버전까지만 사용 가능)
댓글, 대댓글
