210714 개발일지

1) 학습한 내용
Kidsgao 실습github

top/bottom/left/right는 자기자신이 주도해서 움직임, 배치 작업하면 다른영역에 침범 할수 있음.

z-index: 200; 동등한 조건일 경우 같은3차원, 같은 z축이면 나중에 작성된 영역의 z축이 위쪽으로 배치 됨

margin-top 다같이 아래부분으로 밀려 내려오게 됨 일반 top는 그것만 내려옴

배치작업을 할 때 이전에 적용됐던 요소 때문에, 그다음 요소가 의도한 바와 다르게 배치될 때 있으므로 배치작업 할 때는 작성된 순서대로 배치작업을 진행해야함

position: absolute;에서 top 등을 사용한 순간 좌표기준은 브라우저 기준으로 됨
부모 영역이 3차원이면 부모영역기준으로 좌표기준 바뀜

margin은 부모가 어떤 positioin상태인지에 따라서 좌표기준점이 달라지진 않음.

Science 파트
세 개의 값이 width값을 넘어가면 안됨, 3개 합이 노란색 영역 벗어나면 안됨

이미지와 글자의 공백 img태그에 margin-bottom /p태그 안에 padding-top을 넣어도됨 둘중 하나 (자초,어성초..와 그밑의 p태그 글)

#science .scienceWrap .scienceCenterWrap .funnelBack {
    position: absolute;

    width: 488px;
    height: 438px;
    background-image: url(../img/science/funnelback.png);
}

#science .scienceWrap .scienceCenterWrap .funnelFront {
    position: relative;

width: 485px;
height: 390px;
background-image: url(../img/science/funnelfront.png);

margin-top: 48px;
} 둘다 3차원적인 특징 가지고 있음, 3차원 3차원이 형제관계에서 만났다. 그럼 그 다음에 나오는 형제의 z축이 높아서 겹쳐지듯 앞으로 오게 됨 

---

#science .scienceWrap {
        overflow: hidden;
        width: 360px;
        height: auto;
    }
float 자식으로 사용될시 3차원적 특징이 있으므로 자식의 높이 값이 부모의 높이 값에 영향 못줌. 그러나 overflow: hidden; 사용하게 되면 float 자식이 부모에게 영향 줄수 있음.

---

  #night1 .owl {
      position: absolute;

      width: 334px;
      height: 571px;
      background-image: url(../img/oneday/night1/owl.png);

      margin-top: 50px;
  }

  #night1 .starWrap {
      position: relative;

      width: 750px;
      height: 400px;
      background-color: pink;

      top: 150px;
      margin-left: 600px;
  }

<div>는 블락요소지만 포지션을 이용하면 y축 정렬 됨. 
먼저나온 형제가 3차원이면 그다음 형제는 2,3차원 상관없음 레이아웃이 그냥 겹치게 됨 거기서 margin-left 등으로 원하는 위치로 이동 

---

  #night1 .starWrap .star1,
  #night1 .starWrap .star2,
  #night1 .starWrap .star3 {
      animation: pulseStar 1s linear infinite alternate;
  }

  @keyframes pulseStar {
      from { transform: scale(1); }
      to { transform: scale(0.8); }
  } 
  스케일 1은 원래 크기의 비율을 1로 맞춰서 시작하겠단 의미 
  0.8은 원래 공간의 크기에서 0.8 비율로 줄이겠다.
  스케일은 배수로 늘어남. 결과적으로 1배는 원래크기와 동일, 0.8은 1보다 80%정도 줄어든단 의미
  

2) 학습내용 중 어려웠던 점
position과 float의 활용하는 것이 아직 어렵다.

3) 해결방법
천천히 수업을 따라가며 position과 float파트를 복습.

4) 학습소감각
부분별로 css, animation, mobile 각각 설정해야하는게 많아서 버겁지만
하나의 사이트를 건축해나가는 것이 흥미롭다.