유연해서 강력한

CSS Flex 레이아웃 실습

1. flex 알아보기

- 레이아웃 속성 변천사 (기존속성과 비교)

- flex 레이아웃

2. flex의 장점

- 심플한 구조

- 불가능했던 레이아웃을 구현

- 크기조절의 유연성

3. flex와 만나면 유용한 속성들

- margin : auto

- min-height, min-width

4. 실무 활용 예제

강의 목차

1. 레이아웃을 만들 수 있는 속성

1. flex 알아보기

- 레이아웃 속성 변천사 (기존속성과 비교)

- flex 레이아웃

table

- table 태그 특징

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

table 레이아웃

- table 레이아웃 특징 및 단점

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

float

- float 속성 특징

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

float 레이아웃

- float 레이아웃 특징 및 단점

- 단점 clear 및 시멘틱X

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

flex

- flex 특징

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

flex 레이아웃

- flex 레이아웃 특징 및 단점

- 단점 IE

<table>
    <caption></caption>
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

2. flex의 장점

- 심플한 구조

- 불가능했던 레이아웃을 구현

- 크기조절의 유연성

심플한 구조

<div class="container">
	<div class="item">item 1</li>
	<div class="item">item 2</li>
	<div class="item">item 3</li>	
</div>

.container{
    display: flex;
}

html

css

- 부모요소인 flex container와 자식요소인 flex item으로 구성된다.

- 정렬하고자 하는 항목들의 부모에 display: flex를 선언

심플한 구조

<div class="container">
	<div class="item">item 1</li>
	<div class="item">item 2</li>
	<div class="item">item 3</li>	
</div>

.container{
    display: flex;
}

html

css

- 부모요소인 flex container와 자식요소인 flex item으로 구성된다.

- 정렬하고자 하는 항목들의 부모에 display: flex를 선언

3. flex와 만나면 유용한 속성들

- margin : auto

- min-height, min-width

4. 실무 활용 예제

CSS Flexbox로 만들 수 있는

반응형 서비스 레이아웃

https://m.shopping.naver.com/art/home

https://m.shopping.naver.com/style/style/home

https://m.naver.com/

앱으로~

1.심플한 구조

-코드가 간단 : 짧아짐 ( 기존 코드랑 중앙정렬비교 )

-직관적 : 내가 의도하는 바를 코드로 정확히 전달할 수 있다. ( 선언 방식 )

2.유동적인 레이아웃

-흐름

-정렬

-순서

-normal-flow를 따르지 않는 레이아웃도, flex-direction : column과 order를 활용해 유연하게 표현가능합니다.

3.반응형 웅앵웅에 대응하는 레이아웃 (유동 크기)

-반응형 레이아웃에 효과적 / 미디어쿼리를 사용하지 않고도, 브라우저 크기에 따른, 유동적인 사이즈 대응이 가능