7월 5일 Velog

류영서·2021년 7월 5일

학습한 내용

CSS 레이아웃

1. z-index

(1) 개념

[html]

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

[css]

.z-one {
	position: absolute;

	width: 300px;
	height: 400px;
	background-color: yellow;
	z-index: 10;
}

.z-two {
	position: absolute;

	width: 200px;
	height: 300px;
	background-color: blue;
	z-index: 20;
}

z-index : z축의 높이에 영향을 주는 속성
형제 관계의 태그에 position 속성값으로 absolute(or fixed : 3차원 속성)을 주면 형제 태그의 레이어가 겹치는 현상이 발생한다.
z-index 값은 숫자만 입력하면 된다.
z-index의 최초 상태는 0
숫자가 더 클수록 위로 올라온다.
3차원 position 속성값(absolute, fixed, relative)에서만 가능하다.

(2) 형제 관계에 대한 position 속성

[동일한 html 태그]

[css]

.z-one {
	width: 300px;
	height: 400px;
	background-color: yellow;
}

.z-two {
	position: absolute;

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

two(뒷 형제 태그)에 단독으로 position 속성값으로 absolute(순수 3차원) 값을 주면 레이어가 겹치지 않는다.
one(먼저 나오는 형제 태그)의 position이 2차원/3차원에 따라서 레이어가 안겹친다./겹친다.
※ position의 기본값 : static, 2차원
큰 공간을 만들 때 2차원 사용(static, relative) -> 겹침 현상 막음
큰 공간 안의 작은 공간 만들 때 2차원/3차원 사용

2. float

(1) 개념

[html]

	<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;
}

3차원 속성
속성값 left/right : 브라우저 변화에 맞춰 왼쪽 끝/오른쪽 끝에 배치
y축 정렬되어 있는 block 요소들을 같은 선상에 배치하고자 할 때 사용

(2) 응용

[html]

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

[css]

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;
}

header, div, footer : block 요소의 성격 -> y축 정렬(줄바꿈)
① class="left"에 float:left; : center의 레이어가 left 레이어의 선상에 겹쳐짐
② class="center"에 float:left; : center 레이어가 left 레이어 옆으로 정렬됨, right 레이어가 left, center 레이어의 선상에 겹쳐짐
③ class="right"에 float:right; : left, center 레이어와 같은 선상의 오른쪽에 정렬됨, footer 레이어가 left-center-right의 선상에 겹쳐짐
④ footer에 clear:both; 적용 : float 속성을 제거 -> y축 정렬(줄바꿈)
left, center, right : float에 의해 3차원 속성 갖게 됨
float을 마지막으로 사용한 태그 다음에 나오는 태그에 clear 속성을 삽입
-> both : left/right 둘 다 사용을 취소

(3) 주의점

[html]

	<header></header>

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

	<footer></footer>

[css]

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 {
	position: static;
	/*position: relative;*/
	/*position: absolute;*/
	/*position: fixed;*/

	float: right;

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

footer {
	clear: both;

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

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

주의점 1 : 브라우저를 줄일 때 각 태그의 레이어에 틀어짐 발생

float을 부여할 태그의 부모 태그의 영역 크기로 고정값을 사용하여 레이어의 틀어짐 현상을 방지
: body 태그의 width : 100% -> section 태그의 width : 1400px
부모 태그의 고정값 width는 자식 태그의 width의 합보다 크거나 같아야 함
: 1400 > 100 + 300 + 100, 합보다 작을 때는 틀어짐
float을 부여할 자식 태그의 레이어가 가변값(%)이면 부모 태그 레이어의 가변값/고정값 여부 상관하지 않음 -> 드문 경우

주의점 2: 자식 태그에 3차원 속성이 부여됐을 때(float ＋fixed, absolute) 자식의 높이 값이 부모의 높이 값에 영향을 주지 않는다.

주의점 3 : 자식 태그(right)에 부여하는 position 속성값의 역할

static/relative : 기본
absolute/fixed : right 내의 float 적용 해제
따라서 float을 사용할 때 position은 static, relative만 사용

(4) float에 대한 실무 TIP-1

[html]

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

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

	<footer></footer>

[css]

.left-2 {
	float: left;

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

.right-2 {
	float: right;

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

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

.clearfix {
	clear: both;
}

footer에 clear:both;을 넣기보다 ‘clearfix’라는 class를 가진 공간을 따로 만들어 clear;both;를 부여한다.
-> 어디에서 float 사용을 중지했는지 html에 표식

(5) float에 대한 실무 TIP-2

* Overflow

[html]

	<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 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 </p>
	</div>

[css]

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

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

overflow : hidden; : 영역을 벗어나는 내용은 감춰짐
overflow-y(x): scroll; : y(x)축 방향으로 스크롤 생성하여 감춰진 내용을 보여줌

[html]

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

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

	<footer></footer>

[css]

.left-2 {
	float: left;

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

.right-2 {
	float: right;

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

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

.clearfix {
	clear: both;
}

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

자식 태그가 3차원(float ＋fixed, absolute)일 때 부모 태그에 overflow : hidden; 삽입하면 자식 태그의 높이 값이 부모 태그에 영향을 준다.

3. flex

[html]

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

[css]

.container {
	display: flex;
	/*flex-direction: row;*/
	/*flex-wrap: wrap;*/
	/*flex-flow: row wrap;*/

	/*justify-content: space-between;*/
	/*align-items: center;*/

	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;
}

float의 발전된 개념, 제약 사항이 적다.
display:flex; : 부모 태그에 삽입, 자식 태그의 레이어를 x축으로 (왼쪽부터) 정렬
flex-direction
- row : x축, 왼쪽부터, 기본값
- column : y축, 위부터
- row-reverse : x축, 오른쪽부터
- column-reverse : y축, 아래부터
flex-wrap
- nowrap : 기본값, 자식 태그 영역의 합이 부모 태그의 영역보다 클 때부모 영역을 벗어나지 않고 자동으로 자식 태그의 영역을 resize
- wrap : 자식 태그 영역의 합이 부모 태그의 영역 클 때 줄바꿈
flex-flow: row nowrap; : direction과 wrap을 한 번에 지정
justify-content : x축 정렬에 대한 속성
- flex-start : 기본값, 왼쪽 정렬
- flex-end : 오른쪽 정렬
- flex-center : 중앙 정렬
- space-between : 영역 사이에만 균일한 간격을 주고 싶다
- space-around : 박스 바깥쪽과 안쪽 둘 다 영역에 균일한 공백을 주고 싶다 (아래 사진)
align-items : y축 정렬에 대한 속성
- flex-start : 가장 위쪽에 정렬
- flex-end : 가장 아래쪽에 정렬
- center : 중앙에 배치
- baseline : 영역의 가장 아래쪽 라인에 맞춰 정렬 (아래사진)
https://flexbox.help/ : flex 속성 시각적으로 확인

4. 중앙 정렬

[html]

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

[css]

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

	margin: 0 auto;
}

.center-2 {
	position: relative;

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

	left: 50%;
	margin-left: -150px;
}

※ margin에 속성값 두 개를 입력하면 전자: 상/하 margin, 후자: 좌/우 margin

margin: 0 auto; : 상/하 = 0, 좌/우 = 자동
-> 브라우저 크기 상관 없이 x축 중앙 정렬, 주로 block 요소에서 사용
① left: 50%; : 본인의 왼쪽면을 기준으로 50% 이동(왼쪽면과 중앙선 일치)
② margin-left: -150px; : 본인 width의 절반값만큼 왼쪽으로 이동
-> 브라우저 크기 상관 없이 x축 중앙 정렬
width 값을 수정할 때 margin-left 값도 수정해줘야 하는 단점이 있다.
https://css-tricks.com/centering-css-complete-guide/ : 중앙 정렬 공식

학습한 내용 중 어려웠던 점 또는 해결 못한 것들

형제 관계에 따른 포지션 상관관계를 position 속성값을 삽입하여 연습해 보았다.

해결 방법 작성

[html]

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

[css]

.z-one {
	/*position: staatic;*/
	/*position: fixed;*/
	/*position: relative;*/
	/*position: absolute;*/


	width: 200px;
	height: 400px;
	background-color: yellow;
	z-index: 10;
}

.z-two {
	/*position: staatic;*/
	/*position: fixed;*/
	/*position: relative;	*/
	/*position: absolute;*/


	width: 200px;
	height: 300px;
	background-color: blue;
	z-index: 20;
}