Dev Log #6 - 7월 5일

Juhui_0304·2021년 7월 5일
CSSTILhtml개발일지대구AI스쿨
0

Dev Log

목록 보기
6/49

오늘 학습한 내용

✅ z-index
✅ 형제관계 속 position 속성값에 의한 결과
✅ float 속성
✅ flex 속성
✅ css로 중앙 정렬

1. z-index

  • 형제관계에서 3차원 속성을 가지고 있는 absolute나 fixed를 사용하게 되면 레이어가 겹쳐지는 현상이 발생하게 된다.

  • 특정 레이어를 더 위로 배치하고 싶을 때 사용하는 것이 z-index이다.

  • z-index는 z축의 높이에 영향을 미치는 속성이다.

  • 속성값으로는 숫자값만 전달하면 되고 그 숫자에는 단위는 생략이 된다.

  • z-index를 적용하지 않는 영역에서는 z-index가 최초 0인 상태라고 생각하면 된다.

  • 더 높은 z-index값을 가진 영역이 위로 올라온다.

  • 🚨 z-index를 사용할 때 주의점: 3차원적인 영역에서만 사용 가능하다. 이는 3차원적인 특징을 갖고있는 postion속성(fixed, relative, absolute)에서만 사용 가능하다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

</body>
</html>

👉 css

.z-one {
	position: absolute;

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

.z-two {
	position: absolute;

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

👉 결과물

2. 형제관계 속 position 속성값에 의한 결과

  • 첫번째 형제에게 *순수 3차원적인 포지션 속성값(fixed, absolute)을 사용하게 되면 레이어가 겹치게 된다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

</body>
</html>

👉 css

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

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

👉 결과물

  • 두번째(그 다음) 형제에게 순수 3차원적인 포지션 속성값(fixed, absolute)을 사용하게 되면 레이어가 겹치지 않는다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

</body>
</html>

👉 css

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

👉 결과물

  • 큰 공간(section)을 만들 때에는 2차원을 주로 사용한다.(static, relative)

  • 큰 공간(section)안에 들어가는 작은 공간을 만들때에는 2차원 또는 3차원을 사용한다.

3. float 속성

  • 영역을 x축으로 나란히 정렬. 특정 오브젝트를 브라우저 기준으로 왼쪽 끝, 오른쪽 끝에 배치하고 할 때 사용한다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

</body>
</html>

👉 css

.left-1 {
	float: left;

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

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

👉 결과물

✔️ float을 이용해서 전통적인 레이아웃 구조 만들기

🚨 float 사용 시 주의 점

  1. float을 사용하게되면 레이어가 틀어지게 된다.
    (Tip! 고정값을 부모로 갖고있는 영역 안에서 float 속성을 사용해야한다.)
  2. float을 사용한 영역은 그 영역의 높이값이 부모에게 영향을 주지 않는다.
  3. float을 사용할 때에는 position 상태는 static이거나 relative를 사용해야한다. 순수 3차원 absolute, fixed는 float를 함께 사용할 수 없다.

  • header, main, section, div, footer 등 공간을 만들때 사용하는 태그는 block 요소를 가지고 있다.

  • float은 '뜨다'라는 뜻을 가지고 있으므로 일부 3차원적인 요소를 갖고 있다.

  • footer은 clear: both;을 사용해야한다.

  • float-clear(악어와 악어새 같은 존재)

  • float 같은 선상에 박스를 배치하고자 할 때 기능을 킬때 사용하는 것

  • clear 그 기능을 다시 끄고자 할 때 사용하는 속성이다.

  • float 사용 시 tip: 고정값을 부모로 갖고있는 영역 안에서 float 속성을 사용해야한다(레이어 틀어짐 방지)

  • 가변값을 적용하는 경우(ex.width: 50%) 굳이 부모가 고정값을 가질 필요가 없다.

  • 고정값인 부모의 값은 float을 지정한 영역을 합한 값보다 커야한다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<header></header>

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

</body>
</html>

👉 css

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: relative; // float를 사용할 때에는 static, relative 값만 사용한다. 
	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 사용 시 실무 TIP 01

  • footer안에만 clear: both;만 적용하면 html 코드만 봤을 때 어떤 부분에서 float을 사용했고 clear를 사용했는 지 명확하게 확인할 수 없다.

  • 개발자가 html구조를 빠르게 파악할 수 있도록 관례적으로 사용하는 class 명이 있다. ➡️ div class = "clearfix"

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

	<div class = "clearfix"></div> //실무 Tip!

	<footer></footer>

</body>
</html>

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

👉 결과물

✔️ float 사용 시 실무 TIP 02

  • overflow 속성: 요소의 콘텐츠가 너무 커서 요소의 블록 서식 맥락에 맞출 수 없을 때의 처리법을 지정하는 것.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

	<footer></footer>

</body>
</html>

👉 css

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

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

}

👉 결과물

  • overflow와 float을 결합해서 사용하면 자식의 높이값을 부모가 인식할 수 있도록 만들 수 있다.
  • div태그의 자식요소는 float 속성을 이용해 일부 3차원적인 특징을 가지고 있다. 따라서, 자식의 높이값이 부모의 높이값에 영향을 주지않으므로 빈 공간으로 나타난다. 하지만, 부모인 section태그에 overflow: hidden;을 적용하면 이러한 특징을 숨기므로 부모가 자식의 높이값을 그대로 따라가서(150px)오렌지 영역의 박스를 확인할 수 있다.

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

	<div class = "clearfix"></div> //실무 Tip!

	<footer></footer>

</body>
</html>

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

👉 결과물

4. flex 속성

  • 효과적으로 효율적으로 레이아웃 작업을 도와줌
  • float의 발전된 개념
  • 제약사항이 float보다 줄어든다.
  • flex영역으로 지정된 부모의 자식들은 자동적으로 x축으로 정렬된다. 기본적으로 왼쪽에서부터 정렬된다.
  • flex-flow는 direction과 wrap을 동시에 사용할때 쓴다.
  • flex 참고 : https://flexbox.help/
  • 진행방향을 바꾸고 싶으면 flex-direction을 사용하면 된다.
  1. flex-deriction: row (x축으로 정렬, 기본설정)
  2. flex-deriction: column (y축으로 정렬)
  3. flex-deriction: row-reverse (역순으로 x축으로 정렬)
  4. flex-deriction: column-reverse (역순으로 y축으로 정렬)
  • 부모 영역에 맞추어 리사이징하고 싶으면 flex-wrap을 사용하면 된다.
  1. flex-wrap: nowrap; :부모영역을 벗어나지 않고 그 안에 있는 박스들을 부모 영역에 맞추어서 리사이징을 시켜준다.
  2. flex-wrap: wrap; :부모영역보다 자식들의 width 합이 더 크게되면 자동으로 줄바꿈이 된다.
  • justify-content
  1. justify-content: flex-start; :왼쪽으로 정렬할 때 사용
  2. justify-content: flex-end; :오른쪽으로 정렬할 때 사용
  3. justify-content: center; :중앙에 위치
  4. justify-content: space-between; :균일한 간격을 만들고 싶을 때 사용
  5. justify-content: space-around;:박스의 바깥쪽 부분에 균일한 간격을 만들고 싶을 때
  • align-items
  1. align-items(y축 변경): flex-start; :가장 위쪽에 배치
  2. align-items(y축 변경): flex-end; :가장 아래쪽에 배치
  3. align-items(y축 변경): center; :가장 중앙에 배치
  4. align-items(y축 변경): baseline; :박스의 가장 밑에 라인 맞추어 정렬

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

</body>
</html>

👉 css

.container {
	display: flex;
	/*flex-direction: row;*/
	/*flex-wrap: nowrap ;*/
	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;
}

👉 결과물

5. css로 중앙정렬

✔️ margin 이용

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

👉 css

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

	margin: 0 auto;
}

✔️ position: relative, margin-left 이용

👉 html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

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

👉 css

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

	margin: 0 auto;
}

.center-2 {
	position: relative;

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

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

👉 결과물

오늘의 학습 후기(어려웠던 점, 개선할 점)

오늘은 css로 레이아웃을 만드는 법에 대해 공부했다. float 속성을 이용해서 박스를 x축으로 병렬하는 법과 더 나아가 flex 속성을 이용해서 더 간편하고 다양한 방식으로 레이아웃을 구성하는 법을 배웠다. css로 레이아웃을 배치하는 방법이 이렇게 다양했었구나라고 깨달은 하루였다. 사실, 이론수업을 듣지 않고 주먹구구식으로 html, css를 접근했었는데 이번 대구AI스쿨 강의를 통해 2차원, 3차원으로 웹 브라우저를 만드는 이론을 알고나니 더 이해가 잘가고 적용하는 힘을 기른 것 같다! 그래서인지 오늘 어려웠던 점은 크게 없었다! 내일도 열심히 강의를 듣고 개발일지를 작성해야겠다 ⭐️

profile
Juhui_0304
하루하루 성장하는 것을 목표로 합니다🌟
이전 포스트

Dev Log #5 - 7월 2일

다음 포스트

Dev Log #7 - 7월 6일

0개의 댓글