Chapter1. 레이아웃
1-1 레이아웃
1-2 와이어프레임
1-3 화면 나누기Chapter2. Flexbox
Chapter1. 레이아웃
📌 레이아웃
각각의 요소를 목적에 맞게 배치하는 것
웹 개발자에게 웹 사이트 목적에 맞게 화면을 만드는 레이아웃 작업은 중요하다.
학습목표
- 레이아웃을 위한 HTML을 만들 수 있다.
와이어프레임(Wireframe)
웹 또는 애플리케이션을 개발할 때 레이아웃의 뼈대를 그리는 단계.
단순한 선이나 도형으로 웹이나 앱으 인터페이스를 시각적으로 묘사한 것. 즉, 레이아웃과 제품의 구조를 보여주는 용도다.
목업(Mock-up)
실물 제품이 없는 무형의 웹은, 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성한다. ex)트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩하는 방식이다.
📌 화면 나누기
HTML 구성하기
- CSS로 화면을 구분할 땐, 수직 분할과 수평 분할을 차례대로 적용하며 콘텐츠 흐름을 따라 작업한다.
- [수직분할] 화면을 수직으로 구분. 콘텐츠가 가로로 배치될 수 있게 요소를 배치한다
그 후 분할된 요소를 수평으로 구분한다. - [수평분할] 분할된 각각의 요소를 수평으로 구분. 내부 콘텐츠가 세로로 배치될 수 있게 요소를 배치한다.
◦ 수평으로 구분된 요소에heigh속성을 추가하면, 직관적으로 수평분할 가능.
레이아웃 리셋
HTML 문서의 기본 스타일이 레이아웃 잡는 데 방해가 되기도 한다.
사례1. 박스의 시작을 (0,0)에서 하고 싶은데, <body>요소 기본 스타일에 여백이 있음
사례2. width, height 계산이 여백을 포함하지 않아서 계산하기 어려움
사례3. 브라우저마다 기본 스타일이 다름
-> 이러한 문제를 몇 줄의 코드로 기본 스타일링을 제거할 수 있음.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
[코드] 기본 스타일링을 제거하는 CSS 코드 예시
Chapter2. Flexbox
학습목표
display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.flex-direction을 이용하여 요소를 정렬할 방향을 결정할 수 있다.justify-content와align-items를 이용하여 수평-수직 정렬을 결정할 수 있다.flex-grow를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.flex-basis를 이용하여 요소의 기본 크기를 결정할 수 있다.- VSCode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.
📌 Flexbox로 레이아웃 잡기
flex(flexible) "잘 구부러지는, 유연한"
Flexbox로 레이아웃을 구성한다 = 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법.
display: flex 분석하기
display: flex 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
- Flexbox 속성을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.
- Flexbox 속성을 사용할때 '속성을 지정해주는 위치'를 주의해야함.
- 부모요소/자식요소에 적용해야하는 속성이 있다.
- 적절한 위치에 속성을 지정하지 않으면 요소들이 제대로 정렬되지 않는다.
부모 요소에 적용: Flexbox 속성들
1. flex-direction : 정렬 축 정하기
flex-direction'부모 요소'에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정함.- 아무 설정을 하지 않으면 가로정렬을 기본으로 함.
- 입력할 수 있는 값 :
row,column,row-reverse,column-reverse
main {
display: flex;
**flex-direction : row;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */
flex-wrap : 줄 바꿈 설정하기
flex-wrap하위 요소들의 크기 > 상위 요소의 크기를 넘으면, 자동 줄 바꿈을 할 것인지 정함- 아무 설정을 하지 않으면 줄 바꿈을 하지 않음.
main {
display: flex;
**flex-wrap : nowrap;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */
justify-content : 축 수평 방향 정렬
justify-content자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함- 요소들이 가로로 정렬되어 있다면, 가로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성.
- 주요 속성값으로
flex-start,flex-end,center,space-between,space-around이 있다.
align-items : 축 수직 방향 정렬
align-items자식 요소들을 축의 수직방향으로 어떻게 정렬할 것인지 정함- 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 ...
- 입력할 수 있는 값:
stretch,flex-start,flex-end,center,baseline
stretch,flex-start,flex-end,center,baseline
자식 요소에 적용: Flexbox 속성들
- Flexbox 속성을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정해줄 수 있다.
- 부모 요소 적용 속성 = 자식요소의 정렬과 관련
- 자식 요소 적용 속성 = 요소가 차지하는 공간과 관련
flex 속성의 값
1. flex:
<grow(팽창지수)> : 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
<shrink(수축지수)> : 줄어들어야 할 때 얼마나 줄어들 것인지
<basis(기본크기)> : 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지 자식 요소에 flex 속성 따로 설정하지 않으면 아래와 같은 기본값이 적용됨. 왼쪽->오른쪽으로 콘텐츠 크기만큼 배치된다.
felx: 0 1 auto;이 순서와 기본값 반드시 기억할 것.
flex: grow shrink basis, flex: 0 1 auto
한번에 세가지 설정할 필요 없이 따로 지정도 가능.
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;grow : 늘어남
grow(팽창 지수)요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지- 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것
- 팽창지수는
자식 요소의 grow값/자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져감
---> 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지
shrink : 줄어듦
Shrink(수축 지수)설정한 비율만큼 박스 크기가 작아짐. 비율이 클수록 더 많이 줄어듦flex-grow속성과 함께 사용하는 건 비추- 비율로 레이아웃을 지정할 경우,
grow속성에 변화를 주는 방식을 권장
ex)flex-grow속성 orflex: <grow> 1 auto
--->flex-shrink속성은width나flex-basis속성에 따른 비율이므로 실제 크기를 예측하기 어렵기 때문임.
**flex-grow로 비율을 변경할 경우,flex-shrink는 기본값인 1로 두어도 무방.
basis : 기본 크기
basis(기본 크기)는 자식 박스가 위의 속성에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기다.flex-grow속성 값이 0일 때basis크기를 지정하면 그 크기는 유지되어 다른 box들 처럼 늘어나거나 줄어들지 않음
**basis로 설정된 크기가 항상 유지되는 건 아님!
flex-grow속성 값이 양수일 경우, 늘어나면서flex-basis속성에 적용한 값보다 커질 수 있음.
+)
width와flex-basis를 동시에 적용하면,flex-basis가 우선됨- 콘텐츠가 많아서 자식 박스가 넘치는 경우,
Width가 정확한 크기를 보장하지 않음 - (
flex-basis사용 안한다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해,width대신max-width사용가능
