학습내용
night2, morning, kitchen, color1, color2, color3
내가 생각하기에 중요한 부분📌
- 레이아웃 배치를 어떻게 해야할지 감이 안 잡힐 때는 안전장치로 부모위치에 position: relative;를 적용해준다.
- img태그를 사용하면 width를 조정하면 height는 자동으로 조정이 되기 때문에 따로 조정할 필요 없다.
- initial - 초기상태, 미디어쿼리 밖에서 작성한 코드를 모바일에서는 적용을 안 시킬 때
- margin-top : -320px 👉🏻 위로 320px 끌어올리겠다라는 뜻
- 배치 작업을 다 끝냈는데 위치를 변경하고 싶을 때는 top,right, bottom, left사용하면됨
- button은 inline-block성질을 가지고 있으므로 x축 정렬이 됨
- id와 class를 지정해줄 때는 일정한 규칙성을 가지게 해야한다.
🔵night2
#night2 .moon {
animation: moveMoon linear 10s infinite;
}
@keyframes moveMoon {
from{
✔margin-left: -135px;
}
to {
✔margin-left: 110%;
}
}--> dragonfly할 때는 position이 relative여서 left가능 했지만,
moon은 position이 static이므로 margin으로 효과를 주었다.
moon의 원래 위치에서 -135px당겨서 시작하고 화면 밖으로 10% 더 나가서 종료, 다시 돌아오는 효과는 넣으면 안됨
🔵 morning
#morning .sun {
animation: moveSun linear ✔10s ✔1500ms infinite;
}
@keyframes moveSun {
from{
margin-left: -131px;
}
to {
margin-left: 110%;
}
}--> 달과 해가 동시에 애니메이션이 시작되면 안되기 때문에 해에는 delay효과를 추가해주었다.
(animation에서는 첫번째 숫자는 duration, 두번째 숫자는 delay, 만약 숫자가 하나만 있다면 duration)
🔵 kitchen
<div id="kitchen">
<div class="leftPan"></div>
<div class="rightPot"></div>
<div class="steamWrap">
<div class="steam"></div>
<div class="bubble1"></div>
</div>
<img class="kitchenBubble" src="img/kitchen/kitchenbubble.png"
alt="숙성을 시킨 반죽을 잘 익혀주면">
</div>--> 먼저 나오는 leftPan, rightPot (형제)가 float를 사용했기 때문에 3차원의 성질을 일부 가지고 있는데, 먼저 나온 형제가 3차원이기 때문에 뒤에 나오는 img태그가 같은 선상에 배치가 된다. 레이어가 겹친다는 뜻(z-index부분배웠을 때)
--> float를 사용했기 때문에 레이어가 겹치게 되는데 이를 방지하기 위해서는 float를 사용한 마지막 코드와 다음 코드 사이에 clear: both;를 넣어준다.
-- >https://jeremyckahn.github.io/stylie/
포물선을 그리는 애니메이션은 코딩하기 어려우므로 사이트를 참조한다.
easeOutSine효과를 사용했음. export해서 copy & paste
🔵 color1
mobile
#color1 .color1Bubble {
position: relative;
float: initial;
width: 166px;
height: 56px;
left: 50%;
margin: 100px 0 0 -83px;
}--> float를 모바일에서는 적용 안할 때 initial작성해준다.
🔵 color2
<div class="btn_wrap">
<button type="button" class="red"></button>
<button type="button" class="yellow"></button>
<button type="button" class="blue"></button>
</div>--> button의 type은 서버로 전송을 하기 위한 button이라면 submit으로 지정을 해주지만 여기서는 button으로 지정을 해주었다.
🔵 color3
#color3 .logo {
position: absolute;
left: 50%;
margin-left: -378.5px;
}--> logo이미지를 중앙으로 정렬 하고 싶을 때 , left:50%; 를 지정해준 후, logo이미지 width의 절반 값만큼 왼쪽으로 당겨준다.
어려웠던 점
어제 역대급 분량을 해치우고 난 이후라 그런지 오늘은 어려웠던 내용이 별로 없었다. 그래도 살짝 position에 대한 부분이 헷갈리긴 했다.
해결방법
초반에 강사님이 레이아웃에 대해 감이 안잡힐 때는 일단 부모의 position을 relative로 주고 진행을 하라고 하셔서 그 이후로는 편안한 마음으로 받아들이게 되었다. 그렇게 생각을 하니 생각보다 잘 풀려서 나쁘지 않은 하루가 된듯하다.
학습소감
중간중간에 강사님이 복습시간을 가져주셔서 너무 좋았다.
마냥 수업만 하면 수업하랴 헷갈리는 부분 찾아보랴 코딩작성하랴 왔다갔다 하느라 정신이 산만해져서 오히려 머릿속에 입력되는 부분은 없을텐데 강사님이 position에 대해서, 레이어 겹침 현상에 대해서 등 헷갈릴만한 파트에서 복습을 해주셔서 그런지 수업이 빨리 진행이 됐다.
