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