[TIL 12] 부트스트랩, Fontawesome

nini·2025년 3월 21일
CSSJavaScriptKBKB it's your lifeTILbootstrapfontawesomehtmlweb

KB IT's Your Life

목록 보기
12/40

부트스트랩

https://www.w3schools.com/

기초

기본 영역 잡기
.container

  • 반응형이지만, 특정 화면 크기에서 최대 너비가 고정됨
  • 사용 예시: 대부분의 웹사이트에서 적절한 여백을 유지하는 레이아웃을 원할 때 사용
  • 작동 방식: 화면 크기에 따라 아래와 같이 최대 너비가 고정됨
    • Small≥576px(최대너비 540px): smartphone
    • Medium≥768px(최대너비 720px): tablet
    • Large≥992px(최대너비 960px): PC

.container-fluid

  • 화면 크기와 상관없이 항상 너비가 100%
  • 사용 예시: 전체 화면을 꽉 채우는 디자인이 필요할 때 사용
  • 작동 방식: 어떤 화면 크기에서도 전체 너비를 차지

✔ 웹사이트 콘텐츠가 일정한 폭을 유지해야 한다면 → container
✔ 헤더, 푸터처럼 화면 전체를 차지해야 한다면 → container-fluid


Container Padding
✅ 기본적인 패딩 → p-*(전체), pt-*(위쪽), pb-*(아래쪽), px-*(좌우), py-*(상하) 사용
✅ 특정 방향에 패딩 추가 → pt-5, px-3 등 활용
✅ 전체적인 여백을 조정 → p-*, m-* 조합
✅ 더 세밀한 조정이 필요 → CSS 커스텀 적용 가능

container pt-* 

  • 컨테이너의 위쪽에 여백을 추가하는 클래스

Grid

  • 한 행을 12개의 컬럼으로 구분
  • 컬럼 그룹핑 가능
  • 행 정의 클래스 .row
  • 컬럼 정의 클래스
    • .col-* 576px 미만
    • .col-sm-* 576px 이상
    • .col-md-* 768px 이상
    • .col-lg-* 992px 이상
    • .col-xl-* 1200px 이상
    • .col-xxl-* 1400px 이상

균등 분할

<div class="row">
	<div class="col">.col</div>
	<div class="col">.col</div>
	<div class="col">.col</div>
</div>

반응형 컬럼

  • 브라우저의 폭에 따라 컬럼 그룹핑 변경
  • sm까지는 컬럼 3개를 그룹핑
  • sm 미만이면 1줄에 1개 컬럼
<div class="row">
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
	<div class="col-sm-3">.col-sm-3</div>
</div>
윈도우 크기를 줄인 경우 일반 크기

비균등 분할

<div class="row">
	<div class="col-sm-4">.col-sm-4</div>
	<div class="col-sm-8">.col-sm-8</div>
</div>

텍스트 출력 관련 클래스

종류클래스
정렬text-start, text-center, text-end
색상text-primary, text-danger, text-success
크기fs-1 (큰 글씨) ~ fs-6 (작은 글씨)
대소문자 변환text-uppercase, text-lowercase, text-capitalize
줄바꿈text-wrap, text-nowrap
말줄임표(...)text-truncate
글꼴 스타일fw-bold, fw-light, fst-italic

텍스트 색상 text-{color}

  • .text-primary(b), .text-success(g), .text-warning(y), .text-danger(r) 등

배경 색상 bg-{color}

테두리 색상 border-{color}

불투명도 조절 opacity-{value}

그라디언트 효과 bg-gradient

Table

  • .table width가 100%라는 특징(기본으로 써줘야 함)

  • Striped Rows(얼룩말 효과) .table-striped

  • 테두리 .table-borderd

  • 테두리 없애기 .table-borderless

  • Hover 효과 .table-hover

    <table class="table table-hover">
	<thead>
	…
	</thead>
	<tbody>
	…
	</tbody>
</table>

  • 어두운 배경 .table-dark

  • 상황별 배경색 .table-{color}

  • 작은 표 .table-sm

  • 반응형 테이블 .table-responsive

    • 부모 태그에 배정
    • 테이블이 부모보다 큰 경우 스크롤 바 생성

기본 요소

  • 이미지 .rounded .rounded-circle .img-thumbnail

  • 반응형 이미지 .img-fluid

  • Jumbotron?

    • Bootstrap에서 제공하는 스타일링 요소로, 웹페이지에서 중요한 콘텐츠(예: 소개 문구, 공지사항 등)를 강조하는 큰 박스 형태의 UI 요소
🌱 Jumbotron의 특징
- 페이지에서 눈에 띄는 큰 배경과 텍스트 제공
- 일반적으로 배경색이 연하고, 안쪽에 패딩(padding)이 적용됨
- 반응형(responsive)으로 작동
- 사용자가 원하는 스타일을 추가적으로 적용 가능
<div class="mt-4 p-5 bg-primary text-white rounded">
	<h1>Jumbotron Example</h1>
	<p>Lorem ipsum...</p>
</div>
  • 부트스트랩 4에서는 .jumbotron 클래스로 제공되었지만, 부트스트랩 5에서는 공식적으로 제거됨

➡️ 대신, 위처럼 여러 클래스를 조합하여 사용


Alert

  • .alert

    • 메시지 출력 영역
    • 상황별 색상 배정 가능 .alert-success .alert-warning 등

  • alert-link alert 영역에 링크 표시

<div class="alert alert-success">
	<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.
</div>
  • alert-dismissible 닫기 버튼 연동
<div class="alert alert-success alert-dismissible">
	<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
	<strong>Success!</strong> This alert box could indicate a successful or positive action.
</div>
  • .fade .show 사라질 때 애니메이션 효과 주기

Button

  • .btn 버튼 모양

    • <input>, <a>, <button> 태그에 적용 가능

  • .btn-* 상황 색상 지정 가능

  • btn-outline-* Outline button

  • Button 크기?

    • btn-lg btn-sm
    • w-100 버튼이 너비 100% 차지

  • 블록 레벨 버튼

    <div class="d-grid gap-3">
	<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>
</div>

  • 액티브/비활성화 .active .disabled

    <button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>

  • 스피너 버튼 - 로딩을 나타내는, 애니메이션이 되는

    <button class="btn btn-primary">
	<span class="spinner-border spinner-border-sm"></span>
	Loading..
</button>

  • 버튼 그룹

    • .btn-group, .btn-group-vertical
    • .btn-group-lg, .btn-group-sm
<div class="btn-group btn-group-lg">
	<button type="button" class="btn btn-primary">Apple</button>
	<button type="button" class="btn btn-primary">Samsung</button>
	<button type="button" class="btn btn-primary">Sony</button>
</div>

  • badge .badge .badge-컬러

  • Pill Badges .rounded-pill

목록 관리

페이지네이션

  • .pagination

    • .page-item
    • .page-link

  • .active

    • 현재 페이지인 경우에 쓰임(프로그래밍 요소, 루프 도는 것도)
<ul class="pagination justify-content-center" style="margin: 20px 0">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item active"><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="#">Next</a></li>
</ul>

  • .disabled

  • 크기조정 .pagination-lg .pagination-sm

  • 정렬(default 좌측정렬)

    • .justify-content-center .justify-content-end

→ 테이블이랑 같이 많이 쓰임


Breadcrumbs

  • 가로 배치하고, /로 나눠주는 것
  • .breadcrumb
    • .breadcrumb-item

리스트 그룹

  • .list-group

    • .list-group-item

  • <a> 태그로 목록 구성

  • .list-group-item-action 클릭 가능한 리스트 만들 때

<div class="list-group">
	<a href="#" class="list-group-item list-group-item-action">First item</a>
	<a href="#" class="list-group-item list-group-item-action">Second item</a>
	<a href="#" class="list-group-item list-group-item-action">Third item</a>
</div>
  • .list-group-flush 테두리 없는 깔끔한 리스트 만들 때(수평선만 넣고 싶을 때)

Card

  • .card

    • .card-header
    • .card-body
    • .card-footer

  • .card-body 를 많이 사용

    • .card-title
    • .card-text
    • .card-link

  • 이미지

    • .card-image-top .card-image-botton
    • .card-image-overlay 이미지와 텍스트 중첩

→ card는 주로 grid의 colmn안에 들어감(주로 grid와 연계)

네비게이션

  • 페이지네이션

    • .navbar .navbar-expand-sm

  • 네비게이션

    • .justify-content-center 중앙 정렬
    • .bg-primary navbar-dark 배경색(bg), context(navbar)

  • 로고와 서브 메뉴

    <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
	<div class="container-fluid">
		<a class="navbar-brand" href="#">Logo</a>
		<div class="collapse navbar-collapse" id="collapsibleNavbar">
			<ul class="navbar-nav">
					…
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="#" role="button"
						data-bs-toggle="dropdown">Dropdown</a>
					<ul class="dropdown-menu">
						<li><a class="dropdown-item" href="#">Link</a></li>
						<li><a class="dropdown-item" href="#">Another link</a></li>
						<li><a class="dropdown-item" href="#">A third link</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</nav>

  • 햄버거 메뉴

    • 폭이 좁아졌을 때 메뉴를 숨기고 overflow menu button을 보여줌

      <nav class="navbar navbar-expand-sm bg-dark navbar-dark"> // sm, breakpoint
	<div class="container-fluid">
		<a class="navbar-brand" href="#">Logo</a>
		<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
				data-bs-target="#collapsibleNavbar"> // 아이디를 잘 맞춰줘야 함, 언제 토글을 할지
				// data- 사용자 정의 속성
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="collapsibleNavbar"> // id
			<ul class="navbar-nav">
					…
			</ul>
		</div>
	</div>
</nav>

  • 폼과 버튼 넣기

    • mx-auto = margin:0 auto

  • 메뉴 고정 시키기

    • fixed-top fixed-bottom
    • 주로 대시보드 같은 걸 만들 때 사용
    • sticky-top 스크롤 되다가 메뉴가 상단에 붙으면 거기에 고정됨(스크롤은 계속 됨)

Form

  • form 엘리먼트 구성요소

    • .form-control
      • form 엘리먼트에 배정하는 클래스
      • width 속성이 100%
    • .form-control-lg, .form-control-sm
      • 크기 설정 클래스

  • select .form-select

  • checkbox, radio

    • width 100%이므로 기본 세로 배치
    • .form-check
    • .form-check-input
    • .form-check-label
<div class="container mt-3">
	<form>
		<div class="mb-3 mt-3">
          <label for="title">제목</label>
          <input class="form-control" id="title" />
        </div>
        <div class="mb-3 mt-3">
          <label for="name">작성자</label>
          <input class="form-control" id="name" />
        </div>
        <div class="mb-3 mt-3">
          <label for="context">내용</label>
          <textarea class="form-control" id="context" rows="5"></textarea>
        </div>
	</form>
</div>

flex

  • 부모가 있고, 자식을 어떻게 배치를 할 것이냐의 문제

  • flex

    • 부모: d-flex
    • 자식: 디폴트 블럭 → 인라인 블럭으로 바뀜(폭은 컨텐츠 크기가 결정, 줄이 안 바뀌고 가로로 배치)

  • 수평 방향

    • 부모: .flex-row .flex-row-reverse

  • 수직 방향

    • .flex-colums .flex-column-reverse
    • 메인 축의 방향을 바꾸기
    • reverse는 주로 스마트폰 전용일 때 많이 사용

  • 정렬

    • justify-content-start 디폴트
    • justify-content-end 우측 정렬
    • justify-content-center 중앙
    • justify-content-between 동일한 간격
    • justify-content-around between과 비슷하지만 양끝에도 여백을

  • 균등 채우기 폭 .flex-fill

    • 부모는 d-flex, 자식에게 flex-fill

  • 나머지 채우기 .flex-grow-1

    <div class="d-flex">
	<div class="p-2 bg-info">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>

  • 자동 마진

    • ms-auto → 왼쪽 마진 자동 설정 → 요소를 오른쪽으로 정렬(margin start auto) 자동으로 왼쪽 여백을 최대로 확보 → 오른쪽 정렬됨
    • me-auto → 오른쪽 마진 자동 설정 → 요소를 왼쪽으로 정렬(margin-end auto)
<div class="d-flex bg-secondary">
	<div class="p-2 bg-info">Flex item 1</div>
	<div class="p-2 bg-warning">Flex item 2</div>
	<div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>

Utilities, Flex

  • 경계선 border

    • border border-top-0 : 위 없애기
    • border-top : 위에만 그리기
    • border border-4 : 굵기 조정
    • border border-primary : 색상
    • rounded-circle: 모양

  • Float/Clearfix

    • .clearfix 부모 요소가 float된 자식 요소들을 감싸도록 함 (높이 유지)
<div class="clearfix"> 
  // .clearfix 클래스가 적용된 div 컨테이너
  // 내부에 float 속성이 있는 요소들이 있어도 부모 요소(div)의 높이가 정상적으로 유지되도록 함
	<span class="float-start">Float left</span> // 왼쪽 정렬
	<span class="float-end">Float right</span> // 오른쪽 정렬
</div>
  • 여백
    • 종류
      • m: margin
      • p: padding
    • 방향
      • t: top, b: bottom, s: start, e: end, x: 좌우 사이드, y: 상하 사이드
    • 여백 크기

Fontawesome

무료로 사용할 수 있는 아이콘 폰트

https://fontawesome.com

https://fontawesome.com/search?ic=free

Fontawesome CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
	integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
	crossorigin="anonymous"
	referrerpolicy="no-referrer"
/>
<link
	href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
	rel="stylesheet"
/>
<!-- 스타일 마지막에 나의 css 파일 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- 나의 js 파일 -->

font-awesome, css, js 순서로

위 이미지처럼 이것저것 아이콘들 넣고 싶을 때 활용 가능 
<i class="fa-solid fa-house"></i>
// 폰트임. 그래서 폰트의 속성에 맞게 조정 가능
<button class="btn btn-primary">
	<i class="fa-solid fa-check-double"></i> 확인
</button>
// 확인 버튼 예시

https://noonnu.cc/font_page/pick

눈누 사이트 폰트

profile
nini
사용자를 고려한 디자인과 UX에 관심있는 개발자
이전 포스트

[TIL 11] Vue 인스턴스, 이벤트 처리

다음 포스트

[TIL 13] 스타일 적용

0개의 댓글