Search
📝

TIL 22/08/03 (수)

TIL (Today I Learned)

Float

Float

박스를 왼쪽 혹은 오른쪽으로 이동시켜 텍스트를 포함한 인라인 요소들이 주변을 감싸도록
elementNormal flow를 벗어나도록
과거에 많이 사용하던 방법

Float 속성

none: 기본값
left: 요소를 왼쪽으로 띄움
right: 요소를 오른쪽으로 띄움

Flexbox

CSS Flexible Box Layout

행과 열 형태로 아이템들을 배치하는 1차원 레이아웃 모델 (IE는 부분 지원)
자식까지만 적용됨 (자손 x)
main axis: 아이템들이 쌓이는 방향의 축
cross axis: 아이템들이 쌓이는 방향의 교차축
구성 요소
Flex Container
Flex Item

Flexbox 축

flex-direction: row
Flex Container (부모 요소)
flexbox 레이아웃을 형성하는 가장 기본적인 모델
Flex Item들이 놓여 있는 영역
display 속성을 flex 또는 inline-flex로 지정
Flex Item (자식 요소)
컨테이너에 속해 있는 컨텐츠(박스)

Flex 속성

배치 설정
flex-direction
flex-wrap
공간 나누기
justify-content (main axis)
align-content (corss axis)
정렬
align-items (모든 아이템을 cross axis 기준으로)
align-self ( 개별 아이템)
flex-direction
main axis 기준 방향 설정
역방향의 경우 HTML 태그 선언 순서와 시각적으로 다르니 주의 (웹 접근성에 영향)
flex_wrap
아이템이 컨테이너를 벗어나는 경우 해당 영역 내에 배치되도록 설정
기본적으로 컨테이너 영역을 벗어나지 못하게!
→ 컨테이너를 벗어날 거 같으면 줄바꿈 처리 등
키워드
flex-direction: main axis 방향 설정
row: 행 방향(기본값)
row-reverse: 아이템들이 행의 오른쪽부터 쌓이게
column: 열 방향
column-reverse: 아이템들이 열의 아래쪽부터 쌓이게
flex-wrap: 요소들이 강제로 한 줄에 배치되게 할 것 인지의 여부 설정
nowrap: 한 줄에 배치(기본값). 아이템이 많아져서 넘쳐도 한 줄에 계속 배치
wrap: 넘치면 그 다음 줄로 배치
wrap-reverse: 넘치면 위 줄로 배치
flex-flow
flex-direction과 flex-wrap의 shorthand
flex-direction에 대한 설정 값을 차례로 작성
flex-flow: row nowrap;
justify-content
main axis를 기준으로 공간 배분
align-content
cross axis 기준으로 공간 배분 (아이템이 한 줄로 배치되는 경우 확인 불가)
키워드
flex-start: 아이템들을 axis 시작점으로
flex-end: 아이템들을 axis 끝 쪽으로
center: 아이템들을 axis 중앙으로
space-between: 아이템 사이의 간격을 균일히 분배
space-around: 아이템을 둘러싼 영역을 균일히 분배 (가질 수 있는 영역을 반으로 나눠 양쪽)
space-evenly: 전체 영역에서 아이템 간 간격을 균일하게 분배
align-items
모든 아이템을 corss axis 기준으로 정렬
align-self
개별 아이템을 cross axis 기준으로 정렬
컨테이너에 적용하는 것이 아니라 개별 아이템에 적용!
키워드
stretch: 컨테이너를 가득 채움 (기본값)
flex-start: 위
flex-end: 아래
center: 가운데
baseline: 텍스트 baseline에 기준선을 맞춤

Flex에 적용하는 속성

기타 속성
flex-grow: 남은 영역을 아이템에 분배
order: 배치 순서. HTML 구조를 변경하는 게 아니라 보이는 순서만!
{property}{sides}-{size}: mt-3

Grid system

요소들의 디자인과 배치에 도움을 주는 시스템
기본 요소
Column: 실제 컨텐츠를 포함하는 부분
Gutter: 컬럼과 컬럼 사이의 공간 (사이 간격)
Container: 컬럼들을 담고 있는 공간

Bootstrap grid system

flexbox로 제작됨
container, rows, column으로 컨텐츠를 배치 및 정렬
12개의 컬럼과 6개의 그리드 브레이크포인츠!

WIF (What I Felt)

항상 정렬할 때 자주 사용했던 float 가 최근 들어 자주 안쓰는 방법이라는 걸 알게 되었다.
float를 쓰면 해당 요소가 정렬은 되지만 붕 떠버려서 다른 요소들을 추가 할 때 애를 먹었던 기억이 꽤 있었고.. 해당 애로사항을 개선하기 위해 flexbox가 등장했다고 한다.
flexbox를 자유자재로 사용하기 위해선 조금 더 숙련이 필요할 것 같고, 프론트 작업은 bootstrap을 쓰는 경우도 많기 때문에 flexbox 기반의 bootstrapgrid systembreakpoints를 능숙하게 다룰 수 있으면 좋을 것 같다!
화면을 grid로 나눠 편하게 분할도 가능하고, 반응형으로까지 제작도 가능!
그리고 충격적이었던 건 bootstrap을 활용하며 boostrap 자체 CSS 외에 커스터마이징을 하고 싶을 때 구조를 다 뜯어 보면서 수정하고 인스타일로 속성을 새로 추가하여 !important 처리 시켜주는 방법으로 그동안 썼었는데,,,
일단 bootsrap의 클래스를 적절히 활용하는 것만으로도 저런 번거로운 수정은 필요가 없는 것이었다. 컴포넌트만 갖다가 활용하고, 스타일은 바보같이 새롭게 지정 해주고 있었던.. ㅎㅎ
여하튼 알음알음 혼자 해보다가 먼 길은 돌아오고, 잘못된 방법으로 프론트 작업을 해오던 걸 깨닫게 된 하루였다. 이제 정석으로 익혀서 사용하자!