유연해서 강력한
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로 만들 수 있는
반응형 서비스 레이아웃
앱으로~
1.심플한 구조
-코드가 간단 : 짧아짐 ( 기존 코드랑 중앙정렬비교 )
-직관적 : 내가 의도하는 바를 코드로 정확히 전달할 수 있다. ( 선언 방식 )
2.유동적인 레이아웃
-흐름
-정렬
-순서
-normal-flow를 따르지 않는 레이아웃도, flex-direction : column과 order를 활용해 유연하게 표현가능합니다.
3.반응형 웅앵웅에 대응하는 레이아웃 (유동 크기)
-반응형 레이아웃에 효과적 / 미디어쿼리를 사용하지 않고도, 브라우저 크기에 따른, 유동적인 사이즈 대응이 가능
1.심플한 구조
-코드가 간단 : 짧아짐 ( 기존 코드랑 중앙정렬비교 )
-직관적 : 내가 의도하는 바를 코드로 정확히 전달할 수 있다. ( 선언 방식 )
2.유동적인 레이아웃
-흐름
-정렬
-순서
-normal-flow를 따르지 않는 레이아웃도, flex-direction : column과 order를 활용해 유연하게 표현가능합니다.
3.반응형 웅앵웅에 대응하는 레이아웃 (유동 크기)
-반응형 레이아웃에 효과적 / 미디어쿼리를 사용하지 않고도, 브라우저 크기에 따른, 유동적인 사이즈 대응이 가능
CSS Flexbox로 만들 수 있는 반응형 서비스 레이아웃
By Min Young Lee
