[대구AI스쿨] 개발일지 6일차 210705

김선아·2021년 7월 5일
CSShtml대구AI스쿨웹프로그래밍
0

대구AI스쿨 개발일지

목록 보기
6/46

학습내용

1. z-index

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

css↓

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

.z-two {
	width: 200px;
	height: 200px;
	background-color: blue;
}

1-1) z-one에 position: absolute;를 작성하면 파란색 박스가 사라진다.

1-2) 하지만, z-two가 사라진 것이 아니라 뒤에 겹쳐져 있었던 것이기 때문에, z-two의 높이를 300px로 바꾸면 노란색 밑으로 표시된다.

.z-one {
	position: absolute;

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

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

2-1) z-two에 position: absolute;를 추가 작성하면 노란색 박스가 사라진다.

2-2) 마찬가지로 노란색 박스가 사라진 것이 아니라 뒤로 겹쳐진 상태이기 때문에 z-one의 높이값을 400px으로 조정하면 파란색 박스 밑으로 겹쳐진 것을 확인할 수 있다.
3차원끼리의 형제관계에서는 html이 뒤에 작성될수록 앞쪽에 배치된다.(z축이 더 높다)

.z-one {
	position: absolute;

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

.z-two {
	position: absolute;

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

3-1) z-one에 z-index: 10;을 추가한다. z-index: 숫자(단위x);
z-index를 입력하지 않으면 기본값이 0이므로, z-index값이 더 큰 노란색 박스가 위로 배치된다. (z축 : 3차원 속성)

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

3-2) z-two에 z-index값을 20으로 설정하면 z-index값이 더 큰 파란색 박스가 위로 배치된다.

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

형제관계 레이어들이 3차원 속성값을 사용하면 레이어가 겹치는 현상이 발생한다.

  • 같은 3차원 속성인 경우에는 html이가 뒤에 작성될 수록 앞쪽에 배치된다. (z축이 더 높다)
  • 2차원과 3차원이 같이 사용될 때는 앞의 태그의 속성에 따라 겹침현상 발생유무가 결정된다. (뒤에서 자세히)

4) position 속성값에 따라 어떻게 결과가 나타나는지 알아보자.
3-2)의 css에서 position과 z-index를 삭제한다.

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

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

4-1) z-one에만 position: absolute;를 입력한다.
레이어가 겹쳐진다.

4-2) z-two에만 position: absolute;를 입력한다.
레이어가 겹쳐지지 않는다.

첫번째 형제에 적용된 속성값이 2차원인지 3차원인지에 따라, 레이어 겹침현상 발생유무가 결정된다.
3차원은 순수3차원인 fixed, absolute만 해당된다.

  • 첫번째 태그가 3차원일때 : 레이어 겹침현상이 일어난다.
  • 첫번째 태그가 2차원일때 : 레이어 겹침현상이 일어나지 않는다.

★ 큰 공간을 만들때는 2차원으로 만들고, 작은 구역들은 2, 3차원을 적절히 사용하는 것이 좋다. → 큰 공간들이 모두 3차원이면 레이어가 겹치기 때문.

2. float와 clear

선택한 영역을 x축으로 나란히 정렬시키는 속성이 float이다.
clear는 float 설정을 닫아주는 역할을 한다.

1) 오브젝트를 왼쪽, 오른쪽에 배치

특정 오브젝트를 브라우저를 기준으로 왼쪽 끝, 오른쪽 끝으로 배치하는 방법

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

css↓

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

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

left-1, right-1에 각각 float속성을 입력한다.

.left-1 {
	float: left;

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

.right-1 {
	float: right;

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

  • 같은 x축에 배치됨
  • 브라우저를 늘리거나 줄여도 항상 왼쪽 끝, 오른쪽 끝에 위치. 이때 크기는 변하지 않음
<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 {
	width: 100px;
	height: 200px;
	background-color: pink;
}

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

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

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

① left에 float: left;속성을 입력하고, 핑크색 박스가 float되어 파란색과 겹쳐진 것을 확인하기 위해 center의 높이값을 300px로 조정한다.

header {
	width: 100%;
	height: 100px;
	background-color: yellow;
}

.left {
	float: left;

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

.center {
	width: 300px;
	height: 300px;
	background-color: blue;
}

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

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

② center에 float: left; 속성을 추가로 입력한 뒤, 높이값을 다시 200px로 조정한다.

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 {
	width: 100px;
	height: 200px;
	background-color: green;
}

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

★ float을 연달아 사용하면 겹치지 않을 뿐 아니라, 브라우저와 오브젝트간의 마진값이 적용되어 있지 않음.

  • display: inline-block은 가로로 정렬되는 공간을 표현할 수 있지만, 브라우저와 오브젝트사이, 오브젝트 간 사이에 기본적으로 마진값이 적용되어있다.

③ right에 float: right; 속성을 입력한다.

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 {
	width: 100%;
	height: 100px;
	background-color: black;
}

④ 검은색 바를 div태그들 밑으로 내리기 위해서 footer에서 clear 속성을 쓴다.

★ float은 같은 선상에 배치하고자 하는 기능을 켤때, clear는 float기능을 닫을 때 사용한다.
마지막으로 float를 사용한 태그의 다음 태그에 넣어주면 된다.

앞서 z-index를 배울 때, 먼저나온 속성이 3차원일때 레이어 겹침 현상이 일어나서 나중에 나온 레이어들이 뒤쪽으로 배치된다고 했는데, float도 비슷하게 생각하면 된다. 기능을 닫는 clear속성을 사용하면 됨.

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

2) float 사용할 때 3가지 주의점

주의점 1 :레이어 틀어짐 현상

center와 right의 넓이를 각각 500px, 300px으로 변경시킨다.
브라우저 창의 크기를 줄이면 레이어 틀어짐 현상이 나타난다.
실제 웹사이트에서는 레이어가 틀어지면 안되기 때문에 주의해야한다.

header {
	width: 100%;
	height: 100px;
	background-color: yellow;
}

.left {
	float: left;

	width: 100px;
	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 {
	clear: both;

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

1-1) 레이어틀어짐 현상 방지 ① : 부모태그 section를 만들어 영역 크기값 지정하기

float을 사용할 영역의 부모의 크기가 가변값이면 안된다. 고정값을 가진 부모의 공간 안에서 float를 사용해자만 레이어가 틀어지는 현상을 방지할 수 있다.

html에서 div태그들을 section으로 감싸준다.

<header></header>

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

<footer></footer>

section태그의 영역을 고정값으로 정해준다.

css↓

section {
	width: 1400px;
        height: 200px;
        background-color: orange;
}
  • 부모의 공간크기를 지정할 때, float를 지정한 자식 공간의 width값의 합보다 크거나 같아야한다.

1-2) 레이어틀어짐 현상 방지 ② : 각 float의 넓이를 가변값으로 지정하기

float의 넓이를 px이 아닌 %로 입력한다.

.left {
	float: left;

	width: 30%;
	height: 200px;
	background-color: pink;
}

.center {
	float: left;

	width: 20%;
	height: 200px;
	background-color: blue;
}

.right {
 	float: right;

	width: 50%;
	height: 200px;
	background-color: green;
}

브라우저 창의 크기대로 크기가 리사이징 된다.

주의점 2 : 3차원 속성을 가질 경우, 자식의 높이값이 부모의 높이값에 영향을 주지 않는다.

주의점 3 : float속성을 사용할 때는 반드시 static, relative를 사용해야 한다.

순수 3차원인 fixed와 absolute 속성에서는 float가 적용되지 않는다.

※ float를 사용할 때, 실무팁 첫번째 : clearfix

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

<footer></footer>

위의 html에서 left-2와 right-2에 각각 float: left;, float: right;가 적용되어있다. 이때, footer에 clear 속성을 적용시키려고 한다.

바로 css파일에서 footer를 지정하여 clear를 작성해도 되지만, html에서는 어디까지 float가 작성되어있고, 어디부터 clear인지 알지 못하기 때문에 관례적으로 마지막 float가 사용된 다음에
clearfix라는 div태그를 추가한다.

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

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

<footer></footer>

css↓

clearfix {
	clearfix
}

※ float를 사용할 때, 실무팁 두번째 : overflow

먼저 overflow를 알아두자

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

css↓

.over-box{
	overflow: hidden;
	
	width: 200px;
        height: 200px;
        background-color: yellow;
}

overflow:hidden;을 사용하면, 박스를 벗어나는 오브젝트는 감춰진다.

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

css↓

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

section에서 overflow: hidden;을 추가하면 자식의 높이값을 인식하게 된다.

3. flex

flex는 보다 효과적으로 레이아웃 작업을 도와주는 css의 속성이다.
float의 발전된 기능. float보다 수월하게 웹사이트의 배치작업을 할 수 있다.

<div class="container">

	<div class="item one"></div>
	<div class="item two"></div>
	<div class="item three"></div>
	<!-- class가 두개씩 설정되어 있음 -->
</div>

css↓

.container {
	width: 1000px;
	border: solid 10px red;
}

.item {
	width: 200px;
	height: 300px;
}

/*item의 크기는 모두 같다 */
/*나머지 서로 다른 부가적인 속성은 다른 클래스명을 사용하여 개별작성한다.*/

.one {
	background-color: yellow;
}

.two {
	background-color: blue;
}

.three {
	background-color: orange;
}

1) flex

container에 display: flex;를 입력
자동으로 x축으로 정렬한다. (왼쪽에서 정렬이 기본값)

css↓

.container {
	display: flex;  /* 자동으로 x축으로 정렬 */

	width: 1000px;
	border: solid 10px red;
}

/* one, two, three의 높이값은 그림과 같이 지정*/

2) flex-direction

flex의 정렬방향을 바꾸고 싶을때, flex-direction을 추가하여 사용한다.

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

	width: 1000px;
	border: solid 10px red;
}

3) flex-wrap

three의 넓이를 900px로 변경한 뒤, container에 flex-wrap 속성을 입력한다.

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

	width: 1000px;
	border: solid 10px red;
}

.three {
	width: 900px;
	background-color: orange;
}

부모태그인 container는 width : 1000px,
자식태그 3개의 합은 200+200+900 = 1300px이다.

3-1) flex-wrap: nowrap

3-2) flex-wrap: wrap

  • flex-flow
    flex-direction과 flex-wrap을 동시에 입력할 때, flex-flow을 사용한다.
.container {
	display: flex;  
        flex-flow: row wrap; /*기본값*/

	width: 1000px;
	border: solid 10px red;
}

4) justify-content

5) align-items

4. 중앙정렬

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

css↓

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

	margin: 0 auto;   
    /*margin값이 두개이면 상하. 좌우를 나타낸다.*/
    /*브라우저 크기를 늘렸다 줄여도 항상 중앙에 위치한다*/
}

중앙정렬에 관해서는 다음 시간에 실습을 한 후에 다시 다루도록 한다.
참고 사이트 https://css-tricks.com/centering-in-css/

어려웠던 내용

딱히 없었음
강의 들으면서 생겼던 의문은 그 다음에 바로 설명을 해 주셨다.
처음에 z-index를 설정하기 전, 형제태그간에 3차원 2차원이 섞여서 사용되면 3차원이 무조건 앞으로 겹쳐지는 건가 했는데
첫번째 태그가 어떤 태그인지에 따라 겹침이 발생하기도 하고 겹치지 않기도 한다고 해서 의문이 풀렸다.

  • 처음의 태그의 position 속성이 2차원이면 겹침현상 (X)
  • 처음의 태그의 position 속성이 3차원이면 겹침현상 발생
profile
김선아
이전 포스트

[대구AI스쿨] 개발일지 5일차 210702

다음 포스트

[대구AI스쿨] 개발일지 7일차 210706

0개의 댓글