1. 학습내용

z-index

z축에 영향을 미치는 속성

z-one에 position 속성값을 absolute로 주면 노란색공간이 파란색 공간뒤로 가게된다.

형제관계에 absolute, fixed (3차원 성격)를 사용하게되면 레이어가 겹치는 현상이 발생하게된다. 이럴 경우 z인덱스를 통해 자유자재로 조절할 수 있다.

z축의 속성값은 숫자값 - 단위생략, z인덱스를 적용하지않은 영역은 최초값 0이다, 더높은 숫자를 가진 영역이 위로 올라온다.

z-index는 z축이 필요(3차원) 즉 3차원영역에서만 사용가능하고 이러한 3차원 특징을 가지고있는 position 속성값(fix,rel,ab)에만 적용이 가능하다. static은 z축이 없어서 불가

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

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

형제관계에 따른 포지션 속성값에 따른 결과

첫번째 형제에게 순수한 3차원 포지션속성값(fixed,absolute) - 레이어 겹침

첫번째 형제는 2차원 포지션속성값을 주고 다음 형제에게 3차원 포지션속성값을 적용하면 - 레이어 겹침없음

첫번째형제의 포지션이 2차원이냐 3차원이냐에 따라 레이어가 겹칠지 안겹칠지가 정해짐

안방이나 거실같은 큰공간을 만들때 2차원 주로사용(static,relative), 큰공간안에 들어가는 작은구역은 2차원이나 3차원 사용. 이유는 큰공간의 양쪽 모두가 3차원일경우 레이어가 겹침현상이 발생하기때문에

이전시간에 배운 부모자식간 48개 그리고 더욱더 완벽하게 하려면 형제지간 16개 = 완벽

float

display inlie-block을 사용하지않고 내가선택한 영역을 x축으로 나란히 정렬시키는방법, 그리고 특정 오브젝트를 브라우저 기준으로 왼쪽끝 오른쪽끝으로 배치하고자 할때 쓰는 css속성

공간을 만들때 쓰는 태그들(header,main,section,footer,div등) 전부다 block요소

2차원 block요소라 y축정렬, float사용해 left와 right에 넣으면 둘다x축에 배치됨(왼쪽끝, 오른쪽끝) 그리고 브라우저를 늘리거나 줄일시 '항상' 왼쪽끝 오른쪽끝에 위치.

이상황에서 left center right를 같은선상에 배치시키면 레이어가 겹쳐진다. (float가 띄우다라는 뜻으로 생각하면 이해가 빠르다 = 3차원적인 특징 일부를 갖게 만드는것)

<header></header>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
<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 {
	float: right;
	width: 300px;
	height: 200px;
	background-color: green;
}
footer {
	width: 100%;
	height: 100px;
	background-color: black;
}

float 사용시 항상 같이 기억해야하는게 clear

float은 같은선상에 박스들을 배치하는 기능을 킬때 사용, clear 그 기능을 다시 끄고자할때 사용하는 속성

사용방법 : clear사용할때는 float을 마지막으로 사용한 태그(예시: right영역) 그다음에 나오는 태그 안에다가 넣어주면된다. both(right ,left 양쪽모두의 기능을 끄겟다)

.right {
	float: right;
    ...
}
footer {
	clear : both;
	width: 100%;
	height: 100px;
	background-color: black;
}

float 사용시 주의점

브라우저폭을 줄였을떄 파란색과 초록색(예시)이 만나게되면 레이어가 틀어지게됨(float의 단점) 그래서 사용시 매우 효율적으로 사용해야함

float 사용팁

1. div 부모 = body(브라우저전체), float를 사용할 때는 사용한 영역의 부모의 크기가 가변적이면안된다.(항상 고정값인 공간안에서 사용해야 레이어가 안틀어짐)

주의1 : section으로 감싸고 그 section의 크기를 지정(section의 고정값은 3개의 영역의 width값보다 같거나 커야한다)

주의2 : 자식(float 사용영역)의 height값이 부모에게 영향x

2. 영역의 크기를 고정값이 아니라 가변값(예: 20%) 으로해주면 부모의 크기를 고정시킬필요가없다(사용빈도 드뭄)

<header></header>
<section>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</section>
<footer></footer>

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

3. float을 사용한다면 static이거나 relative여야함 순수 3차원 포지션속성값(fix,ab)는 float과 같이사용할수없다.

right부분에 relatvie적용(결과 똑같음), abs.fix적용(float 작동X)

float도 3차원적인특징을 가지고 있고 두개는 순수 3차원 postion 속성값이기 때문에 3차원끼리 만나서 그 기능이 상쇄됐다 <<이렇게 생각하기

.right {
	position: absolute;
	float: right;
	width: 300px;
	height: 200px;
	background-color: green;

실무팁

float 문제를 해결하기 위해 clear:both 사용. 근데 사용했을때 html code만 봤을떄 어떤부분에 float이 사용됐고 어떤부분에서 clear가 됐는지 명확하게 확인 불가능. 개발자가 html구조를 빠르게 파악하기위해서 관례적으로 사용하는 클래스명이있음(clearfix)

저 클래스를 기준으로해서 클래스 안쪽에 clear:both 이렇게 사용하면 개발자는 이것만보더라도 float이 이전에 사용됐고 꺼졋구나라는걸 유추할수있음 (자주사용)

<div class="right-2"></div>
<div class="clearfix"></div>

.right-2 {
	float: right;
	width: 100px;
	height: 150px;
	background-color: blue;
.clearfix {
	clear: both;
}

실무팁2

float 사용한 영역을 부모로 감싸고 부모는 고정값인 width를 가지고있음

부모의 배경색이 왜 안나옴? 자식이 3차원이라 부모의 높이값에 영향못줌

자식을 float로 가지고있는 부모영역에다가 overflow hidden 사용시 - 주황색나옴(자식의높이값 영향줌)

overflow와 float의 결합해서 사용하게되면 자식의 높이값을 부모가 인식할 수 있게되도록 만듬

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

overflow

분량이 많아져서 박스영역을 벗어나면서까지 화면에 표기되는 모든 오브젝트는 감추고싶을떄 사용됨

hidden 적용하게되면 박스를 벗어나는 모든 오브젝트 감춰지게된다

벗어난 영역에 무슨 내용물이 있는지 알고싶을 경우는 overflow hidden이아니라 over flow-y scroll(x도가능)

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

.over-box {
	overflow: hidden;
   	<!-- overflow-y: scroll; -->
	width: 200px;
	height: 200px; 
	background-color: yellow;
}

flex

효과적이고 효율적으로 웹사이트 레이아웃 작업을 진행하도록 도와주는 속성 (float 발전개념)

float보다 더 수월하게 웹사이트 배치작업할때 사용 그리고 float에 비해 제약사항이 많이 줄어듬

정렬작업을 3개의 item 안에할거면 flex는 item의 부모 container에 flex를 주입

<div class="container">
	<div class="item one"></div>
	<div class="item two"></div>
	<div class="item three"></div>
</div>

.container {
	display: flex;
	width: 1000px;
	border: solid 10px red;
}
.item {
	width: 200px;
	height: 300px;
}
.one {
	height: 100px;
	background-color: yellow;
}
.two {
	height: 200px;
	background-color: blue;
}
.three{
	width: 900px;
	height: 300px;
	background-color: orange;
}

기본적으로 왼쪽정렬

진행방향 바꾸고 싶으면 flex direction

row(기본값) - x축정렬, column - y축정렬, row-reverse(역순으로 x축)

.container {
	display: flex;
	flex-direction: row;

flexwrap : nowrap이 기본값 , nowrap 사용하게되면 부모의 영역을 벗어나지않게 그안에 있는 박스들을 자동으로 부모영역에 맞춰서 resize시켜줌

one two three width합이 1300이됨 즉 컨테이너 width값보다 커짐. 그럴경우 기존의값들이 줄어들어있음

wrap으로 변경하면 자동으로 줄바꿈현상이일어남(float현상과 유사)

.container {
	flex-wrap: wrap;
 }

flex-flow: row wrap

direction과 wrap을 한번에 지정하고할떄사용

flex의 정렬

x축 정렬작업을 진행할때 justicfy -content 속성사용

flex-start 기본값(왼쪽배치), flex-end 오른쪽에서시작, center 중앙, space-between 세개의영역에 균일한 간격, space around 박스의 바깥쪽 부분 동일한 공백

space between

space around

y축 정렬작업을 진행할때 align-items 속성사용

flex-starts 기본값(가장위쪽에배치), flex-end 가장아래쪽에배치, center 중앙배치, basline 박스들간에 밑에쪽 라인에 맞춰 정렬

.container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: flex-end;
}

center

basline

https://flexbox.help/ - flex 참고사이트

x축으로 중앙정렬

실무에서 가장많이쓰임

1. margin 0 auto 앞의 숫자는 상하(0px) 뒤에는 좌우(자동으로 맞추겠다) - block 요소에서 주로 사용

.center-1 {
	width: 300px;
	height: 300px;
	background-color: yellow;
	margin: 0 auto;

2. relative position과 결합방식

left 50% - 왼쪽면 기준으로 50%이동(공간의 왼쪽면이 중앙에 위치) // 왼쪽으로 떙겨와야함 파란색박스의 절반값만큼

이 방식의 단점은 공간의크기가 변경되면 마진left도 바꿔줘야함 (두번수정해야한다는 단점)

.center-2 {
	position: relative;
	width: 300px;
	height: 300px;
	background-color: blue;
	left: 50%;
	margin-left: -150px;
}

중앙정렬방식이 더있지만 추가적인 속성은 배우지않아서 나중에 배움

참고사이트 https://css-tricks.com/centering-css-complete-guide/

2. 학습한내용 중 어려웠던 점

생각보다 레이아웃 방식이 다양해서 어떤방식을 채용할지 고민이 많이 될 것 같다는 생각이 들었다. 실무에선 코드를 적게쓰는 방식을 선호한다는데 많은 공부가 필요할것같다.

3. 해결방법

꾸준한 복습과 알려주신 사이트를 통해 미리 공부해야겠다.

4. 학습소감

드디어 레이아웃의 개념이 끝이나고말았다. 내일부턴 레이아웃 실습을 시작하는데 굉장히 기대가 많이된다.