210705 개발일지

📌 학습한 내용

CSS 레이아웃 2

1. `z-index` 속성

: z축에 영향을 미치는 속성

3차원 성격을 가지고 있는 position: (absolute, fixed, (relative));에서만 사용 가능)속성을 쓰면 레이어가 겹치는 현상 발생

z-index: n; : 속성값으로 숫자만 입력, 단위 필요 없음.
z-index를 적용하지 않은 영역 = z-index=0;

👉 z-index의 값이 큰 쪽이 위로 올라온다.

👉 첫 번째에 나오는 형제의 포지션이 2차원이냐 3차원이냐에 따라서 레이어가 겹칠지 안겹칠지 결정된다.
(첫 번째 나오는 형제의 포지션이 2차원이면 레이어가 겹치지 않는다.)

<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: 400px;
	background-color: blue;
}

큰 공간 작업 - 2차원 사용 (static, relative)
작은 구역 - 2차원 혹은 3차원

2. `float` & `clear` 속성

float : 같은 선상에 박스를 배치하고자 하는 기능을 킬 때

float: left;

float: right;

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

```css
.left-1 {
	float: left;

	width: 100px;
	height: 150px;
	background-color: blue;
}
.right-1 {
	float: right;

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

👉 공간을 만들 때 사용되는 태그(<header>, <main>, <section>, <div>, <footer> 등)들은 block 요소의 성격을 가지고 있다.

clear : 기능을 끌때 (float을 마지막으로 사용한 태그, 그 다음 태그에 넣어준다.)

clear: both; : float: right; 와 float: left;의 양쪽 기능을 모두 끄겠다.

<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: 100px;
	height: 200px;
	background-color: pink;
}
.center {
	float: left;

	width: 300px;
	height: 200px;
	background-color: blue;
}
.right {
	float: right;

	width: 100px;
	height: 200px;
	background-color: green;
}
footer {
	clear: both;

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

위처럼 float을 사용했을 때, 브라우저 사이즈를 줄이면 레이어가 틀어진다.

👉 고정값을 부모로 갖고 있는 영역 안에서 float을 사용해야 레이어가 틀어지는 것을 방지할 수 있다.

<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: fixed;*/
	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;
}

그러나 float를 사용한 영역이 가변값을 갖고 있을 때는 굳이 위처럼 하지 않아도 된다.
부모태그의 width 값은 float을 지정한 영역의 합보다 크거나 같아야 한다.

👉 float을 사용한 영역은 그 height값이 부모에게 영향을 주지 않는다.

👉 float를 사용하려면 position 상태는 static 또는 relative를 사용해야 한다.
(순수 3차원 position 속성값은 absolute와 fixed는 float과 함께 쓸 수 없다.)

(실무 tip 1)* class="clearfix" : 관례적으로 사용하는 class명, 어떤 지점에서 float이 사용이 됐고, 중단이 됐는지를 확인 가능

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

<footer></footer>

.left-2{
	float: left;

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

.right-2 {
	float: right;

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

footer {
	width: 100%;
	height: 100px;
	background-color: deeppink;
}

.clearfix {
	clear: both; /* -> .clearfic안에는 이 값만 넣어줌*/
}

3. `overflow` 속성

hidden; : 공간보다 긴 글은 숨김
overflow-y: scroll; : y축으로 벗어난 범주에 스크롤 적용
overflow-x: scroll; : x축으로 벗어난 범주에 스크롤 적용

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

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

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

(실무 tip 2) overflow: hidden;을 이용해 자식의 높이값이 부모에게 영향을 줄 수 있도록 장치 만드는 것 가능(float의 부모로 overflow: hidden;을 사용하게 되면 부모의 높이값을 인식할 수 있다.)

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

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

.left-2{
	float: left;

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

.right-2 {
	float: right;

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

footer {
	width: 100%;
	height: 100px;
	background-color: deeppink;
}

.clearfix {
	clear: both;
}

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

4. `flex` 속성값

: float의 발전된 개념, 보다 수월하게 웹사이트 배치 작업 가능

display: flex; : 자동으로 x축 정렬
flex-direction: row; : (기본값) x축 정렬, 왼쪽에서 부터 정렬
flex-direction: row-reverse; : x축 정렬, 역순 정렬
flex-direction: column; : y축 정렬, 아래로 정렬
flex-direction: column-reverse; : y축 정렬, 역순 정렬
flex-wrap: nowrap; -> 기본값, 부모의 영역에서 벗어나지 않고 내부 박스들을 부모의 영역에 맞춰 resize 해준다.

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

.container {
	display: flex;
	flex-wrap: nowrap;

	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: 200px;
	background-color: orange;
}

flex-wrap: wrap; -> 부모의 width값보다 자식들의 width값의 합이 크면 자동으로 줄바꿈을 넣는다.
flex-flow: direction과 wrap을 동시에 입력할 때 사용

flex-flow: row wrap;

justify-content : x축 정렬작업

: flex-start; : (기본값) 왼쪽 정렬
: flex-end; : 오른쪽 정렬

(flex-direction: row;와 차이 확인)
:flex-center; : 가운데 정렬
:space-between; : 영역들 사이에 균일한 간격 넣기
:space-around; : 영역 안쪽과 바깥쪽에 간격 넣기 (단, 박스 양끝과 영역들 사이의 간격은 다름)

align-items : y축 정렬작업

: flex-start; : 가장 상단부에 위치

.container {
	display: flex;
	/*flex-direction: row-reverse;*/
	/*flex-wrap: wrap;*/
	flex-flow: row wrap;
	justify-content: space-between;

	align-items: flex-start;

	width: 1000px;
	height: 500px;
	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-end; : 가장 하단부
: center; : 가운데
: baseline; : 모든 박스들의 아랫부분에 맞춰서

5. 중앙정렬

(1) `margin: 0 auto;`

margin: n1 n2; : n1 - 상하 / n2- 좌우

<div class="center-1"></div>

.center-1 {
	width: 200px;
	height: 200px;
	background-color: yellow;

	margin: 0 auto;
}

(2) `position`과 결합

<div class="center-2"></div>

.center-2 {
	position: relative;

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

	left: 50%;

	margin-left: -100px;
    /* width값의 절반 만큼 */
}

단, 공간의 크기가 변경되면, margin-left의 값도 변경해야 한다.

📌 학습내용 중 어려웠던 점

overflow: hidden;을 이용해 자식의 높이값이 부모에게 영향을 줄 수 있도록 장치 만드는 것의 원리

📌 해결방법

강사님께 문의했을 때, overflow: hidden;을 긴글을 숨긴다기 보다는 기능을 안에서만 작동하게 하는 것으로 생각하라 하셨다. float이 밖에 영향을 못미치게 해 기능한다고 생각하니 바로 이해가 됐다. 하지만 이러한 방법들이 현재로서는 해결방법이 없을 때 사용하는 일종의 트릭이기 때문에 주의해야 한다고 덧붙이셨다.

참고 사이트:
flex 활용 :https://flexbox.help/
중앙정렬 공식 : https://css-tricks.com/centering-css-complete-guide/

📌 학습소감

사실 지난주 수강 범위를 착각해서 레이아웃 파트를 한 번에 다 들어버렸다. 그것도 두 번이나😂 어려운 내용이었던 만큼 오늘은 충분히 복습하는 시간을 가졌다. 확실히 세 번째 복습을 하니 강의를 중단하고 버벅거리는 과정이 많이 줄었다. 내일은 강의를 쭉 듣고, 혼자힘으로 코드를 작성해볼 예정이다. 한 단계 나아간 기분 😊

Author And Source

이 문제에 관하여(210705 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jiyoon_jeong2005/210705-개발일지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

210705 개발일지

CSS 레이아웃 2

1. z-index 속성

2. float & clear 속성

3. overflow 속성

4. flex 속성값