4일차 요약
미니 프로젝트 코드 쭉 읽고 모르는 부분 정리
미니 프로젝트 모르는 부분
flex컨테이너
-문서의 영역 중에서 flexbox가 놓여있는 영역
-flex 컨테이너 생성하려면 컨테이너 요소의 display 값을 flex 혹은 inline-flex로 지정
flex-direction
요소들 나열 방향 지정
속성
row(default) : 가로 나열
row-reverse : 가로 리버스 나열
column : 세로 나열
column-reverse: 세로 리버스 나열
flex-wrap
요소들의 총 넓이가 부모 넓이보다 클 때, 요소들을 다음 줄에 정렬해주는 기능
속성
nowrap(default) : 다음 줄로 정렬x
wrap : 다음 줄로 정렬
wrap-reverse : 다음 줄로 리버스 정렬
flex-flow : flex-direction, flex-wrap 속성들을 합쳐 놓은 속성
앞 부분은 direction 적고, 뒷 부분은 wrap을 적으면 됨
flex-grow : flex-basis(flex item의 기본 크기)보다 늘어날 수 있는 지 결정하는 속성
- default값은 0
- 0보다 큰 값이 세팅되면 해당 아이템이 유연한 박스로 변하고 원래의 크기보다
커지며 빈 공간을 메우게 됨 - 숫자를 지정해주면 flex-basis을 제외한 여백 부분을 지정된 숫자의 비율로
나눠가짐
flex-shrink : flex-basis(flex item의 기본 크기)보다 줄어들 수 있는 지 결정하는 속성
- default값은 1, 따로 세팅하지 않았어도 기본값이기 때문에 작아질 수 있음
- 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않아 고정 크기로 만들
수 있음
flex-basis : flex item의 기본 크기
- flex-direction이 row일 때는 너비, column일 때는 높이를 의미
- auto(default)로 설정하면 각 컨텐츠의 너비만큼을 가짐.
- 0으로 설정하면 컨텐츠의 너비가 모두 같아짐.
flex : flex-grow, flex-shrink, flex-basis 속성들을 합쳐 놓은 속성
-위 순서대로 적으면 됨
justify-content
가로 영역에서의 요소 정렬
속성
start
가로 영역에서 왼쪽에 배치
center
중앙에 배치
space-between
아이템들 사이(between)에 균일한 간격
space-around
아이템들 둘레(around)에 균일한 간격
space-evenly
아이템들 사이와 양 끝에 균일한 간격
align-items
세로 영역에서의 요소 정렬
속성
start
세로 영역에서 상단에 배치
end
하단에 배치
center
중앙에 배치
baseline
컨테이너의 시작 위치에 배치
stretch(default)
컨테이너의 맞게 배치
gap
-grid, flex, multi-column 레이아웃에서 사용가능
-요소들 사이의 여백을 만들어주는 속성
margin과 gap의 차이점
-gap은 인접한 요소가 있을 때만 요소들의 사이에 공간을 만듬
-margin은 인접한 요소들과 상관없이 공간을 만듬. 불필요한 공간이 생김.
!important : css style 우선순위 부여
position
요소를 원하는 위치에 배치
속성
static : default값
relative : 기본 위치를 유지하면서 특정 방향으로 이동할 수 있도록 설정
- top,bottom,left,right 속성을 이용하여 요소가 원래 위치에서 상하좌우로 얼마나
떨어지게 할 지 지정할 수 있음
absolute : 부모 요소(가장 가까운 상위 요소)를 기준으로 정확한 위치 설정
- top,bottom,left,right 속성을 이용하여 요소가 부모 요소를 기준으로 상하좌우로
얼마나 떨어지게 할 지 지정할 수 있음 - 보통 이렇게 설정하려면 부모 요소의 position 속성을 relative로 지정해줘야 함
- 이 요소는 HTML 문서 상에서 독립되어 앞 뒤에 나온 요소와 상호작용 x
fixed : 요소를 항상 고정된 위치에 배치
- 배치 기준은 브라우저 전체화면
transition
-css 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐
일어나도록 하는 것
-표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절하는 것
속성
property : 요소에 추가할 전환 효과를 설정
duration : 전환 효과가 지속될 시간을 설정
timing-function : 전환 효과의 시간당 속도를 설정
timing-function의 프로퍼티값
ease : 기본값. 느리게 시작하여 점점 빨라졌다가 느려지면서 종료
linear : 시작부터 종료까지 등속 운동
ease-in : 느리게 시작한 후 일정한 속도에 다다르면 그 상태로 등속 운동
ease-out : 일정한 속도의 등속으로 시작해서 점점 느려지면서 종료
ease-in-out : ease와 비슷하게 느리게 시작하여 느려지면서 종료
delay : 전환 효과가 나타나기 전까지의 지연 시간 설정
transition
모든 transition 속성을 이용한 스타일을 한 줄에 설정
위의 순서대로 적으면 됨.
transform
요소에 이동, 회전, 확대/축소, 비틀기 효과를 부여
속성
translate : 요소의 위치를 이동
scale : 요소의 크기를 확대/축소
rotate : 요소를 회전
느낀 점
TIL을 더 깔끔하게 정리하고 싶긴 한데 막 여유 있지 않아서 천천히 적용해봐야 겠다. 코드를 한번 쭉 보니까 모르는 게 너무 많았다.. 맘이 아프긴 하지만 어쩔 수 없다 그만큼 공부 안 하고 놀았으니. 그래도 한번 정리 해보는 게 좋은 것 같긴 하다
