<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS float 관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
#menu {list-style:none; padding:0 }
/*ul의 li 요소에 float 지정 - 배치방향이 가로 */
/* left: 왼쪽부터 가로정렬 */
/* right: 오른쪽부터 가로정렬 (역순) */
#menu li {float:left; margin: 15px 25px }
/* 특정 요소에 float 속성이 부여되면 뒤에 따라오는 요소에도 float 속성이 부여됨 */
/*후속 요소에 부여된 float 속성을 제거하려면 clear 속성을 사용하면 됨*/
/*left/right: left/right float속성만 제거*/
/*both: 모든 float 속성 제거*/
hr {clear:both}
.box {height: 50px; padding: 10px; font-size:30px;
color:white; font-weight: bold; margin: 30px 0 }
.d1 {background: red; width: 300px; float:left}
.d2 {background: orange; width:500px; float:right}
img {float:left; margin: 10px;}
.imgdiv {width: 500px; float: left}
.container {width: 75%; padding:15px;
border: 1px dashed black; margin:0 auto}
header {height:120px; background: orange}
aside {width: 15%; height: 500px;
background: limegreen; float:left;}
section {width:83%; height:500px;
background: skyblue; float:right }
footer {height:120px; background: gold; clear: both}
</style>
</head>
<body>
<h1>CSS float 관련 속성</h1>
<h2>개요</h2>
<p>html요소의 배치는 일반적으로 위에서 아래로 배치됨 </p>
<p>하지만, 이러한 배치방식을 바꾸어 다른 요소들과 잘 어울리게
좌우로 배치하고 싶다면 float 속성을 사용</p>
<p>웹페이지 레이아웃 구성에 자주 사용</p>
<ul id="menu">
<li>contact</li>
<li>store</li>
<li>support</li>
<li>cart</li>
</ul>
<hr>
<div class="box d1">♯1</div>
<div class="box d2">♯2</div>
<hr>
<p>float의 원래 용도는 텍스트와 이미지를 함께 배치할 때
이미지 주위를 텍스트로 감싸기 위한 것이었음 </p>
<img src="../img/plane.png" width="150px">
<div class="imgdiv">dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa
dsasasasasasasasasasasasasasasasasasasasasasasasasasasasasasasa</div>
<hr>
<p>float 속성으로 레이아웃 구성하기</p>
<div class="container">
<header>header</header>
<div id="main">
<aside>aside</aside>
<section>section</section>
</div>
<footer>footer</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS flex 관련 속성</title>
<link rel="stylesheet" href="../css/normalize.css">
<style>
.container {border:1px dashed black;
display: flex}
/* flex :item들 수평으로 배치, item의 크기는 내용의 width만큼 차지 */
.item { background: gold;
padding:30px; margin: 10px; text-align: center;
color:crimson; font-size: 30px}
.fd {
flex-direction: row; /*item을 행(가로)로 배치*/
flex-direction: column; /* item을 열(세로)로 배치*/
flex-direction: row-reverse; /*item을 행으로 역순 배치 */
flex-direction: column-reverse; /*item을 열으로 역순 배치 */
}
.jc {justify-content: flex-start; /*item을 시작위치(왼/위)에 배치*/
justify-content: flex-end; /*item을 끝위치(아래/오른)로 배치*/
justify-content: center; /*item을 중앙에 배치*/
justify-content: space-between; /*item을 사이에만 일정한 간격으로 배치*/
justify-content: space-around; /*item을 앞뒤에 적절한 공간 배치*/
justify-content: space-evenly; /*item을 앞뒤에 똑같은 간격 공간 배치*/
}
.ai div:first-child{padding: 0;}
.ai div:nth-child(2) {padding: 0;}
.ai div:nth-child(3) {padding: 10px;}
.ai div:nth-child(4) {padding: 0;}
.ai div:last-child {padding: 0;}
.ai {
height:300px;
align-items: flex-start; /*item을 기본위치(왼/위)에 배치*/
align-items: flex-end; /*item을 끝위치(아래)에 배치*/
align-items: center; /*item을 중앙위치에 배치*/
align-items: baseline; /*item을 텍스트 베이스라인 위치에 배치*/
}
.fg1 {flex-grow:1;}
.fg2 {flex-grow:2;}
.fg3 {flex-grow:8;}
</style>
</head>
<body>
<h1>CSS flex 관련 속성</h1>
<h2>개요</h2>
<p>레이아웃 배치 전용 CSS속성으로 고안됨</p>
<p>따라서, float이나 inline-block보다 편리하고 강력한 기능이 많음 </p>
<p>caniuse.com에서 flex지원 브라우저 확인</p>
<p>flexboxfroggy.com/#ko에서 flex관련 속성 실습해볼 수 있음</p>
<h2>기본구조</h2>
<img src="../img/flex01.png" width="50%">
<p>flexbox는 복수의 하위요소인 flex item과
그 상위요소인 flex container로 구성</p>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<h2>flexbox 속성</h2>
<img src="../img/flex02.png" width="50%">
<p>flexbox 속성은 container에 정의하는 속성과 item에 정의하는 속성으로 나눠짐</p>
<p>flex-direction 속성은 item들이 배치되는 축의 방향을 결정</p>
<div class="container fd">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
<p>justyfy-content 속성으로 item들을
메인축방향으로 적절히 정렬할 수 있음</p>
<div class="container jc">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
<p>align-items 속성으로
item들을 수직축 방향을 적절히 </p>
<div class="container ai">
<div class="item">a</div>
<div class="item">b</div>
<div class="item">g</div>
<div class="item">1</div>
<div class="item">B</div>
</div>
<p>flex-grow 속성으로 각 item의 끝 여백을 적절한 크기로 확장할 수 있음</p>
<p>즉, flex-basis 속성을 이용해서 item의 너비를 설정하고,
flex-grow로 flex-basis로 설정한
item의 너비보다 더 커질 수 있도록 결정 </p>
<div class="container">
<div class="item fg1">1</div>
<div class="item fg1">2</div>
<div class="item fg1">3</div>
</div>
<div class="container">
<div class="item fg2">1</div>
<div class="item fg3">2</div>
<div class="item fg2">3</div>
</div>
</body>
</html>
