학원 몇 시 도착이더라 오자마자 sql 문제 마저 풀다가 수업 들음.
<9:30 1교시>
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css
이 페이지를 누르면 저 주소의 서버에 관련 CSS 파일을 요청하게 된다.
페이지를 열어보면 공백과 개행이 없는 css 코드가 주르륵 나오는데, 공백과 개행이 없어서 웹페이지 로딩 시간이 적다.
코딩할 때 들어가는 공백과 개행 기호들(\n, \t 등)은 사람이 보기 편하려고 쓰는거지 컴퓨터 입장에선 이런 기호들이 필요가 없다.
https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.css
이 페이지를 누르면 공백과 개행이 있는 css 코드가 보기 좋게 쭈르륵 나온다.
부트스트랩에 존재하는 반응형 웹페이지를 만드는 원리를 볼 수 있는 예시.
미디어쿼리 안에 있는 구간의 이름 같은 것(sm, md, lg, xl, xxl 등)은 항상 존재하는 것이 아니라 조건부로 존재해서, 웹브라우저 화면의 폭이 조건을 만족할 때 존재해서 적용됨.
small 디바이스, medium 디바이스, large 디바이스, xlarge 디바이스, xxlarge 디바이스 등의 이름을 알아둬야 반응형 웹페이지를 고민할 수 있음.
(xlarge나 xxlarge는 티비 같이 큰 모니터로 컴퓨터 화면을 보려고 할 때 같은 경우 미처 못보여주는 그런 느낌)
부트스트랩에 존재하는 여러 CSS 코드를 살펴보면 CSS를 공부하기 좋겠다 싶다.
<10:30 2교시>
반응형 페이지 만들어보기
row 클래스의 col의 원래 가지고 있는 display flex 속성이라는 뭐시기는 화면을 균일하게 나눠 갖게 해줄 뿐이라고 한다.
위에 스샷에서 빨간색 테두리를 가지고 있는 애들만 col의 미디어쿼리 속성을 부여하지 않은 상태라고 보면 된다.
그런데 이제, "col-6" 외에 "col-sm-6"이라던가 "col-sm 6 col-md-3"같은 클래스 속성이 추가되면 미디어쿼리 속성이 있는 클래스들이라서 반응형 웹페이지로서 동작하게 된다.(자세한 내용은 더보기의 코드 참고)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive</title>
<link rel = "stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
.col{
border : 1px dotted red;
}
</style>
</head>
<body>
<div class="container">
<h1>반응형 페이지 만들기</h1>
<h2>하나의 row를 동일한 width의 4개의 칼럼으로 구성하기</h2>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>
<br>
<h2>하나의 row를 동일한 width의 4개의 칼럼으로 구성한 거에 콘텐츠를 집어 넣기</h2>
<!--이상태로는 화면이 그냥 폭을 균일하게 나눠갖기만 할 뿐, 내용을 가지고 반응하지 않는다-->
<div class="row mt-5">
<div class="col">
<h3>제목1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col">
<h3>제목2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col">
<h3>제목3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col">
<h3>제목4</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
</div>
<div class="row mt-3">
<!--"col-6"의 의미는 화면 폭을 12등분해서 그중 6개 칸을 차지하겠다의 의미라 결국 50%라는 의미-->
<div class="col-6">
<h3>제목1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-6">
<h3>제목2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-6">
<h3>제목3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-6">
<h3>제목4</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
</div> <div class="row mt-3">
<!--"col-sm-6"의 의미는 화면 폭이 576px 이상일 때만 50%를 적용하겠다. 화면 폭이 576px보다 작으면 div가 block 요소이기 때문에 100%를 다 차지할 것이다.-->
<div class="col-sm-6">
<h3>제목1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-sm-6">
<h3>제목2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-sm-6">
<h3>제목3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-sm-6">
<h3>제목4</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
</div>
<div class="row mt-3">
<!--"col-sm-6 col-md-3"의 의미는 화면 폭이 576px 이상일 때 50%를 적용하고, 화면폭이 768px이상일 때는 25%를 적용하겠다-->
<div class="col-sm-6 col-md-3">
<h3>제목1</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-sm-6 col-md-3">
<h3>제목2</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-sm-6 col-md-3">
<h3>제목3</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
<div class="col-sm-6 col-md-3">
<h3>제목4</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sint eaque quis numquam quasi perferendis fugiat maxime, necessitatibus officiis voluptates aspernatur exercitationem quisquam itaque. Soluta ducimus nostrum pariatur possimus eos!</p>
</div>
</div>
</div>
</body>
</html>
<11:30 3교시>
마지막 이미지가 col에서 벗어난 부분(overflow)를 없애주려면 img의 class에 img-fluid를 추가해서 유동적인 이미지가 되어 img width가 알아서 100%가 되도록 한다.
img-thumbnail 을 추가하면 외곽에 테두리가 생기면서 썸네일 형식으로 나타난다.
<11:50 ~ 점심 시간 전>
각자 bootstrap css 미리 각자 학습하기
1. Layout : Breakpoints, Containers, Grid, Columns
2. Forms
1. Layout
① Breakpoints
: 우리가 배운 sm, md, lg 등 조절 가능한 기준 폭들을 브레이크포인트라고 하고 이것은 반응형 웹 디자인의 설계 단위가 됨.
미디어 쿼리를 사용해서 CSS의 브레이크 포인트를 부여할 수 있는데 부트스트랩에서 보통 min-width를 미디어 쿼리로 사용한다.
어쨋든 그냥 아래 표의 수치들을 염두에 두면 된다.
컨테이너의 폭이 12의 배수로 되어 있는 것에 대해서 편리하게 사용할 수 있는 픽셀 값들이 설정되었다고 함.
scss/_variables.scss 스타일시트로 이동해서 Sass 맵을 변경하면 각자 커스터마이징도 가능한데, 선생님말씀으론 표준을 해놓은걸 굳이...라고 하심.
미디어 쿼리에 대한 설명
미디어쿼리는 min-width에서 시작해서 요소들이 점점 커졌을 때의 상황을 고려하며 만들어졌다는 듯.
부트스트랩에서는 아래와 같은 미디어 쿼리들을 Sass에서 정의한 것으로 보임.
그리고 이런 Sass들은 CSS로 해석될 때 다음과 같이 해석됨.
간혹, 큰사이즈에서 작은 사이즈로의 변환을 추구할 때는 max-width를 미디어 쿼리로 사용하는데, 그때 브레이크 포인트의 픽셀 값들은 0.02px 씩 빼준다고 함.(이유 : 현재 브라우저가 range context queries를 지원해주지 않아서라고 함.대충 최대값 최소값을 헷갈려해서 더 정확하게 표현해주려고 라는 의미인듯)
아래는 하나의 브레이크 포인트만 사용할 때와 브레이크 포인트 사이를 표현하여 사용할 때인듯
② Containers
컨테이너는 포함하고, 경계짓고, 콘텐츠를 정렬하는 가장 기본적인 설계 단위로 사용된다고 한다.
이것은 부트스트랩의 Grid 기능을 사용하기 위해서는 필수적으로 써야하는 단위 요소이다.
부트스트랩이 제공하는 컨테이너는 종류가 세 가지이다.(default 컨테이너까지 하면 4개)
.container : 반응형 브레이크포인트 별 max-width를 설정
.container-{브레이크포인트약어} : {} 안 브레이크 포인트까지 width:100%로 설정
.container-fluid : 모든 브레이크 포인트에서 width: 100%로 설정
③ Grid
그리드는 6개의 반응형 브레이크 포인트를 지원한다. 브레이크 포인트는 min-width 미디어 쿼리에 기반하여 브레이크포인트보다 큰 폭에 대해 모두 적용됨을 의미한다. 즉, 컨테이너와 기둥 사이즈, 동작을 각각의 브레이크포인트마다 설정할 수 있단 의미이다.
컨테이너는 담고자 하는 내용을 가운데와 수평 정렬로 경계지을 것이다. 제공하는 서로 다른 컨테이너 클래스들을 상황에 맞게 적절하게 사용할 수 있다.
로우(행)은 칼럼(열)의 wrapper 역할을 한다. 각 칼럼은 gutter라 불리는 수평의 패딩을 가지고 있다. 이 패딩은 행의 여백과 상호작용하며 칼럼 안의 내용들이 좌측에 잘 정렬될 수 있도록 보장하는 역할을 해준다. 행 또한 마찬가지로 칼럼의 크기나 gutter 클래스를 조작하는 클래스들이 부여되어 페이지에 담길 내용들의 여백을 조정할 수 있다.
칼럼은 매우 유동적이다. 행마다 12개의 칼럼을 사용할 수가 있고, 여러 조합의 개수를 사용할 수 있도록 이미 탬플릿들이 만들어져있고, 퍼센트 단위로 표기되어 상대적인 크기 조정이 용이하다.
Gutter 또한 반응형이며 커스터마이징이 가능하다. Gutter 또한 브레이크포인트별로 사용 가능하며, 부트스트랩의 margin과 padding의 간격 조절에 쓰이는 사이즈로 제공된다. 수평 gutter는 .gx-* 클래스로, 수직 gutter는 .gy-*, 또는 모든 gutter 전체를 .g-* 클래스로 조정 가능하다. .g-0 클래스는 gutter를 제거하는 용도이다.
Forms
폼의 CSS에 대해 이야기함.
form에서 중요한 것은 입력받고자 하는 정보들을 제대로 입력받을 수 있는 type을 사용하는 것, 그리고 폼의 양식에 맞지 않게 작성된 내용들을 비활성화 시키는 것, 그리고 입력받고자 하는 내용을 명확하게 표시하는 것 등이 있다.
Form Control : input 과 textarea 요소들의 디자인을 조정
Select : 셀렉트 요소의 디자인을 조정
Checks&radios : 체크박스와 라디오 버튼 요소의 디자인을 조정
Range : 범위 요소의 디자인을 조정
Input group : 텍스트, 버튼 그룹 등 입력 요소의 디자인을 조정
Floating labels : 입력 요소 위에 뜨는 라벨의 디자인을 조정
Layout : 폼 전체 양식의 레이아웃 디자인을 조정
Validation : 유저에게 폼 양식 입력을 확인하라는 알림 메시지 디자인
<오전 수업 마무리>
아까 보니까 cdn.jsdelivr.net 에 bootstra.css 있는게 엄청 도움될 거 같아서 이것저것 보러 옴.
'공부의 기록 > 자바 풀 스택 : 수업내용정리' 카테고리의 다른 글
| 자바 풀 스택 12/11 하루 기록 015 (오후에 시험 봄) (0) | 2024.12.11 |
|---|---|
| 자바 풀 스택 12/10 오후 기록 014-2 (0) | 2024.12.10 |
| 자바 풀 스택 12/9 오후 기록 013-2 (1) | 2024.12.09 |
| 자바 풀 스택 12/9 오전 기록 013-1 (1) | 2024.12.09 |
| 자바 풀 스택 12/6 오후 기록 012-2 (0) | 2024.12.06 |