웹 사이트 성격과 목적에 맞게 HTML 구조 만들기
Flexbox
flex-direction
flex-wrap
justify-content
align-items
align-content
grow
shrink
basis
레이아웃: 화면을 나누는 방법
📏 수직 분할, 수평 분할
CSS로 화면 구분 시 수직 분할과 수평 분할을 차례로 적용하여 콘텐츠 흐름에 따라 작업한다
Atomic CSS 방법론: 클래스 이름과 구현을 1:1 일치시켜 작은 단위로 CSS를 작성한다
<div class="col w20">
<div class="row h40">영역1</div>
<div class="row h40">영역2</div>
<div class="row h20">영역3</div>
</div>
🎈 레이아웃 리셋
HTML의 기본 스타일이 레이아웃에 방해가 될 때
1. <body> 태그의 여백
2. width, height 계산이 여백을 포함하지 않음 (box-sizing 참고)
3. 브라우저마다 기본 스타일이 약간씩 다름
해결 방법: 라이브러리 or CSS 코드로 수정하기
Flexbox
박스를 유연하게 늘리거나 줄여서 레이아웃을 잡는 방법!
🔍 display: flex 분석하기
부모 박스에 영향을 주면, 자식 박스에 영향이 간다
요소의 정렬, 차지하는 공간을 설정 가능
부모 요소에 적용
flex-direction
정렬 축 정하기: row(기본), column, row-reverse, column-reverse
main {
display: flex;
flex-direction : row;
}
flex-wrap
컨텐츠가 많을 때 줄 바꿈 설정: nowrap(기본), wrap, wrap-reverse
main {
display: flex;
flex-wrap : nowrap;
}
justify-content
메인 축 방향 정렬: row(기본), column
flex-start
flex-end
center
space-between(맨 왼쪽과 오른쪽을 제외하고 중간 사이에만 여백)
space-around(각 객체를 둘러싸는 여백)
space-evenly(객체 사이마다 동일한 여백)
align-items
축 수직(반대) 방향 정렬
stretch
flex-start
flex-end
center
baseline(객체 크기가 어떻든 글자에 맞춤)
align-content
center
space-between(맨 왼쪽과 오른쪽을 제외하고 중간 사이에만 여백)
자식 요소에 적용
flex 속성의 세 가지 값
flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>
/** 기본 값 */
flex: 0 1 auto;
grow
공간이 커질 때 아이템들은 얼마나 커질까?
정렬 축 방향으로 빈 공간이 있을 때 각각의 자식들이 늘어나서 공간을 차지하는 비율을 말한다
절대적인 크기가 아니라 총합에서의 비율로 차지함!
자식 요소의 grow값 / 자식 요소들의 grow값의 총합
shrink
공간이 작아질 때 아이템들은 얼마나 작아질까?
grow와 반대로 설정한 비율만큼 작아진다: width나 flex-basis 속성에 따른 비율
flex-grow와 flex-shrink는 함께 사용하는 것 비추천
grow를 이용하는 것을 권장하는데, 이때 shrink 속성은 기본값을 1로 둔다
basis
아이템의 공간 차지를 세부적으로 명시(%)
grow나 shrink에 의해 늘어나거나 줄어들기 전 크기이다
❓ 세 개의 박스가 있을 때 grow를 0 : 1 : 1로 설정하고 box1에 flex-basis : 50px 설정을 한다면?
💡 box1가 크기를 50px를 유지한다
❓ 세 개의 박스가 모두 flex-grow : 1 일 때, 위는 flex-basis : auto, 아래는 flex-basis : 0이다
실제로 1:1:1 너비를 갖는 건 어떤 예시일까? 왜 이런 차이가 발생할까?
flex-basis 키워드로 구글링 해 보자
💡아래 예시이다
https://stackoverflow.com/questions/47578958/the-difference-between-flex-basis-auto-and-0-zero
flex-grow 속성 값이 0일 대만 flex-basis 속성 값이 유지된다
diplay 속성에 flex가 적용된 컨테이너 자식 박스는 경우에 따라 basis 설정 크기가 항상 유지되지 않는다
flex-grow가 양수일 때 늘어나면서 flex-basis에 적용한 값보다 커질 수 있다
align-self
아이템별로 아이템을 정렬
order
박스의 순서를 정해 줄 수 있다(기본 값 0)
⚜️ 참고
· 우선 순위: flex-basis > width
· 콘텐츠가 많아서 자식 박스가 넘칠 때 width은 크기를 보장하지 않는다
· 자식 박스가 넘치는 경우를 대비해, width 대신 max-width 사용 가능 (flex-basis를 사용하지 않을 때)
🐸 FLEXBOX FROGGY: 24단계
#pond {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
justify-content: center;
align-content: space-between;
}
'Etc > HTML & CSS' 카테고리의 다른 글
| Twittler 목업 구현 (0) | 2022.06.29 |
|---|---|
| 웹 앱 화면 설계하기 (0) | 2022.06.28 |
| CSS (0) | 2022.06.27 |
| HTML (0) | 2022.06.27 |
| 웹호스팅(github pages) (0) | 2021.03.14 |
댓글