셀렉터
ㅡㅡ레이아웃ㅡㅡ
와이어프레임
목업 : 실제 제품이 작동하는 모습과 동일하게 HTML 문서를 작성
화면을 나누는 방법
- (1) 수직 분할 :
화면을 수직으로 구분하여 콘텐츠가 가로로 배치될 수
있도록 요소를 배치
- (2) 수평 분할 :
분할된 각각의 요소를 수평으로 구분하여
내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
수평으로 구분된 요소에 height 속성을 추가하면, 수평 분할을 보다 직관적으로 할 수 있다.
레이아웃 리셋
(1) HTML 문서가 갖는 기본 스타일이, 레이아웃을 잡는 데 방해가 되기도 한다. 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body> 요소가 가진 기본 스타일에 약간의 여백이 있다. (2) width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있다 (이전 유닛을 통해 박스 크기 측정 기준(box-sizing)에 대해 학습한 내용.) (3) 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다르다* { box-sizing: border-box; } body { margin: 0; padding: 0; }기본 스타일링을 제거하는 CSS코드 예시
ㅡFlexboxㅡ
체크
- display: flex; 를 자식 요소가 아닌 부모 요소에 적용
- flex-direction 을 이용하여 요소를 정렬할 방향을 결정.
- justify-content 와 align-items 를 이용하여 수평-수직 정렬을 결정
- flex-grow 를 이용하여 요소를 얼마나 늘릴 것인지 결정
- flex-basis 를 이용하여 요소의 기본 크기를 결정
- VSCode의 레이아웃을 Flexbox를 이용하여 구현
- Flexbox로 레이아웃 잡기
display: flex 분석
display: flex
부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃
부모 요소에 적용해야하는 Flexbox 속성들
Flexbox 속성중에서는 부모 요소에 적용해야하는 속성들,
자식 요소에 적용해야하는 속성들이 있다.
적절한 위치에 속성을 지정해주지 않으면 요소들이 원하는대로 정렬되지 않는다.부모 요소에 적용해야하는 속성
1. flex-direction : 정렬 축 정하기
부모 요소에 설정해주는 속성
자식 요소들을 정렬할 정렬 축을 정한다. 기본적으로 가로 정렬
row( 기본값 ), column, row-reverse, column-reversemain { display: flex; **flex-direction : row;** }2. flex-wrap : 줄 바꿈 설정하기
하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정한다. 설정해 주지 않으면 줄 바꿈을 하지 않음main { display: flex; **flex-wrap : nowrap;** }nowrap (기본값), wrap, wrap-reverse
3. justify-content : 축 수평 방향 정렬
자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정한다.
요소들이 가로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지,
세로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지 정하는 속성
flex-start , flex-end, center, space-between, space-around4. align-items : 축 수직 방향 정렬
align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정한다. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성
stretch , flex-start , flex-end , center , baseline
- 자식 요소에 적용해야 하는 Flexbox 속성
부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있었다면, 자식 요소에게 적용해야 하는 속성인 flex 는 요소가 차지하는 공간과 관련이 있다.
flex 속성의 값
flex : grow, shrink, basis
(1) grow; 팽창 지수
요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
(2) shrink; 수축 지수
요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
(3) basis; 기본 크기
늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지자식 요소에 flex 속성을 따로 설정해주지 않으면 기본값 적용. 왼쪽>오른쪽
flex: 0 1 auto;이 순서와 기본값은 반드시 기억
flex: grow shrink basis, flex: 0 1 auto각 값을 따로 지정해줄 수 있다.
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
1. grow : 자식 박스는 얼마나 늘어날 수 있을까?
정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것
자식 요소의 grow값 / 자식 요소들의 grow값의 총합 의 비율로 빈 공간을 가져간다.
총합에서의 비율로 빈 공간을 차지2. shrink : 자식 박스는 얼마나 줄어들 수 있을까?
설정한 비율만큼 박스 크기가 작아진다.
flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방3. basis : 이 박스의 기본 크기는 얼마일까?
basis(기본 크기) 는 자식 박스가 flex-grow 나 flex-shrink 에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
flex-grow 가 0일 때, basis 크기를 지정하면 그 크기는 유지flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지
display 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는
경우에 따라, basis 로 설정된 크기가 항상 유지되는 것은 아니다.
기타
flex-grow 속성의 비율은 flex-basis 의 값이 0 일 때 가장 정확해진다.
flex-grow 의 값이 0 일 경우 요소의 크기는 늘어나지 않는다.
flex-grow 의 값이 0 이 아니라면, flex-basis 에서 설정한 값보다 커질 수 있다.
flex-shrink 의 값이 0 이 아니라면, flex-basis 에서 설정한 값보다 작아질 수 있다자식 요소의 줄 바꿈이 되어있음으로 flex-wrap 속성
자식 요소가 좌측 하단부터 순서대로 배치되었으므로 wrap-reverse 속성값줄 바꿈이 되어있고, 요소가 좌측 상단에서부터 배치되어있으므로 flex-wrap : wrap
