What I Learned Today
이번주도 화이팅이다.
오전에는 Logical Properties, Flexbox에 대해 배웠다.
- Logical Properties : 웹 콘텐츠가 다양한 언어와 쓰기 방향에 맞춰 렌더링될 때 일관성 있는 레이아웃을 유지하기 위해서 사용한다.
- inline-size : width의 논리 속성이다.
- block-size : height의 논리 속성이다.
- inline-start/end : 가로의 시작과 끝을 의미한다. 보통 가로에서 start -> 좌측
- block-start/end : 세로의 시작과 끝을 의미한다. 보통 세로에서 start -> 상단
- inset : top right bottom left의 논리 속성이다.
- inset-block-start/end 과 inset-inline-start/end 로도 사용 가능하다.
- Flexbox는 플렉스 컨테이너 안에서 아이템을 배치할 때 하나의 행 또는 열로 배치되는 1차원 레이아웃 모델이다.
- 플렉스 컨테이너 안에서 아이템의 배치는 주축과 교차축에 의해 결정된다.
- flex-direction : 속성 값이 주축을 결정하는 요인이다. row는 가로가 주축이고 column은 세로가 주축이 된다.
- flex-wrap : flex로 지정된 요소에 포함된 자식 요소 박스가 한 줄 또는 여러 줄로 배치될 것인지를 지정하는 속성이다.
- flex-flow : 위에 설명한 속성을 한번에 사용하기 위한 단축 속성이다.
- justify-content : flex로 지정된 부모 요소 내에서 자식 요소의 정렬 방식을 지정하기 위한 속성이다.
- 주축 방향에 따라 정렬이 달라진다. row는 좌->우로, column은 상->하로 start와 end가 지정된다.
- align-items : 플렉스 컨테이너 안에 아이템 배치 시 교차축 을 기준으로 정렬하는 속성이다.
- align-content : flex-wrap 속성에 의해 플렉스 아이템들이 여러 줄로 배치된 경우 지정된다.
- gap, row-gap, column-gap : 행과 열 사이의 간격을 설정할 수 있으며 행, 열 방향을 따로 지정할 수도 있다.
- 자식 요소 안에서 사용할 수 있는 속성
- order : 요소 박스의 배치 순서를 지정하는 속성으로 가장 낮은 번호가 먼저 배치된다. 같을 경우 흐름에 따라 배치된다.
- flex-grow : 플렉스 컨테이너가 자식 요소보다 크거나 작을 경우 자식 요소의 크기를 확대하는 방법이다.
- 이는 자식 요소에 확대 비율을 지정하여 부모 요소의 크기에 맞게 자동으로 크기를 조정한다.
- 총 크기가 500이고 자식 요소 a,b,c의 크기가 각 100이라고 할 때 남은 크기 200을 비율에 맞춰서 더한다.
- flex-shrink : 플렉스 컨테이너가 자식 요소보다 크거나 작을 경우 자식 요소의 크기를 축소하는 방법이다.
- 이는 자식 요소에 확대 비율을 지정하여 부모 요소의 크기에 맞게 자동으로 크기를 조정한다.
- 총 크기가 500이고 자식 요소 a,b,c의 크기가 각 200이라고 할 때 초과된 크기 100을 비율에 맞춰서 뺀다.
- flex-basis : 유연하게 조절되는 박스의 최소 크기를 지정하는 속성이다.
- row면 width를 column이면 height를 지정할 수 있다.
- flex : order를 제외한 자식 요소 안에서 사용할 수 있는 속성을 한번에 사용할 수 있다.
- 순서는 flex : flex-grow flex-shrink flex-basis로 사용된다.
- align-self : align-items 속성과 비슷하지만 전체가 아닌 개별 아이템을 정렬할 때 사용한다.
- 플렉스 컨테이너 안에서 아이템의 배치는 주축과 교차축에 의해 결정된다.
오후에는 layout 실습과 notification-ui 실습을 했다.
The Problem I Faced
flex-basis에 대해서 잘 이해가 가지 않았다.
What I Tried to Do
강사님이 정리해주신 페이지도 읽어보고 회고팀에 질문도 해보았다.
How I Solved It
회고 팀원분이 설명을 해주시고 참고 블로그 링크도 주셔서 쉽게 이해할 수 있었다.
자식 요소가 원래 가지고있던 크기가 flex-basis 속성값을 넘으면 그대로 두고 만약 그 크기가 flex-basis 속성값보다 작으면 그 자식 요소의 크기는 flex-basis 속성값으로 바뀐다.
So
Aha Moments
원래는 적응형 웹 이라는 단어가 있는줄도 몰랐고 오늘 들으며 반응형 웹과 같은 뜻인줄 알았다.
내가 생각한 가장 큰 차이점은 아래 내용이라고 생각한다.
이 외에도 많은 차이가 있는데 더 읽어보고 숙지해야겠다.
적응형 웹 : 서버 또는 웹 브라우저가 기기를 감지한다.
반응형 웹 : 미디어 쿼리를 사용하여 장치를 감지한다.
반응형
