1주 3일 HTML/CSS 활용

레이아웃 뼈대 그리기 -> 와이어프레임

목업 -> html만으로 실제 제품 작동모습과 동일하게 문서 작성 -> 하드코딩

 

 

화면나누기 

1. 수직분할 -> 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치

2. 수평분할 -> 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치

 

HTML에서 각 영역 class 지정하여 구분 

 <div class="col w10">
    <div class="icon">아이콘 1</div>
    <div class="icon">아이콘 2</div>
    <div class="icon">아이콘 3</div>
  </div>
  <div class="col w20">
    <div class="row h40">영역1</div>
    <div class="row h40">영역2</div>
    <div class="row h20">영역3</div>

CSS에서 각 지정된 영역 설정

.w70 { width: 70%; }
.h40 { height: 40%; }

 

레이아웃 리셋

기본 스타일링을 제거하는 CSS코드

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

alt shift 방향키 아래 하면 필요한 만큼 추가

 

Flexbox목표

• display: flex;를 자식 요소가 아닌 부모 요소에 적용해야 함을 이해한다.
• flex-direction을 이용하여 요소를 정렬할 방향을 결정할 수 있다.
• justify-content와 align-items를 이용하여 수평-수직 정렬을 결정할 수 있다.
• flex-grow를 이용하여 요소를 얼마나 늘릴 것인지 결정할 수 있다.
• flex-basis를 이용하여 요소의 기본 크기를 결정할 수 있다.
• VSCode의 레이아웃을 Flexbox를 이용하여 구현할 수 있다.

Flexbox로 레이아웃잡기

display: flex 는 부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법

Flexbox 속성 중에서는 부모 요소에 적용해야하는 속성들, 자식 요소에 적용해야하는 속성 구분 필요

 

부모요소 적용 flexbox 속성

display: flex

부모 박스 요소에 적용해, 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법

 

1. flex-direction: 정렬 축 정하기

flex-direction 속성은 부모 요소에 설정해주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정함

row/ column/ row-reverse/ column-reverse

 

2. flex-wrap: 줄 바꿈 설정

flex-wrap 속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정함, 설정안하면 줄바꿈 없음

nowrap/ wap/ wrap-reverse

 

3.justify-content: 축 수평 방향정렬

justify-content 속성은 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함

flex-start , flex-end, center, space-between, space-around

 

4.algin-items: 축 수직 방향 정렬

align-items 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성

stretch , flex-start , flex-end , center , baseline

 

자식요소 적용 flex박스 속성

자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련

 

속성의 값

flex 속성에는 세 가지 값을 지정

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

grow(팽창 지수) -> 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지

shrink(수축 지수) -> 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지

basis(기본 크기) -> 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지

 

이 순서와 기본값은 반드시 기억 -> flex: grow shrink basis, flex: 0 1 auto