CSS 레이아웃

1. tag

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
		</head>
		<body>
			
			<!-- 둘중에 어느 것을 쓸지는 자유 -->
			
			<!-- 1. div layout -->
			<div id = "header">헤더</div>
			<div id = "nav">메뉴</div>
			<div id = "section">본문</div>
			<div id ="footer">푸터</div>
			
			<!-- 기본 베이스는 레이아웃 태그를 쓰고 레이아웃 안에서 div를 쓰는 경우도 있음. -->
			<!-- 2. layout tag -->
			<header>헤더</header>
			<nav>메뉴</nav>
			<section>본문</section>
			<footer>푸터</footer>
			
		</body>
	</html>

2. flex [vs. float vs. grid]

  1. 배치 전용 기능 / 속성 [float, inline-block 등을 대신 할 수 있다.]

  2. flexContainer : 배치 요소들의 상위 요소

  3. 속성

    1. display : flex : flex 사용 여부
    2. flex-direction : 배치 방향
    3. justify-content : 수평 정렬
    4. flex-wrap : 배치 요소들이 상위 요소의 크기보다 클 때 [과제 11번에 베이킹 클래스 이미지 4개 부분 ]
      1. wrap : 상위 요소 크기에 따른 자동 줄바꿈
      2. no-wrap : [기본 값]
    5. align-items: 수직 정렬
      1. flex-start : 위쪽/윗 변 정렬
      2. center : 가운데(중앙) 정렬
      3. flex-end : 아래쪽(바닥)정렬
      4. stretch : 높이가 정의 X 요소를 가장 큰 요소의 높이로 자동 맞춤 [기본 값]
      5. baseline : 내용 기준 정렬

    item1 ———————————————→ item1 item2 item3

    item2

    item3

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<link
		href="11.css_flex3.css"
		rel="stylesheet"
	>

</head>
<body>

	<p> 1. align-items: flex-start; </p>
	<div class="flexbox1">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
		<div class="box4">box1</div>
		<div class="box5">box2</div>
		<div class="box6">box3</div>
	</div>
	
	<p> 2. align-items: flex-center; </p>
	<div class="flexbox2">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</div>
	
	<p> 3. align-items: flex-end; </p>
	<div class="flexbox3">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</div>
	
	<p> 4. align-items: stretch;  [ 기본값 ]  </p>
	<div class="flexbox4">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
	</div>
	
	<p> 5. align-items: baseline;   </p>
	<div class="flexbox5">
		<div class="box1">box1</div>
		<div class="box2">box2</div>
		<div class="box3">box3</div>
		<div class="box4">box1</div>
		<div class="box5">box2</div>
		<div class="box6">box3</div>
	</div>

</body>
</html>

    @charset "UTF-8";

/*
	class : .	id : #
	복수 선택자 : , 
	하위 선택자 : 띄어쓰기
*/

.flexbox1 , .flexbox2 , .flexbox3 , 
.flexbox4 , .flexbox5 
{ display: flex; width: 200px; }

.flexbox1{ align-items: flex-start; flex-wrap: wrap; }
.flexbox2{ align-items: center; }
.flexbox3{ align-items: flex-end; }
/*stretch :높이가 정의 X 요소를 가장 큰 요소의 높이로  자동 맞춤 [기본 값]*/
.flexbox4{ align-items: stretch; }
.flexbox5{ align-items: baseline; flex-wrap: wrap; }

.box1 , .box2 , .box3 , .box4 , .box5 , .box6
{ 	background: blue; 
	color: white; 
	border: 1px solid white; }

.box1{ width: 50px; height: 50px; }
.box2{ width: 100px; height: 100px; display: inline-flex; align-items: center; }

.box4{ width: 50px; height: 80px; }
.box5{ width: 100px; height: 150px; display: inline-flex; align-items: center; }

Untitled

3. 포지션(Position)

  1. position 위치 기준점

    1. position : relative → 상대 위치 [본래 위치]
    2. position : absolute; → 절대 위치 [부모/상위 요소 위치]
    3. position : fixed; → 화면 위치 [디바이스 위치]
    4. position : static → 작성 순서대로 배치 [기본 값] : 위치 이동 불가

  2. 기준점 기준으로 위치이동

    1. top : 위쪽부터 + : 내려옴 - : 올라감
    2. left : 왼쪽부터 + : 오른쪽으로 - : 왼족으로
    3. right : 오른쪽부터 + : 왼쪽으로 - : 오른쪽으로
    4. bottom : 아래쪽부터 + : 올라감 - : 내려감

    Untitled

    <!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<link href = "12.css_position.css" rel = "stylesheet">
		</head>
		<body>
			<!-- 
				포지션 position 
					1. 기준 점 
						position :  relative;
						position : absolute;
					    position : fixed; 
					    position : static; [기본 값] -> 일반 배치가 static/ 작성 순서대로 배치
 			-->
			<h3> 상대 위치 : position :  relative; </h3>
			<div class = "box1">box1</div>
			<div class = "box2">box2</div>
			<div class = "box3">box3</div>
			
			<h3> 절대 위치 : position : absolute;</h3>
			<div class = "box4">box4</div>
			<div class = "box5">box5</div>
			<div class = "box6">box6</div>
			
			<h3> 위치 고정 : position: fixed;  </h3>
			<div class = "box7">box7</div>
			<div class = "box8">box8</div>
			<div class = "box9">box9</div>
			
			<h3> 부모 : relative</h3>
			<div class = "parent1">
				<div class = "box10">box10</div>
				<div class = "box11">box11</div>
				<div class = "box12">box12</div>			
			</div>
			
			
		</body>
	</html>

    @charset "UTF-8";

.box1, .box2, .box3,
.box4, .box5, .box6,
.box7, .box8, .box9,
.box10, .box11, .box12{
	width : 100px;
	height: 80px;
	background-color: yellow;
	border: solid 1px red;
}
.parent1{
	width : 300px;
	height: 300px;
	border: solid 1px green;
}

/* 1. relative */
.box2{ position: relative; left : 50px; top : 50px; }

/* 2. absolute */
.box5{ position: absolute; left:50px; top :50px;}

/* 3. fixed */
.box8{ position: fixed; left: 50px; top : 50px;}

/* 4. relative <-- absolute  */
.parent1{ position: relative;}
.box11{ position: absolute; right: 10px; bottom: 10px; }

/*5. static[기본 값]을 쓰면 top, bottom, right, left 적용X*/
.box12{ left: 20px; }

    Untitled