Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
Tags
- 스택
- 가상메모리 관리
- programmers
- 재귀
- N과M
- 가상메모리
- dict
- 파이썬
- MYSQL
- 그리디
- level1
- 수학
- 힙
- 구현
- 운영체제
- BFS
- python
- dfs
- 프로그래머스
- 브루트포스
- level3
- 다익스트라
- 백준
- level2
- 코딩테스트
- 다이나믹 프로그래밍
- BOJ
- level0
- 딕셔너리
- DP
Archives
- Today
- Total
동캄의 코딩도장
css [flex box 모델] 본문
position
relative 원래 자리에서 상대적인 이동
absolute 담긴 위치에서 이동
fixed 윈도우 기준 이동
sticky는 항상 붙어있음
float
이미지와 텍스트를 배치하기 위해 사용
flexbox
- 행 열로 자유롭게 배치시킬 수 있는 tag
display: flex;
flex-direction: (row,column,row-reverse ...)
flex-wrap: nowrap (wrap이면 화면 작아졌을 때, 줄 바꿔 표시 nowrap이면 크기가 줄어듬)
flex- flow: 위의 두 태그를 합친것
justify-content: (space-around, flex-start, flex-end, center, space-around, space-evenly, space-between) 중심 축을 기준으로 정렬
align-item: (baseline)
align-content: (space-between, center) 반대 축을 기준으로 정렬
order 속성
- flex에서 순서를 변경
flex-grow
화면이 커졌을 때 메꿈 (0이면 작동 x, 1이상 비율로 커짐)
flex-shrink
화면이 작아졌을 때 줄어듦(0이면 작동x, 1이상 비율로 커짐)
flex-basis
박스안의 태그들의 크기 비율을 설정 (ex flex-basis:60% flex-basis:30%)
align self
부모 박스의 자식과 상관x 부모공간 내 자신의 위치만 변경
'front > HTML&CSS&JS' 카테고리의 다른 글
JS [Class] (0) | 2022.01.24 |
---|---|
JS [function] (0) | 2022.01.23 |
JS [operators] (0) | 2022.01.23 |
JS [variable] (0) | 2022.01.23 |
html [emmet] (0) | 2022.01.22 |