Bootstrap 활용: 그리드·컴포넌트·반응형 레이아웃 실전

2021-11-03 2 분 소요

본 글은 패스트캠퍼스의 “한 번에 끝내는 파이썬 웹 개발 초격차 패키지” 강의를 개인 실습하여 따라 한 것입니다.
기타 완성용 파일을 원하시는 분은 https://github.com/ParkYoungWoong/bootstrap5-github-landing 링크로 가주시면 됩니다.

부트스트랩

앞서 복습.

<div class="btn">Click!</div> : btn은 button의 약어이다.
display: : 요소가 화면에 보여지는 특성
cursor: pointer; : 눌러보는 커서로 바꿈

프로젝트 생성

하나의 요소에는 여러 개의 class를 넣을 수 있다.
부트스트랩을 도입하면 이미 구현이 되어져 있는 UI를 프로젝트에 가져올 수 있다.
Layout - Containers

Layout - Columns

-<div class="row"></div> : row는 하나의 줄을 의미 (줄 = 행)

하나의 행당 12개의 열이 기본적으로 차지.
class="col-3 col-md-7 box" : 총 3개의 class를 가지고 있다.
- md 는 medium의 약자. viewport의 가로가 medium이 될 때

Forms

placeholder : 칸에 힌트를 주는
value : 미리 입력된 값
disabled : 비활성화 처리

sass (scss) : css 전처리기

css가 처리되기 전에 처리할 수 있는 또 다른 스타일 작업할 수 있는 도구

Components

버튼을 만들 때는 div보다 button 태그로 만든다.
Offcanvas : 숨겨져 있는 네비게이션을 쓸 때 사용
toggle : 껐다 켰다를 반복함

Utilities

d-none == display: none
어디까지나 유틸은 편리성을 위한 작성된 것.

github 예제로 실습

favicon' : favorite icon의 약어 (html)
rel : relation의 약어 (html)
- rel:"icon" : icon을 가져온다.
link : 외부에서 특정한 문서를 가져올 때 (html)
stylesheet : css파일을 가져올 때 쓰는 명칭 (html)

font-family : 글꼴 설정 (css)
- sans-serif : 고딕체
font-weight : 글꼴의 가중치(두께)

<a calss="logo" href="#"> : #은 경로가 아직 준비되지 않았다를 의미
<ul class="nav"></ul> : nav = navigation (내부 경로)
align-items: center : 수직 정렬을 가운데로
padding-top: : 요소의 위쪽 내부 여백
padding-bottom: : 요소의 아래쪽 내부 여백
me-2 : margin end(=right) (bootstrap)
text-light가 li 태그에 있는데 a태그에 이미 색깔이 부여되어 있으므로 적용 X -> 바로 a태그에 붙여준다.

CSS를 건드리지 않아도 부트스트랩으로 테마 적용할 수 있다.

flex-grow : 증가 너비의 비율

d-flex : 수평으로 맞춰줌

flex-shrink-0 : 감소 너비의 비율 (default = 1)

text-decoration-none : 텍스트에 줄을 넣는 속성인데 제거하겠다.
me-2 : 오른쪽 여백 2 추가

rgba() : red, green, blue, alpha

Hero Contents

form : 양식
input은 크기가 옆으로 늘어난다. 그에 반해 button은 딱 글자 크기만큼만!

padding-top : 여백 위쪽 지정
padding-down : 여백 아래쪽 지정
letter-spacing : 글자와 글자 사이의 간격을 의미 (-는 서로 좁혀진다.)
<p class="text-white-50"> : 50%의 색이 빠져있는 화이트 (html)

<div class="col-7"> : 12개의 column 중에 7칸 차지 (row 안에서)

<div class="d-grid"> : 최대한 늘어날 수 있게

position: relative; : 기준이 되는 요소 (css)
position: absolute; : 배치가 될 요소 (css)
transform: translate(); : 요소의 위치를 변환시켜주는 함수 (이동)
overflow: hidden; : 컨테이너 영역 안에 만큼만 보이게 (넘친 건 숨긴다.)

glow : 번짐 효과

youtube

유튜브의 영상 비율은 기본적으로 16:9이다.
border-radius: : 모서리를 둥글게 깎아 준다.
css에서 부모요소는 위쪽에 작성한다.

Features

<div class="col-3"> : col이 3칸을 차지 (기본적으로 row는 12칸 차지)

strong : 글씨를 두껍게 만들어 준다.
padding: 30px 60px; : 패딩은 내부여백을 뜻함. 첫번째 30px은 위아래. 60px은 좌우를 동시에 지정

Google Maps

# : css의 id 선택자는 #으로 시작
- <div id="map"></div>
id는 고유한 번호(중복X). css에서는 #map으로만 명시해줘도 된다. (조상요소 선택할 필요 없다.)
자바스크립트의 ?는 쿼리스트링으로 주소부분에 데이터를 태워서 전송할 수 있다는 의미. (key는 파라미터)
- &는 다음 파라미터를 입력 (callback)
const로 변수를 만듦 (하나의 객체 데이터 할당)
new : 생성자 함수

footer는 구분하는 태그
webp 파일 확장명은 구글에서 만든 거임
container : 어떤 특정한 영역을 화면에 가운데로 정렬시켜주는 역할
width: 100%; : css에서 illustration에서 가지고 있는 이미지는 커서 container보다 넘쳐서 출력이 됐었는데 그 이미지의 container 너비 만큼 (100%) 지정
transform: scale(-1,1); : 이미지의 크기를 x, y축으로 지정. -1은 x축기준으로 반전 효과
opacity : 투명도

class="list-unstyled" : ul과 li 스타일이 제거된다.
a 태그는 기본적으로 파란색 글씨로 적용되어 있음
class="text-decoration-none" : 밑줄을 제거
- text-decoration: none; : css에서 이 코드를 적용하면 관련 요소 다 적용됨.
transition : 몇 초에 걸쳐서 자연스럽게 변화할 것인가 (css) (전후 상태)
d-flex : 수평 정렬 (html)

display: flex; justify-content: center; 적용 후

margin-right: 20px; : 우측으로 여백이 요소사이에 20만큼 각각 생성
href : 클릭하면 링크따라 이동
margin: 0; : 마진 초기화

반응형 - @media

예제

@media (max-width: 600px) {
  .box {
    width: 200px;
    height: 200px;
    background-color: orange;
  }
}

max-width: 뷰포트의 가로 너비 (~~px 이하일 때)
min-width : ~이상 일 때
all : 모든

반응형 - Offcavnas

display : 화면에 보여지는 특성
flex-grow: 1; : 차지하는 영역이 최대한 늘어남
ms-2 : 외부여백이 2만큼 증가

mb-4 : margin-bottom 4를 채워줌
col-lg-7 : 뷰포트가 Large Size 보다 크면 컬럼을 7개 사용한다.
- <div class="col-lg-7 col-12"> : 뷰포트가 large size보다 크지 않을 때 12개를 쓴다.

최종 완성본

https://github.com/ingu627/bootstrap5-github-landing

Reference

KakaoTalk Twitter Facebook LinkedIn

ingu627 🔅