210705

1) 학습한 내용
z-index/float과 clear/overflow/flex/정렬 하는 방법

github

---

형제관계가 3차원인 position: absolute를 가지면 레이아웃이 겹쳐짐
z-index z축의 높이에 영향(단위는 생략)
z-index 숫자 아무것도 안적혀있으면 0인 상태 (3차원 속성을 가진 포지션 속성값에만 사용 가능 fixed, absolute, relative)

형제관계에 따른 포지션 속성값에 따라 결과값 어떻게 달라지는지: 첫번째 형제의 포지션이 2차원, 3차원인지에 따라서 레이어가 겹칠지 안겹쳐질지 결정됨. 큰공간을 만들땐 2차원. 둘다 3차원이면 겹쳐지니까! 두번째 형제에게 position: absolute; 사용하면 레이어 안겹침

float: right; 항상 레이아웃 오른쪽정렬, 선택된 영역을 공중에 띄우는 역할 3차원적, 첫번째 형제에게 포지션이 2, 3차원인지에 따라 레이어가 겹칠지 안겹쳐질지 결정, 공간 만들때 사용된 태그는 block 설정 가지고 있음
clear: both; (양쪽 float의 기능을 끄겠다)일종의 악어와 악어새 처럼 float(같은선상에 박스 배치 하고자 할 때 기능 킬때)사용했을때 clear(같은선상에 박스 배치하고자할때 기능 끌때), float을 마지막으로 쓴 태그 그 다음 태그안에다 clear값을 넣으면 됨 

float사용 주의점
1. 레이어의 형태 유지가 안됨, 틀어질수 있음

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

의 부모는 = 브라우저.
부모값이 고정값이어야 레이어 틀어짐 방지됨

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

</section>

css

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

부모값 section에 div넣어 고정해주면 레이아웃 고정됨. 부모의 width값은 float을 지정한 영역의 합보다 크거나 같아야함.
%로 사이즈 주면 가변값이라 레이어가 틀어질일 없음. 즉 위의

안에다 클래스 줄필요없음

2. section {
     width: 1400px;
     /*height: 200px;*/
     background-color: orange;}

   자식부모의 높이 영향 주는 것처럼 섹션의 높이 값 없음. 플롯을 사용한 영역은 그 영역의 높이값이 부모에게 영향주지않음

3. 포지션은 static, relative 사용 가능
   순수 3차원(absolute/fixed) 포지션값은 float과 같이 사용 할 수 없음(같은 3차원이라 상쇄된다 생각하기)

     .right {
         position: absolute/fixed;
         float: right;
   
         width: 300px;
         height: 200px;
         background-color:green;
     }

---

실무 Tip!
"clearfix"클래스만 보고 그 위(그이전)는 float 사용했구나 그 아래는 플롯 기능 꺼졌구나 알수 있음.

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

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

<footer></footer>

css

  footer {
       width: 100%;
       height: 100px;
       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 youNice to meet you</p>

</div>

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

overflow: hidden; 박스를 벗어나는 오브젝트를 숨겨줌
overflow-y: scroll; 넣으면 넘어간 y축 기준으로 오브젝트 스크롤 보여
overflow-x: scroll; x축 스크롤 넣어짐

---

실무 Tip!
overflow: hidden; float 결합 시 자식 높이값을, 부모가 인식할수 있도록 만들 수 있음

---

• flex

  : float의 발전된 개념, 보다 수월히 배치작업, 제약 줄어듦

  	<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: baseline;

부모 영역에 display: flex; 넣으면 왼쪽에서부터 정렬.
flex-direction: row/column/row-reverse;(row는x축으로 정렬 디폴트/column는 y축정렬/row-reverse:row역순으로 오른쪽에서 정렬)

  /*flex-wrap: wrap;*/
  .container {
      display: flex;
      flex-wrap: nowrap;

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

flex-wrap: nowrap; 부모 영역 벗어나지않고, 그 안의 박스들을 부모영역에 맞춰서 리사이즈.
flex-wrap: wrap;을 쓰면 부모의 width보다 자식들 width합이 더 크면 자동줄바꿈해줌(cf.float 틀어지는현상과 유사)

flex-flow: row wrap; :위의 예시 /flex-direction: row;/ 와 /flex-wrap: 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: flex-center; 중앙에 배치
  align-items: baseline; 아이템들간에 가장 밑에 라인을 맞춰서 정렬

flex참조, 시각적으로 이해 및 활용
https://flexbox.help/

---

• 중앙정렬 방법

  .center-1 {
      width: 300px;
      height: 300px;
      background-color: yellow;
  
      margin: 0 auto;
  }

위의 margin에서 0은 상하, auto는 좌우를 의미, block에서 많이 사용

  .center-2 {
      position: relative;

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

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

위의 width: 400px;이면 margin-left: -200px 수정이 필요함

중앙정렬 참조
https://css-tricks.com/centering-css-complete-guide/

---

2) 학습내용 중 어려웠던 점
정렬의 방법이 다양해서 활용하기 어렵다.

3) 해결방법
참조 사이트를 활용하고 실습을 해봐야 할 것 같다.

4) 학습소감
보다 많은 실습이 필요한 것 같다.