🐣 주니어 개발일지 - 키즈가오 웹페이지 연습 #3

📘 오늘 배운 것

---

나이트1, 나이트2 부분

• 3가지 요소로 영역나누기
  • 움직이는 달 / 오른쪽 나무 / 왼쪽 글자
  • 설계도면 작업
    

	<div id="night2">
		<div class="moon"></div>
		<img class="night2Bubble" src="img/oneday/night2/night2bubble.png"  alt="하루동안 숙성을 시키게 됩니다." >
		<div class="rightMoonTree"></div>
	</div>

• 직선으로 움직이는 애니메이션 효과
  • margin-left: -135px
    화면 바깥에서 달이 움직여야 하기때문에, 달의 width 값 만큼 왼쪽으로 더 땡겨준 것
  • margin-left: 110%
    화면의 크기보다 10% 더 이동되게 만든 것

#night2 .moon { width: 135px; height: 135px;
		background-image: url(../img/oneday/night2/moon.png); }

@keyframes moveMoon { from { margin-left: -135px } to { margin-left: 110% } }

• initial
  미디어쿼리 바깥에서 작성한 코드를 적용하고 싶지 않을 때 사용

키친 부분

• 말풍선이 위로 올라오는 이유 ?

  • 3차원일 때 형제관계를 이해해야함 !
    
    

• float 사용시 clear: both; 함께 사용해주기

  • clear: both; 없을 경우, 노란박스와 이미지 겹쳐짐 현상 일어남
    👇 clear: both; 적용 후 👇
    
    

• 포물선 애니메이션 구현 방법

  • 실질적으로 구현하기 어려워, 사이트 도움 받기 ( https://jeremyckahn.github.io/stylie/ )

컬러 부분

• PC버전에서 적용된 float기능 모바일에서 끄려면 ! float: initial; 사용

/* PC버전 */
#color1 .color1Bubble {
	float: right;

	margin: 100px 200px 0 0 ; }

/* 모바일버전 */
#color1 .color1Bubble {
	float: initial;

	width: 166px;
	height: 56px;

	margin: 0 0 0 -83px; }

• button태그 type 설정
  
  • 서버에 데이터를 보내야하는 버튼이라면 type="submit"으로 변경!
  • 연습할때는 type="button"으로 사용함.

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

📌 오늘의 Tip

---

• 포지션이 어려울 땐, position: relative; 태그로 모두 감싸고 시작하는 것도 좋다.
• top, bottom, left, right 계속 강조하시지만 레이아웃 틀어짐이 없기때문에 나중에 수정하기 좋다 !!
• ID, Class명을 정할때 규칙성, 통일성있게 만들어야한다. 유지,보수 및 가독성을 위해.
  ex) 서랍장 이름을 동일하게. 소문자로 작성할거라면 소문자로만 작성

❔ 오류가 난 부분?

---

• bubble 애니메이션 부분 오류
  • bubble이 망부석 처럼 움직이지 않는다..
    keyfrmae을 적용하고, css코드도 정확하게 입력해봤는데, 어떤 오류인지 작동이 되지않는다..

💡 해결 방법!

---

• 아직 해결하지 못한..!

🌱 공부를 마무리하며,

---

경험치가 부족한 상태에서 포지션 사용은 원래 어려운 것이라고 말씀해주셔서 마음이 한결 나아졌당..! 오류가 난 부분이 있는데 도저히 찾지 못했다. 멘토님께 우선 질문은 남겼고, 주니어라 그런지 질문을 어떻게 할지도 상당히 고민됐었다. (궁금한 것을 요약해서 쉽게 설명하는 것에 대한 어려움이랄까..?)