한 번에 끝내는 파이썬 웹 개발 초격차 패키지 100일차

웹 & 프론트엔드 기본

Bootstrap

Utilities

Colors

- 소수의 컬러 유틸리티 클래스로 색을 통해 의미를 전달

- 호버 상태의 링크 스타일 지정도 지원

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./main.css">

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
	<p class="text-primary">.text-primary</p>
	<p class="text-secondary">.text-secondary</p>
	<p class="text-success">.text-success</p>
	<p class="text-danger">.text-danger</p>
	<p class="text-warning bg-dark">.text-warning</p>
	<p class="text-info bg-dark">.text-info</p>
	<p class="text-light bg-dark">.text-light</p>
	<p class="text-dark">.text-dark</p>
	<p class="text-body">.text-body</p>
	<p class="text-muted">.text-muted</p>
	<p class="text-white bg-dark">.text-white</p>
	<p class="text-black-50">.text-black-50</p>
	<p class="text-white-50 bg-dark">.text-white-50</p>
</body>
</html>

Display

- Seagate 디스플레이 유틸리티로 구성 요소의 표시 값 등을 빠르고 빠르게 전환

- 인쇄 시 디스플레이를 제어하기 위한 추가 기능뿐만 아니라 보다 일반적인 일부 값에 대한 지원이 포함

classes are named using the format

.d-{value} for xs

Where value is one of

none

/* 화면에 보여지는 특성이 존재하지 않음 */
.text-primary {
    display: none;
}

inline

/* 새로운 라인에서 시작하지 않음 */
.text-primary {
    display: inline;
}

inline-block

/* 인라인 요소 한 줄에 배치 */
.text-secondary {
    display: inline-block;
}

block

/* 새로운 라인에 시작 */
.text-secondary {
    display: inline-block;
}

.text-secondary {
    display: block;
}

grid

<!-- 레이아웃 형태를 위해 div를 감싸줌 -->
<body>
	<div class="container">
		<p class="text-primary">.text-primary</p>
		<p class="text-secondary">.text-secondary</p>
		<p class="text-success">.text-success</p>
		<p class="text-danger">.text-danger</p>
		<p class="text-warning bg-dark">.text-warning</p>
		<p class="text-info bg-dark">.text-info</p>
		<p class="text-light bg-dark">.text-light</p>
		<p class="text-dark">.text-dark</p>
		<p class="text-body">.text-body</p>
		<p class="text-muted">.text-muted</p>
		<p class="text-white bg-dark">.text-white</p>
		<p class="text-black-50">.text-black-50</p>
		<p class="text-white-50 bg-dark">.text-white-50</p>
	</div>
</body>

.container {
    border: cadetblue solid 1px;
    display: grid;
}

.text-success {
    border: springgreen solid 1px;
    display: grid;
}

table
table-cell
table-row
flex
inline-flex

Shadows

- 상자 그림자 유틸리티를 사용하여 요소에 그림자 추가 또는 제거

index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	
	<!-- Bootstrap -->
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="./main.css">

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
	<div class="container">
		<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
		<div class="shadow-sm p-3 mb-5 bg-body rounded">Small shadow</div>
		<div class="shadow p-3 mb-5 bg-body rounded">Regular shadow</div>
		<div class="shadow-lg p-3 mb-5 bg-body rounded">Larger shadow</div>
	</div>
</body>
</html>

Spacing

- 부트스트랩은 요소의 모양을 수정하기 위한 광범위한 속기 응답 여유, 패딩 및 갭 유틸리티 클래스를 포함

Where property is one of:

m - for classes that set margin
p - for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top
b - for classes that set margin-bottom or padding-bottom
s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL
e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL
x - for classes that set both *-left and *-right
y - for classes that set both *-top and *-bottom
blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0
1 - (by default) for classes that set the margin or padding to $spacer * .25
2 - (by default) for classes that set the margin or padding to $spacer * .5
3 - (by default) for classes that set the margin or padding to $spacer
4 - (by default) for classes that set the margin or padding to $spacer * 1.5
5 - (by default) for classes that set the margin or padding to $spacer * 3
auto - for classes that set the margin to auto

Bootstrap Utilities 부분에 대해 학습해보는 시간을 가졌다. 먼저 Colors 부분을 보면서 각각을 나열하면서 살펴볼 수 있었으며 Display를 보면서 어려운 점을 많이 느꼈다. grid 부분부터는 적용한 점이 눈에 크게 띄지 않아 기록으로 남기기에는 애매해서 속성값만 나열해놓은 상태이다. 아무리 테스트를 해도 무엇이 바뀌는지 강의에는 애초에 설명도 없어서 대충 훑고 넘어가는 느낌이었다. Shadows 유틸리티는 말 그대로 그림자 영역이다. 그림자는 부트스트랩에 있는 값을 잘 사용 못할 듯 싶다. 예제값을 넣고 사진을 찍어봤지만, 그림자 효과가 너무 대조적으로 표현되어 있기에 CSS 부분을 직접 다뤄야 할 것 같다. Spacing은 여태껏 사용해왔던 예제 안에 소스를 풀어놓은 느낌이었다. 설명 문구만 봐도 무슨 내용인지 감이 잡히며 size 같은 경우는 디폴트 16 PX 에서 곱하기하는 개념으로 이해하면 되는 부분이었다.

100일 차는 여기서 마무리하고자 합니다.

패스트캠퍼스 링크 :https://bit.ly/37BpX

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

'FastCampus > 한 번에 끝내는 파이썬 웹 개발 초격차 패키지 Online.' 카테고리의 다른 글

한 번에 끝내는 파이썬 웹 개발 초격차 패키지 102일차 (0)	2021.12.16
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 101일차 (0)	2021.12.15
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 99일차 (0)	2021.12.13
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 98일차 (0)	2021.12.12
한 번에 끝내는 파이썬 웹 개발 초격차 패키지 97일차 (0)	2021.12.11