section1 unit6
웹 페이지의 '레이아웃'을 구성하기 위한 'Flexbox'를 배웠다.
1. 레이아웃
각각의 요소를 목적에 맞게 배치하는 것
Chapter1-1. 와이어프레임
레이아웃의 뼈대를 그리는 단계
단순한 선이나, 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사. 단순한 형태로 레이아웃과 제품의 구조를 보여주기 위해 사용합니다.
목업(Mock-up)
트윗 작성자, 트윗 내용, 작성한 날짜 등을 HTML 문서 내에 하드코딩(HTML 문서에 아래와 같이 하나하나 입력)하는 방식
Chapter1-2. 화면을 나누는 방법
(이 부분 개념학습 다시 보면 유용할 듯,,)
CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업 진행
레이아웃 리셋
1) HTML 문서는 기본적인 스타일을 가지고 있다.
2) 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, 요소가 가진 기본 스타일에 약간의 여백이 있다.
3) width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있다. (box-sizing)
4)브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다.
몇 줄의 코드를 적용시키면, 기본 스타일링을 제거하여 디자인한 대로 레이아웃을 구현할 수 있다.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}2. flexbox
Flexbox의 flex(flexible)는 "잘 구부러지는, 유연한"이라는 뜻. Flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다.
기싶(기억하고 싶은것들)
display: flex; 를 자식 요소가 아닌 부모 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법
main{
display: flex
}flex-direction : row, column
justify-content : flex-start , flex-end, center, space-between, space-around
align-items : stretch , flex-start , flex-end , center , baseline
flex-grow 요소를 얼마나 늘릴 것인지
flex-basis 요소의 기본 크기를 결정
VSCode의 레이아웃을 Flexbox를 이용하여 구현
부모 요소에 적용해야하는 Flexbox 속성들
- 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성들이 있습니다
1) flex-direction : 정렬 축 정하기
부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정한다. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 한다.
main {
display: flex;
**flex-direction : row;**
}
/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */ 2) flex-wrap : 줄 바꿈 설정하기
flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다.
부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련이 있습니다.
flex 속성에는 세 가지 값을 지정해줄 수 있다.
flex: <grow(팽창 지수)> <shrink(수축 지수)> <basis(기본 크기)>grow(팽창 지수) 는 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지, shrink(수축 지수) 는 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지, basis(기본 크기) 는 요소의 기본 크기는 얼마인지를 의미한다.
자식 요소에 flex 속성을 따로 설정해주지 않으면 다음과 같은 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됩니다.
flex: 0 1 auto;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
1) grow
각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것
#box1{
flex-grow:1;
}
#box2{
flex-grow:1;
}
#box3{
flex-grow:1;
} 2) shrink
비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장한다.(flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방)
3) basis
- basis(기본 크기)기본 크기
- flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지 diplay 속성에 flex 가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아니다.
flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있다. (flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width 대신 max-width를 쓸 수 있습니다.
