3주차에서는 CSS에 대한 심화 학습을 진행했습니다. 이번 주차에서는 CSS의 다양한 속성 활용법에 대해서 배웠습니다.
정말 다양한 속성들이 존재하고 활용할 수 있는 방법도 엄청 많았습니다.
이번 주차에서는 CSS의 심화 학습을 통해 웹 사이트를 구축할 때 필요한 다양한 기술들을 배웠습니다. 이를 실제로 능숙하게 활용하려면 더 많은 연습이 필요하겠지만, CSS에 대한 공부 방향을 잡을 수 있었던 것 같습니다. 더욱 전문적인 수준으로 익혀나갈 수 있도록 연습을 많이 하는것이 중요할 것 같습니다!
3주차 때 배운 CSS Properties
- backface-visibility
- background
- border
- box-sizing
- display
- flex
- flex-container
- flex-items
- font
- margin
- opacity
- overflow
- padding
- perspective
- position
- text
- transform
- transition
- width, height
위 속성들 중 flex 에 대한 내용이 어려웠는데, 해당 내용으로 한 번 정리 요약을 해보았습니다!
CSS flex
부모 요소에 display: flex; 를 적용하면 자식 요소가 수평 정렬된다. 이때, 부모 요소를 Flex Container라고 하고, 자식 요소를 Flex Items 라고 한다.
Flex Container에 사용 가능한 속성들
- display
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-content
- align-items
Flex Items에 사용 가능한 속성들
- order
- flex
- flex-grow
- flex-shrink
- flex-basis
- align-self
CSS Flex Container
부모 요소인 Flex Cotainer에 적용 가능한 속성들은 아래와 같다.
display
Flex Container의 화면 출력(보여짐) 특성
- flex : 블록 요소와 같이 Flex Container 정의
- inline-flex : 인라인 요소와 같이 Flex Container 정의
flex-direction
주 축(Main-Axis)을 설정; 수평정렬? or 수직정렬? 보통 블록 요소는 기본적으로 수직으로 쌓이기 때문에 column 속성값들은 거의 쓰지 않음. 주축에 직각인 축을 교차축(Cross-Axis)라고 한다. 주축과 교차축, 시작점과 끝점은 상대적이다.
<수평>
- row : 행 축 정렬(좌 -> 우)
- row-reverse : 행 축 정렬 (우 -> 좌)
<수직>
- column : 열 축 정렬 (위 -> 아래)
- column-reverse : 열 축 정렬 (아래 -> 위)
<시작점과 끝점>
- flex-start: 시작점
- flex-end: 끝점
flex-wrap
Flex-items 묶음(줄 바꿈) 여부
- nowrap(기본값) : 묶음(줄 바꿈) 없음
- wrap : 여러 줄로 묶음
자식 요소들이 정렬될 때 컨테이너의 너비를 초과하면 요소들의 너비가 찌그러진다. 이 현상을 막기 위해 만약 컨테이너의 너비를 초과한다면 줄 바꿈을 하는 속성이다(wrap). 줄바꿈을 하면 자식 요소의 너비는 찌그러지지 않는다.
justify-content
주 축의 정렬 방법
- flex-start(기본값) : Flex Items(자식 요소들) 를 시작점에서 정렬
- flex-end : Flex Items 를 끝점에서 정렬
- center : Flex Items 를 가운데에서 정렬
주의 ❗️
flex-direction 을 바꿔서 주축을 변경하지 않는 이상, 정렬되는 위치만 다를 뿐 정렬되는 요소들의 순서는 바뀌지 않는다!
Tip ⭐️
보통 자식 요소들의 '수평 정렬'에 사용된다.
align-content
교차 축의 '여러 줄' 정렬 방법. flex는 대부분 수평 정렬에 사용하게 되므로 교차 축을 보통 수직 축으로 생각하면 편하다.
- stretch(기본값) : Flex Items(자식 요소들)를 교차축으로 늘림
- flex-start : Flex Items를 시작점으로 정렬
- flex-end : Flex Items를 끝점으로 정렬
- center : Flex Items를 가운데 정렬
사용 시 주의 사항 ❗️
align-content를 사용하기 위해선 두 줄 이상이어야 하고 컨테이너의 여백이 남아 있어야 한다. 즉flex-wrap: wrap;적용이 선행되어야 하고 컨테이너에 여유 공간이 남아 있어야 한다.
Tip⭐️
사용 조건이 위 사항처럼 까다롭기 때문에 해당 속성보단 'align-itmes' 속성을 더 많이 사용하게 된다.
align-items
교차 축의 '한 줄' 정렬 방법
- stretch : Flex Items(자식 요소들)를 교차 축으로 늘림
- flex-start : Flex Items를 각 줄의 시작점으로 정렬
- flex-end : Flex Items를 각 줄의 끝점으로 정렬
- center : Flex Items를 각 줄의 가운데 정렬
자식 요소들의 정렬이 한 줄에서 표현이 된다면 align-items를 사용하는 것이 좋고, 여러 줄로 표현이 된다면 align-content를 사용하는 것이 좋다.
Tip ⭐️
보통 자식 요소들의 '수직 정렬'에 많이 사용된다.
CSS Flex Items
자식 요소들인 Flex Items에 적용 가능한 속성들은 아래와 같다.
order
Flex Item 의 정렬 순서를 지정한다
- 0 (기본값) : 순서 없음
- 숫자 : 숫자가 작을 수록 먼저, 음수 사용 가능
flex-grow
Flex Item의 증가 너비 비율, 컨테이너의 '여백'을 차지하는 비율 정도를 의미한다.
- 0(기본값) : 증가 비율 없음
- 숫자 : 증가 비율
flex-shrink
Flex Item의 감소 너비 비율, 아이템(자식요소)들의 정렬된 크기보다 컨테이너(부모요소)가 작아질 경우 찌그러지는 경우가 있다. 이때 기본 값이 1이기 때문에, 줄어드는 것이다.
- 1(기본값) : Flex Container 너비에 따라 감소 비율 적용
- 숫자 : 감소 비율
flex-basis
Flex Item의 공간 배분 전 기본 너비
- auto(기본값) : 요소의 Content 너비
- 단위 : px, em, rem 등 단위로 지정
기본 너비를 지정하지 않을 땐 flex-basis: 0; 으로 설정한다.
