복습
hello.html
<bootstrap의 활용>
- 외부의 링크를 갖고와서 class로 추가하기
- 링크 작성하면 요청해서 백그라운드로 받아오고 css 로 해석해서 사용가능
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.css">
</head>
<body>
<div class="container">
<h1>hello, bootstrap!</h1>
<button class="btn btn-primary">버튼1</button>
<button class="btn btn-success">버튼1</button>
<button class="btn btn-info">버튼1</button>
<button class="btn btn-warning">버튼1</button>
<button class="btn btn-danger">버튼1</button>
<button class="btn btn-secondary">버튼1</button>
</div>
</body>
bootstrap
반응형 레이아웃(media쿼리)
@media쿼리
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.css"
- 반응형 레이아웃
- 화면의 크기마다 다른 웹브라우저 크기
- class의 이름(sm, md,... )
media 쿼리의 구간
576 sm 768 md 992 lg
media 쿼리의 조건성
- if 화면의 폭이 576px 이하이면 미디어쿼리는 존재하지 않음
반응형 실습
responsive.html
<mt의 단계>
- 위쪽 마진을 bootstrap를 이용해서 정하기
단계(1,2,3,4,5) = px 크기: 4 8 16 24 48
<col-6의 의미> - bootstrap은 화면을 12등분 설정이 기본 col-6은 width은 50%임
- .col-6{width :50%}
- 768px 이상이면 화면의 12등분을 6개로 나누어서 width는 50%로 2개씩 배치이다!
- 992px 이상이면 화면의 12등분을 3개로 나누어서 width는 25%로 4개씩 배치이다!
- img-fluid: max-width:100%, height:auto
- img-thumbnail : 1px border appearance
<div class="row">
<div class="col-md-6 col-lg-3">
<img class="img-fluid img-thumbnail" src="https://picsum.photos/seed/picsum/500/300" > <!--overflow 자식이 부모의 영역을 넘어가는 것-->
</div>
<div class="col-md-6 col-lg-3">
<img class="img-fluid img-thumbnail" src="https://picsum.photos/seed/picsum2/500/300" >
</div>
<div class="col-md-6 col-lg-3">
<img class="img-fluid img-thumbnail" src="https://picsum.photos/seed/picsum3/500/300" >
</div>
<div class="col-md-6 col-lg-3">
<img class="img-fluid img-thumbnail" src="https://picsum.photos/seed/picsum5/500/300" >
</div>
</div>반응형 실습
grid.html
<div class="row justify-content-md-center">
<div class="col-md-auto">abcde</div>
</div>- auto 클래스는 콘텐츠 크기에 의존하기 때문에 너비를 고정하지 않음
반응형 페이지 이해하기
bootstrap의 여러 요소
- Gutter width : 별다른 설정이 없어도 요소끼리 떨어져 있음
- 요소가 먼저 설정된 것부터 가지고 그 이후에 나머지 요소끼리 나눠서 가짐
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>- 자식요소는 부모 요소를 상속받는다!
<div class="container text-center">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>- 칼럼 나눈 걸 또 12개로 나눌 수 있음
<div class="container text-center">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="col-sm-9">
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
row 정렬
column.html
- row에서 부모의 크기가 확보되어야 가능함
<부모가 자식의 정렬을 결정했음>
<div class="container">
<h3>칼럼 정렬 테스트</h3>
<div class="row align-items-start">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row align-items-center">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
<div class="row align-items-end">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div> <자식요소가 그냥 결정했음>
<div class="row">
<div class="col align-self-start">1</div>
<div class="col align-self-center">2</div>
<div class="col align-self-end">3</div>
</div><좌우 정렬 및 위 아래 정렬>
<div class="row justify-content-center align-items-start"><!--좌우 정렬-->
<div class="col-2">1</div>
<div class="col-2">2</div>
<div class="col-2">3</div>
</div>
좌우정렬: row justify-content-center
상하정렬: align-items-start
row 정렬하기 (order-sm-last)
column2.html
- sm(576) 이상이면 lsat 내리기(= 그 이하면 ul> li 요소 위로 올리기)
<div class="container">
<h1>인덱스 페이지 입니다</h1>
<div class="row">
<div class="col-sm-4 order-sm-last">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</nav>
</div>
<div class="col-sm-8">
<main>
<p>main 컨텐츠 입니다 어쩌구... 저쩌구...</p>
</main>
</div>
</div>
</div>내가 원하는 동작 추가하기
<vs code에서 원하는 코드 자동 완성 사이트>
https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode
<vs code에서 원하는 코드 자동 완성 등록>
file -> preference -> configure snippets -> "html" -> html.json
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}alert
alert.html
- javascript를 백그라운드에 받아오고 data-bs-dismiss="alert"로 관련 자바스크립트 실행
- 외부 자바스크립트 가져와서 해석해줄게! / 규정에 맞게 작성하면 자바스크립트를 가져와서 동작
- 리액트는 가져오는 자바스크립트 언어가 따로 존재함
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>요소를 연결
줄정리 : alt + shift + f
modal
- data-bs-toggle ="modal"을 작성해야만 javascript가 작동됨
- data-bs-target ="#exampleModal" + id ="exampleModal"로
버튼을 누르면 자바스크립트가 실행된다!
<bootstrap document 파트>
<질문>
1. 부트스트랩으로 이미지 조정
- overflow 자식이 부모의 영역을 넘어간다면 => img-fluid
<작성순서>
responsive.html v
grid.html v
column.html v
column2.html v
alert.html v
modal.html
<시험>
12 12
select insert update delete v
emp dept
서브쿼리 v
조인 v
부트스트랩 2개
하이하잉