Bootstrap(부트스트랩) 기초 실습

본 글은 패스트캠퍼스의 “한 번에 끝내는 파이썬 웹 개발 초격차 패키지” 강의를 개인 실습하여 따라 한 것입니다.
기타 완성용 파일을 원하시는 분은 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 : 글꼴의 가중치(두께)

Header

• <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

• 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

• fastcampus
• bootstrap 공식링크