●pymongo 정렬
import pymongo
myclient = pymongo.MongoClient("mongodb://localhost:27017/")
mydb = myclient["mydatabase"]
mycol = mydb["customers"]
mydoc = mycol.find().sort("name", -1)
for x in mydoc:
print(x)-저장 갯수 반환
[컬렉션객체].estimated_document_count() 👈 데이터(document) 갯수 반환
[컬렉션객체].document_count({}))로 사용해도 됨
●CSS flex
Flex의 속성들은,
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
display: flex;
.container {
display: flex;
/* display: inline-flex; */
}flex 아이템들은 가로 방향으로 배치 되고, 자신이 가진 내용물의 width만큼만 차지한다.
inline-flex는 inline-block 처럼 작동한다. 컨테이너가 주변 요소들과 어떻게 어우러 질지 결정하는 값
아이템들이 배치도니 방향의 축을 메인축(MainAxis), 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis)라고 부른다.
배치 방향 설정
flex-direction
아이템들이 배치되는 축의 방향을 결정하는 속성
.container {
flex-direction: row; /* 가로*/
flex-direction: column; /*세로*/
flex-direction: row-reverse; /*가로 역순*/
flex-direction: column-reverse;/*세로역순*/
}줄넘김 처리 설정
flex-wrap
컨테이너가 더이상 아이템들을 한줄에 못 담을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성
.container {
flex-wrap: nowrap; /* 줄바꿈 하지 않고 넘치면 삐져나간다*/
flex-wrap: wrap; /*줄바꿈을 한다. float나 inline-bolck으로 배치한 요소들과 비슷함*/
flex-wrap: wrap-reverse; /* 줄바꿈을 하는데 아이템을 역순*/
}flex-flow
flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축속성
flex-direction, flex-wrap의 순으로 한칸 때고 써주자
.container {
flex-flow: row wrap;
/* 아래의 두 줄을 줄여 쓴 것 */
/* flex-direction: row; */
/* flex-wrap: wrap; */
}
정렬!
“justify”는 메인축 방향으로 정렬
<---------- --------->
○○○○○○○○○○○
“align”은 수직축 방향으로 정렬
○↓ ○↓
○○○ ○○ ○○ ○○○
↓○
메인축 방향 정렬
justify-content
메인축 방향으로 아이템들을 정렬하는 속성
.container {
justify-content: flex-start;/*아이템들을 시작점으로 정렬 row는 왼쪽 column은 위쪽*/
justify-content: flex-end;/*아이템들을 끝점 정렬 row는 오른쪽 column일땐 아래 */
justify-content: center;/*아이템들을 가운데 정렬*/
justify-content: space-between;/*아이템들의 사이에 균열한 간격*/
justify-content: space-around;/*아이템들의 둘레에 균일한 간격*/
justify-content: space-evenly;/*아이템들의 사이와 양끝에 균일한 간격*/
/*evenly는 주의! IE와 엣지(Edge)에서는 지원되지 않는다.
브라우저 폭이 1024px 이상일때만*/
}수직축 방향 정렬
align-items
수직축 방향으로 아이템들을 정렬하는 속성
.container {
align-items: stretch; /*아이템들이 수직축 방향으로 끝까지 쭈욱 늘어남*/
align-items: flex-start; /*아이템들을 시작점으로 정렬row일땐 위 column일 때는 왼쪽*/
align-items: flex-end; /*아이템들을 끝으로 정렬 row일땐 아래 column일 때는 오른쪽*/
align-items: center; /*아이템들을 가운데로 정렬*/
align-items: baseline;/*텍스트 베이스라인 기준 정렬*/
}justify-content: center;
align-item: center;
쓰면 한가운데 놓는것도 매우 쉽다.
여러 행 정렬
align-content
flex-wrap:wrap; 이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향을 정렬
.container {
flex-wrap: wrap;
align-content: stretch;
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
/* align-content: space-around; */
/* align-content: space-evenly; */
}flex-basis
flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이).
.item {
flex-basis: auto; /* 기본값 */
/* flex-basis: 0; */
/* flex-basis: 50%; */
/* flex-basis: 300px; */
/* flex-basis: 10rem; */
/* flex-basis: content; */
}
flex-basis의 값으로는 우리가 width, height 등에 사용하는 각종 단위의 수가 들어갈 수 있고 기본값 auto는 해당 아이템의 width값을 사용한다. width를 따로 설정하지 않으면 컨텐츠의 크기가 되는데 content는 컨텐츠의 크기로, width를 따로 설정하지 않은 경우와 같다.
CSS에 word-wrap: break-word; 를 설정 안하면 영역만 줄어들고 내용물은 옆으로 빠져나감!
연하게 늘리기
flex-grow
flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다.
flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다.
.item {
flex-grow: 1;
/* flex-grow: 0; */ /* 기본값 */
}
flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow에 지정된 숫자의 비율로 나누어 가진다고 생각
유연하게 줄이기
flex-shrink
flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정합니다.
flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아진다.
.item {
flex-basis: 150px;
flex-shrink: 1; /* 기본값 */
}flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있다.고정 크기는 width로 설정합니다.
.container {
display: flex;
}
.item:nth-child(1) {
flex-shrink: 0;
width: 100px;
}
.item:nth-child(2) {
flex-grow: 1;
}flex
flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.
이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리합니다.
.item {
flex: 1;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1 1 auto;
/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex: 1 500px;
/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}주의할 점은, flex: 1; 이런 식으로 flex-basis를 생략해서 쓰면 flex-basis의 값은 0이 된다.
.item {
flex: 1 1 0;
}
.item:nth-child(2) {
flex: 2 1 0;
}flex0basis:0;으로 기본 점유 크기를 0으로 만들어 버려 결국 전체 크기를 1:2:1로 나누어 가지게 된다.
예시) 2단 칼럼형 만들기 (flex-wrap과flex-basis를 이용하기)
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1 1 40%;
}align-self
align-items가 전체 아이템의 수직축 방향 정렬이라면, align-self는 해당 아이템의 수직축 방향 정렬이다.
.item {
align-self: auto;/*기본값*/
align-self: stretch;
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: baseline;
}/*각각 개별 설정을 우선시 한다.*/배치 순서
order
숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다. “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야 한다.시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를 이용해 순서를 바꾼 것은 의미가 없다.
.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */
/*B C A*/z-index
z-index로 Z축 정렬을 할 수 있어요. 숫자가 클 수록 위로 올라옵니다.
.item:nth-child(2) {
z-index: 1;
transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */
'정리' 카테고리의 다른 글
| 7-1TIL 정리(AWS기초) (0) | 2022.04.27 |
|---|---|
| 6-TIL 정리 (간단한 AWS-S3,IAM,CloudFront) (0) | 2022.04.25 |
| 4-TIL 정리(flask와 aws를 이용한 서버세팅)-스파르타코딩클럽- (0) | 2022.04.22 |
| 3-TIL 정리 (Flask, API)-스파르타코딩클럽- (0) | 2022.04.21 |
| 2-TIL 정리(Ajax,파이썬,크롤링,pymongo)-스파르타코딩클럽- (0) | 2022.04.19 |