2021.07.05 css주요 속성(2)

오늘의 강의 내용

z-index 속성

위 이미지는 z-index속성값과 position속성값을 적용하기전의 모습이다.

z-index속성값과 position속성값을 적용후 레이어가 겹쳐진 모습이다.

<!-- html언어 -->
<div class="z-one"></div>
<div class="z-two"></div>

<!-- css언어 -->
.z-one {
	position: absolute;

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

.z-two {
	position: absolute;

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

z-index속성값과 position속성값을 적용한 소스코드 이다.

• 형제관계의 속성들에 3차원 position속성값을(absolute, fixed) 사용하면 레이어가 겹치는 현상이 발생

• 겹치는 레이어의 높이에 영향을 끼치는 속성값이 z-index이다.

• 주의할점 z-index는 z축에 있어, 즉 3차원적인 특징을 가지고 있는 속성값에서만 쓸수있다. ( relative, absolute, fixed 에서만 사용가능)

• 형제관계 따른 position 속성값에 따라서 결과값이 결정된다.
  첫번째 형제가 position static 2차원일 경우 두번째 형제에게 3차원 속성값을 주어도 레이어가 겹치지 않는다. 이같은 문제때문에 큰 섹션을 작업시 2차원으로 작업하는것이 좋다.

display,inline-block 을 사용하지 않고 가로배치, 특정 object를 브라우저를 기준으로 왼쪽끝,오른쪽끝으로 배치할려고 할떄의 css속성

위 이미지는 float 속성을 적용하기 전의 모습이다.

float 속성, clear 속성을 적용후의 모습이다.

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

위 이미지는 float 속성과 clear 속성을 적용한 소스코드이다.

• flot 속성 : 3차원적인 특징으로 레이어를 위로 뛰운다는 개념

• float 속성을 사용시 꼭 같이 사용하는 속성으로 float속성을 사용시 clear: both 가 따라오는 속성이다.
  float은 같은 선상에 box들을 배치하고자 하는 기능을 킬때 사용하는것이고, clear는 반대의 개념으로 그 기능을 끌때 사용하는것이다.

• clear 사용시 float을 마지막으로 사용한 태그, 그다음에 나오는 태그 안에다가 clear값을 넣어주면 된다.

• float 속성의 주의할점

첫번째 레이어의 형태가 유지가 되지않고, 틀어지게 된다. 사용시 효율적으로 사용됨이 요구된다.

두번째 float을 사용한영역은 그영역의 높이값이 부모에게 영향을 주지 않는다.

세번째 float을 사용한다면 position 상태가 static 이거나 relative를 사용해야 한다. 즉 순수 3차원인 absolute,
나 fixed를 사용할수 없다. 3차원끼리 만났기에 상쇄되었다고 이해하면 쉬울것 같다.

• float 속성 사용시 한가지 tip
  float을 사용한 영역의 부모의 크기가 가변값이면 아니된다. 고정값이여야지 레이어가 틀어지는 현상을 방지할수있다.
  또한 float을 사용한 영역의 총합보다 부모의 크기가 같거나, 커야지 레이어가 틀어지지 않는다.

float을 사용시 실무 tip

위 이미지는 clearfix를 적용하기전의 모습이다.

clearfix를 적용한 후의 모습이다.

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

위 이미지는 clearfix를 적용한 후의 소스코드이다.

• clearfix를 적용하는 이유는 간단히 설명하자면 html 언어에서의 float속성의 끝맺음을 알기 쉽게 하기위해서다. 즉clearfix를 사용하면 그위 까지만 float을 사용한것이다 라고
  이해할수 있다.

두번째 tip으로 overflow 속성이 있다. 예를 들면

내가 설정한 box영역을 벗어나는 모든 object를 깔끔하게 하기위해서 사용하는 속성이 overflow 속성이다. 이때에는
overflow: hidden;을 사용한다.

overflow: hidden;을 사용을 사용하여 깔끔히 정리된 모습이다. 그런데 이때 잘린 object의 내용물을 보고 싶다면
overflow-y: scroll; , overflow-x: scroll; 을 사용하여
object의 내용물을 볼수있다.

overflow-y: scroll; , overflow-x: scroll; 을 사용하여
y축, x축으로 scroll기능이 생긴 모습이다.

<!-- 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
	Nice to meet you Nice to meet you Nice to meet you</p>    
</div>

<!-- css언어 -->
.over-box {
	overflow: lhidden;
	overflow-y: scroll;
	overflow-x: scroll;
	width: 200px;
	height: 200px;
	background-color: yellow;
}

위 이미지는 overflow 속성을 적용한 소스코드이다.

또다른 overflow: hidden;을 사용하는 방법으로는 float을 사용할때 자식을 float을가지고 있는 부모에게 width고정값을 가지고 있을때

부모영역은 2차원, 자식이 3차원이므로 나타나지 않는다.
이때 overflow: hidden;을 사용하면

이와 같이 나타나게 된다. 정리하자면 overflow: hidden; 과
float을 결합하여 사용하게 되면 자식의 높이값을 부모가 인식할수있도록 만들수있다.

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

위 이미지는 overflow: hidden; 과 float을 결합하여 적용한
소스코드이다.

flex 속성

• flex속성은 속성값의 경우의 수가 너무 많아 정리하기가 용이하지 않아 flex속성을 공부할수 있는 웹사이트 링크를 걸어놓겠다.

• flex속성의 다양한 속성값의 경우의 수를 시각적으로 확인할수 있는 사이트 https://flexbox.help/

• 처음에 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-wrap: wrap;

	width: 1000px;
	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;
}

flex속성의 다양한 속성값의 경우의 수 중에서 몇가지 예제의 소스코드이다.

중앙정렬

• x축으로 중앙정렬
  margin: 0 auto; 속성을 사용하여 중앙정렬 할수있다. margin속성의 앞의 속성값은 상,하를 담당하고 뒤에 속성값은 좌,우를 담당한다. 여기서 auto는 중앙을 자동으로 맞추겠다는 의미이다.
  참고로 margin: 0 auto; 같은 경우 block요소에서 주로 사용하면 된다.
  
  margin: 0 auto;를 적용하기전의 모습이다.
  
  margin: 0 auto;를 적용후 좌로 치우친모습 에서 x축으로 중앙정렬을 한것을 볼수 있다.

두번째 방법
position과 결합시키는 방법으로 먼저 position: relative; 적용하면

딱히 변하는 모습은 없다. 이때 relative 앞서 말했다 시피 top, left, right, bottom을 사용할수 있는데 left: 50%;
를 적용시 왼쪽면을 기준으로 자기자신이 브라우저 폭의 50%만큼 이동하게 된다. 가변값이기에 브라우저폭을 줄여도 50%를 유지한다.

left: 50%;를 적용한 모습이다. 위에 노랑색 box와는 맞지않지만 왼쪽면을 기준으로 50%만큼 이동한것이다. 그러나 파랑색박스 자체를 중앙정렬하기 위해서는 지금모습의 절반값 만큼은 다시 왼쪽으로 와야하는데 margin-left: 를 사용하여 중앙정렬을 맞출수있다.

margin-left: 를 사용하여 중앙정렬을 맞춘 모습이다.

<!-- 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-left: 값도 달라져야 하기에 두번 수정해야하는 단점이 있다.

• 다양한 중앙정렬 공식을 알려주는 사이트 https://css-tricks.com/centering-css-complete-guide/

강의 마치고난뒤 소감

오늘도 어려움을 갱신하게 되는거 같다. 엄청난 정보의 파도에
내가 휩쓸려 정신을 못차릴것 같았다. 특히 flex속성을 배울때는
도저히 어디서 부터 시작해야 할지 감도 잡히지 않았다. html,css배우면 배울수록 창의력이 정말 요구되는 작업이라는 생각이 들었다. 아직은 시작이 좁아 창의력을 펼치기에는 무리가 있지만 매번 말하지만 반복과 연습으로 이를 성장시켜야 겠다.