210705 개발일지

juyoungkim·2021년 7월 5일

1) 학습한 내용

z-index

z축에 영향을 미치는 속성

1. 3차원 영역에서 만 사용가능 
2. 포지션 속성값에서 사용 3차 : absolute,fixed 
/ 2,3차 : reletive)

<div class="z-one"></div>
<div class="z-two"></div>

.z-one
	{width: 200px;
	height: 400px;
	background-color: yellow;
	/*z-index: 10;*/}

.z-two
	{position: absolute;
	width: 200px;
	height: 300px;
	background-color: blue;
	/*z-index: 20;*/}

float

'Float'(띄우다) 3차원적 요소 일부 갖게함
2차원 블럭요소
브라우저를 늘렸을때 줄였을때왼쪽 오른쪽끝에 구성되는 것

<div class="left-1"></div>
<div class="right-1"></div>

.left-1 
	{float: left;

	width: 100px;
	height: 150px;
	background-color: blue;}


.right-1 
	{float: right;

	width: 100px;
	height: 150px;
	background-color: green;}

플럿을 활용한 전통적인 웹사이트 만드는법

Clear

플럿의 기능을 끄고자 할 때 사용

	<header></header>

	<section>


	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>

	</section>

	
	<footer></footer>
    
 header 
    {width: 100%;
	height: 100px;
	background-color: yellow;}

.left 
	{float: left;

	width: 300px;
	height: 200px;
	background-color: pink;}

.center {float: left;

	width: 500px;
	height: 200px;
	background-color: blue;}

.right 
	{position: absolute;
	float: right;

	width: 300px;
	height: 200px;
	background-color: green;}

footer 
	{clear: both;

	width: 100%;
	height: 100px;
	background-color: black; }

section 
	{width: 1400px;
	height: 200px;
	background-color: orange;}

플럿 사용 주의점

1. 플롯 사용할 영역이 가변값이면 안됨
고정값인 곳에서 사용해야 레이어가 틀어지는것을 방지

2. 자식이 3차원이 부모가 높이값이 없을때 자식의 높이값이 부모에게 영향을 줄 수 없다.

3. 포지션상태는 static이거나 relative를 사용해야한다 (순수3차원)

플룻사용시 실무팁

clear fix

<section>
<div class="left-2"></div>
<div class="right-2"></div>
</section>

<div class="clearfix"></div>

.clearfix 
	{clear: both;}

over flow

<div class="over-box">
	<p>Nice to meet you Nice to meet you Nice to meet you
	Nice to meet youNice to meet youNice to meet youNice to meet you
	Nice to meet youNice to meet youNice to meet youNice to meet you
	Nice to meet youNice to meet youNice to meet youNice to meet you
	Nice to meet youNice to meet youNice to meet you
	Nice to meet youNice to meet youNice to meet you</p>
</div>

.over-box 
	{overflow: hidden;
	/*overflow-y: scroll;*/
	/*overflow-x: scroll;*/

	width: 200px;
	height: 200px;
	background-color: yellow;}

<section>
<div class="left-2"></div>
<div class="right-2"></div>
</section>

section 
	{overflow: hidden;
	width: 800px;
	background-color: orange;}

flex

	<div class="container">
		<div class="item one"></div>
		<div class="item two"></div>
		<div class="item three"></div>
	</div>
    
.container 
    {display: flex;
	/*flex-direction: row;*/
	/*flex-wrap: wrap;*/

	flex-flow: row wrap;
	justify-content: space-between;
	align-items: baseline;

	width: 1000px;
	height: 500px;
	border: solid 10px red;}

.item 
	{width: 200px;}

.one 
	{height: 100px;
	background-color: yellow;}

.two 
	{height: 200px;
	background-color: blue;}

.three 
	{/*width: 900px;*/
	height: 300px;
	background-color: orange;}