📚 23.11.03
- Float
- Position
- Flex
- Grid
Float
수평정렬
clear : float 속성 해제
.container .item{
...
float :left
}
.container .item:nth-child(4){
clear:left;
}float속성을 가지면, 자동적으로 display:none 속성을 가진다.
Position
- position:absolute, fixed는 자동으로 display:block을 가진다.
중복으로 지정해줄 필요 없다. display지정으로 변경 불가능!
Flex
1차원 레이아웃 구조
하나의 축(차원) (수평이거나 수직)을 기준으로 정렬 할 수 있다.
부모 container에 적용하는 속성들
display : flex || inline-flex
- inline-flex : inline값은 ‘글자’를 다루는 용도라고 생각이 된다. 그래서 위처럼 약간의 공간이 사이사이에 있다.
flex-direction : row || column || row-reverse || column-reverse
row = 행, 줄, x, 수평방향 (default) 왼→오 [ reverse는 왼←오 ]
column = 열, 칸, y, 수직방향 위→아래 [ reverse는 아래 → 위 ]
flex-wrap : nowrap || wrap || wrap-reverse
gap : _px
최신브라우저에만 적용된다…! 아직 모두에게 쓰이기엔 문제가 있다.
정렬
justify-content
주축의 정렬 방법을 설정
justify-content : flex-start || flex-end || center || space-around || space-between
align-items
align-items: stretch || flex-start || flex-end || center || baseline
align-content
align-content 는 기본 2줄 이상일때 동작한다. === flex-wrap:wrap 과 같이 써야 한다! align이기 때문에 -items와 마찬가지로 교차축을 기준으로 한다.
자식 items에 적용하는 속성들
flex-grow : 0
증가되는 너비의 비율
0 = 없음
flex-shrink : 1(디폴트)
items의 감소너비 비율 지정
flex-basis : auto || _px
요소의 기본너비
단축속성으로 flex : {grow} {shrink} {basis}이렇게 사용할 수 있는데, flex : 1 이랑 flex: 1 1 auto는 다르다!! 단축 속성사용시 basis부분엔 auto가 아닌 0이 들어간다!!!
align-self : auto || flex-start || flex-end || flex-basis
align-items를 개별적으로 관리할 때 쓰인다.
Grid
2차원 레이아웃 구조
부모 container에 적용하는 속성들
display : grid || inline-grid;
-
fr
fraction : 공간 비율 -
여러개의 반복이 있을 땐 repeat
repeat(반복횟수, 반복할 값)
grid-auto-rows : , grid-auto-columns :
명시적이 아니라 암시적인 지정이다. 얼마만큼 아이템을 더 늘리더라도 암시적으로 100px이 된다.
grid-auto-flow : row(디폴트) || column || dense
dense = 빈공간을 메움, 단 row의 속성을 가지는게 디폴트
grid-template-areas :
정렬
justify-content
행축(수평)정렬! grid주변으로 빈공간이 필요하다.
align-content
열축(수직)정렬!
가질수 있는 값들 :
normal(stretch), start, end, center, space-between, space-around, space-evenly
cell에 대해 정렬
cell : 명시적으로 설정된 그리드 아이템 각 한 칸
justify-content
행축(수평)정렬! 각 cell에서 행축과 열축에 대해 빈공간이 있어야 한다.
align-content
열축(수직)정렬!
가질수 있는 값들 :
normal(stretch), start, end, center
space-값들은 없다. 어짜피 각 셀엔 요소가 하나니까.
🫨 느낀 점
JS가 끝나고 CSS시작..! 많이 써봤고 어느정도 알지만 또 막상 모르는 그런 css라 기대도 되었고 하나씩 정리해가는게 너무 재밌었다!
일단, 웹프로그래밍 과목을 배울 때의 느낌과는 많이 달랐다. 그땐 이론과 개념을 와다다 배웠었다면, 그동안 써봤던 것들이 이런 이유였구나를 알게되었다. 레이아웃에 대해 속 시원하게 배운것 같아서 좋았다. 특히 정렬의 경우 잘 알고 쓴다기 보다 찍는 경우가 적지 않았는데, 이번을 계기로 근거를 만들 수 있을 것 같다.
gap속성이 하위호환에는 문제가 있다는 것, 요소들 배치에 grid-template-areas를 이용할 수 있다는 것이 기억에 많이 남는다.. 멋쪄,,
🤔 오늘 회고
Keep
강의를 들으면서, 정리하면서, 이 글을 적으면서 계속 복습하고 정리를 했다. 그래서 시간이 정말 많이 들었지만 뭔가 체계화 할 수 있었다.
Problem
강의는!미루지!말자!
Try
이전 프로젝트의 css를 수정해봐야겠다.. 특히 display와 position을 중복으로 두진 않았는지, 정렬을 어떻게 했는지 확인하자
