마트철수
[013] Bootstrap5 홈페이지 제작하기 본문
2024.05.24(금)
조금 이해가 쉬웠던 단원..
풀지 못한 문제도 있어서주말에 풀기!
.
.
.
교육: Bootstrap 사용하여 홈페이지 제작
이전 내용 복습
CDN(Conten Delivery Network)
컨텐트, 딜리버리, 네트워크
다운로드 받지 않고 사용 가능
느리지 않다 → Cache(캐시)되기 때문
Cache: 소형 고속 기억 장치
[Bootstrap5 - 기초]
기초
기본 골격
변수 이름을 한글자로 줄임
→ 속도 빨라짐
→ min해진 파일로 해석이 어려워지기도 함 (어글리 파일)
.js 빠트리지 않도록 주의!
▲ 필수로 넣어야지 해석됨
기본영역잡기
.container
메인영역을 잡을 때 주로 쓰는 클래스
.container-fluid
전체 폭 100% 사용(반응형 아님)
Container Padding
p: padding / m: margin
pt: 탑, 위쪽 / pb: 바텀, 아래 / ps: 스타트, left / pe: 엔드, right / mx: x축, 좌우 / my: y축, 위아래
Grid
반응형 페이지를 만들때 중요한 클래스
한 행을 몇개의 칼럼으로 운영할래?
Grid class
.row 태그가 붙으면 → grid로 운영할거구나!
ex)col-sm-4와 col-sm-8이면 딱 12에 맞춰 운영하는것
색상 클래스
*이미지 참고
[Table]
table 형태 혹은 card 형태로 많이 쓰임
card 예시: 유튜브
table은 화면이 넓직할 때 사용
테두리: .table-borderless
Hover 효과: .table-hover ... 마우스가 올라오면 효과 재생
어두운 배경: .table-dark ... 상황별 배경색 지정 가능
작은 표: .table-sm ... 패딩을 줄여서 콤팩트한 사이즈로 조정 가능
반응형 테이블: .table-responsive ... 스크롤 바 생성
이미지: .rounded, .rounded-circle, .img-thumbnail
반응형 이미지: .image-fluid ... 부모의 크기에 맞게 자동 조정/디폴트값: max-width: 100% 지정
Jumbotron: 보통 헤더 만들때 주로 쓰임
Alert
.alert ... 메세지 출력할때 / 상황별 색상 배정 가능
.alert-link ... alert 영역에 링크 표시
.alert-dismissible ... 닫힘 버튼 추가, 알림창을 사라지게 할 수 있다
data-ds ... 사용자 지정 대쉬 (부트스트랩에서 운영하는 속성)
클릭했을 때 사라지니깐 -> 자바스크립트가 개입함
Button
.btn ... 버튼 모양 <input> <a> <botton>
.btn-* .. 상황 색상 지정 가능
Online button: .btn-outline-* ... 아웃라인을 설정해줌
Button 크기: .btn-lg ... 버튼 크기를 설정해줄 수 잇음
스피너 버튼: spinner-border ... 애니메이션 되는 버튼(빙글빙글)
버튼 그룹: btn-group, .btn-group-vertical ... 그룹 버튼 제작 가능
실습: 참고사이트
네비게이션 ~ 자료부터는
직접 홈페이지를 만들어보면서 복습하려고 합니다!
(13일차 메모장 참고)
참고 사이트:
Bootstrap 5 Tutorial (w3schools.com)
Bootstrap 5 Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.
fontawesome.com
Material Symbols & Icons - Google Fonts
Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design variants.
fonts.google.com
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
tailwindcss.com
▲너무 세밀화시켜서 클래스가 많아짐
피드백
책을 읽으면서 복습하는 것은 나한테 맞지 않고 ..
수업시간에 타자 친 것은 다시 읽어보지 않으니 ..
수업시간 내용 -> 복습에 도움이 될 방법
티스토리에 줄글로 작성하지 않은 방법
위 두가지 방법을 고민해보았다 ..
1. 수업시간:
메모장으로 강사님 말씀 빠짐없이 작성
단, 이해하면서 작성
2. 쉬는시간:
해당 내용 블로그로 이동
중요내용 표시하여서 !
3. 복습:
유튜브 활용해서 직접 만들어보기
'KB IT's Your Life > 교육' 카테고리의 다른 글
| [015] Vue.js 단일 파일 컴포넌트 (0) | 2024.05.28 |
|---|---|
| [014] Vue.js Todolist 만들기 (0) | 2024.05.27 |
| [012] Vue.js 기초와 Template (1) | 2024.05.24 |
| [011] KB IT’s Your Life - ES6 (0) | 2024.05.23 |
| [010] 깃/깃허브 특강2 (1) | 2024.05.22 |
