210715 개발일지

1) 학습한 내용
Kidsgao 실습 마무리 : github

#night2 .rightMoonTree {
        width: 70px;
        height: 173px;
        background-image: url(../img/mobile/oneday/night2/mobile_moontree.png);

	top: 70px;
	bottom: initial; (최초상태, 초기상태로 두는 것, 미디어쿼리 바깥쪽에서 작성한 코드를 모바일 버전에서는 적용하지 않을 때 사용)
}

id 사용 한 큰 공간을 만들 때, position: relative/absolute; 결정 못하겠으면 큰공간을 position: relative로 감싸고 시작해도 됨.

float: left,right 등 float 사용시, 하단 footer이 그들 뒤쪽으로 배치 됨.
->float마지막 사용 부분에 clear: both; 붙이면 flot기능 꺼짐

포물선 애니메이션 복사붙여넣기 이용
https://jeremyckahn.github.io/stylie/

top/bottom/left/right :사용하면 다른영역에 영향미치지 않고, 자기자신만 이동함.
다른영역 침범 가능, 레이아웃이 틀어 질 일 없음!

#color1 .color1Bubble {
        float: initial; <-넣으면 이전에 넣었던 float값 적용안되게 함
        width: 166px;
        height: 56px;

	margin: 0 0 0 -83px;

}

---

<div class="btn-wrap">
  <button type="button" class="red"></button>

데이터를 보내야하는 button이면 type을 "submit"으로 변경해야 함.

  <button type="submit" class="red"></button> (데이터보낼시)

button은 인라인-블락요소 여러개 사용시 x축 정렬됨

---

#color3 .book {
    float: right;

width: 417px;
height: 178px;
background-image: url(../img/color/color3/book.png);
} logo와 book은 같은 선상에 배치됨. 이전에 나온 형제가 3차원 특징을 가지고 있어 레이어가 겹치게 되는 것.

---

실무Tip. 서랍의 이름은 규칙성을 가지고 만들어야 가독성이 좋으며, 다른누군가 봤을 때 파악하기 빠르고 좋음.

2) 학습내용 중 어려웠던 점
margin, padding을 이용한 중앙정렬 등 배치 방법

3) 해결방법
배치 혹은 코드 사용에도 한가지 방법만 있는 것이 아니라 여러가지가 있으므로, 주어진 자료에 효율적인 코드를 사용 할 수 있도록 능동적으로 생각해본다.

4) 학습소감
처음에는 막막했던 것들이 반복적으로 보고 쓰면서 익숙졌으며, 이다음 예상되는 코드를 생각 해 보고 수업을 따라 가는 것이 도움 되었다.