1)학습내용

Z태그

HTML

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

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

y축 정렬

HTML

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

CSS

.right-1 {
	float: right; ---> 같은 선상이나 왼쪽과 오른쪽으로 분리
    
    width: 100px;
    height: 150px;
    background-color: green;
    
}

***공간을 만드는 태그들은 전부다 블록요소의 성격, 줄바뀜 후 y축 정렬

HTML

<header></header>

<section>

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

</section>

<footer></footer>

CSS

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

.left {
	float: left; ---> 공중에 띄워놓음 파란영역으로 들어감
    
	width: 300px;
    height: 200px;
    background-color: pink;
}

.center {
	float: left; ---> 띄운 다음에 왼쪽에서 정렬하겠다

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

.right {
	position: static or relative; ---> 3차원 끼리 만나면 기능이 상쇄된다고 이해
    
    float: right; ---> 띄워서 우측으로
    
	width: 300px;
    height: 200px;
    background-color: green;
}

.footer {
	clear: both; ---> float 같은 선상에 배치기능 켤 때, clear 기능 끌 때

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

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

• 플롯은 레이아웃이 틀어짐

• body 태그는 브라우저(고정 값이 아님) 부모의 크기가 가변값이 아닌 고정값이어야 안틀어짐.

• section으로 고정해야 안 틀어짐(가변값일 때(%)는 section 안에 넣을 필요가 없음)

• 자식의 높이값이 부모의 높이에 영향을 안줌(3차원), float은 부모에게 영향을 주지않음

float 실무 팁(clearfix)

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

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

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

.clearfix {
	clear: both;
}

글자박스

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

section {
	overflow: hidden; ---> 보모의 높이값을 부모가 인식 할 수 있음 
    width: 880px; ---> 고정값, 자식이 3차원이면 부모에 영향 x
    background-color: orange;

.over-box {
	overflow: hidden; ---> 노랑 박스를 넘어서면 자동으로 숨겨짐
    overflow-y: scroll; ---> 숨겨진 것이 무엇인지 보고 싶을 때 y축
    overflow-x: scroll; ---> 숨겨진 것이 무엇인지 보고 싶을 때 x축
    
    width: 200px;
    heithg: 200px;
    background-color: yellow;
}

flex(float 의 발전된 개념)

HTML

<div class="container">
	<div class="item one"></div> ---> 클래스는 별명이라 여러개 사용가능
    <div class="item two"></div>
    <div class="item three"></div>
</div>
    

CSS

.container {
	display: flex; ---> 속성을 변경 (row는 기본값)
    
    flex-direction: column; ---> y축 정렬
    flex-direction: row-reverse; ---> 역순정렬
    flex-direction: column-reverse; ---> y축 역순정렬
    flex-wrap: nowrap; ---> 부모영역을 벗어나지 않고 부모영역에 맞춰 resize
    flex-wrap: wrap; ---> 부모 영역보다 자식들의 width 합이 크면 자동으로 줄바꿈 현상이 일어남
    
    flex-flow: row wrap; ---> 동시에 사용
    justify-content: flex-start;
    
    justify-content: flex-end;
    justify-content: center;
    justify-content: space-between;
    justify-content: space-around;
    
    align-items: flex-start; ---> 가장 위쪽에 배치
    align-items: flex-end; ---> 가장 끝으로 배치
    align-items: baseline; ---> item들의 가장 밑에쪽 라인에 맞춰 배치
    

	width: 100px;
    height: 500px;
    border: solid 10px red;
}

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

.one {
	width: 100px;
	background-color: yellow;
}

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

.three {
	/*width: 900px;*/
    height: 300px;
	background-color: orange;
}

• 구글에서 https://flexbox.help 보면 이해하는데 도움이 된다

박스 중앙정렬하는 방법

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

.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%; ---> 왼쪽 0 기준으로 50% 이동
   	margin-left: -150px; ---> 중앙정렬 가능
    
   	!<--- 단점, 공간의 값이 바뀌면 마진의 값도 바꿔줘야한다 --->
   

2)어려운점

• 레이아웃의 배치를 아는 것 같지만 막상 홀로 해보면 여전히 모르겠음

• 과제를 위한 코딩을 하는 것인지 코딩을 위한 과제를 하는 것인지 헷갈리기 시작함

• 

영상 소리가 너무 작은데 해결 방법이 없음, 오늘따라 영상이 중간에 멈춰서 잘 안 움직임

3)해결방법

• 익숙하지 않으니까 그렇다고 생각함. 남들이야 뭐라고 하던지 반복하기로 함

• 코딩실습과 동시에 강의를 듣지 않으니 좀 더 이해하는데 집중할 수 있었음

• 코드 자료가 나와있었으면 좋겠으나 그렇지 않아 일단 적어놓고 다시 들음

4)학습소감

• 과제 제출도 좋으나 영상을 들으면서 같이 코딩을 하니 집중이 더 잘 안됨

• HTML과 CSS를 배우고 있는 것은 맞지만 여전히 홀로 실습하려고 하면 어려움을 느낌

• HTML과 CSS보다 파이썬을 통한 분석을 배우고 싶다는 생각이 듦 동시에 사용자와 가장 가까운 HTML과 CSS를 뜯어보는 것이 흥미롭다는 생각이 듦