7/13 키즈가오 1편 실습 (1)

💡 학습한 내용

github

✅ intro
✅ farm1
✅ farm2
✅ famr3

✔️ 패럴랙스 : 스크롤에 따라 이벤트가 발생하는 기능

✔️ <meta name="viewport" content="width=device-width, initial-scale=1.0">
: 스마트폰으로 접속시 화면비율을 맞추기 위해 입력해야 하는 코드

⭐️ 기록해두면 좋을 거 같은 부분

✔️ body {overflow-x: hidden;} : 가로스크롤을 방지하기 위해 default값으로 입력해준다.

✔️

button {
    border: none;
    background-color: transparent(투명하게 하기 위해 사용하는 속성);
}

#intro .introWrap(상단부분 작업) {
▼  → 중앙정렬을 하기 위해서
   → 
   →
    position: relative;

    width: 760px;
    height: 516px;
    background-color: yellow;
▼ x축에 대한 중앙정렬을 위한 설정
    left: 50%;
    margin-left: -380px;(중앙정렬을 위한 설정)
}

#intro .introWrap .logo {
▼ 로고를 기준으로 어떤 동물을 앞 뒤로 배치시킬지 z-index를 사용하여 3차원적인 특징을 가진 position 속성값이 사용 가능.
    position: absolute;

    width: 760px;
    height: 516px;
    background-image: url(../img/intro/logo.png);
▼기준점을 만들어둔 것. 100이하의 동물은 뒤에 배치. 100이상은 앞에 배치)
    z-index: 100;
}

<div class="cloudWrap">
▼ 셋 다 3차원이기 때문에 첨엔 겹치는 현상이 일어난다. 
            <div class="leftCloud"></div>
            <div class="rightCloud"></div>
            <div class="dragonfly"></div>
        </div>

✔️ 마진병합없이 키즈가오 로고만 내리는 방법

↓

① intro 와 introWrap 사이에 공백을 만든다. #intro { padding-top: 100px}
※ 만들어진 속성들이 몇px만큼 다 밀릴 수 있기 때문에 좋은 방법은 아니다.
② #intro .introWrap { top: 100px }

❗️❕ 실무팁

💨 끝자리가 5이거나 짝수형태의 image size를 가지고 웹사이트를 제작하는 것이 대부분이다.

✔️ 잠자리 animation 효과
keyframes flyDragonfly {
    from {
        left: -366px;
    }
    to {
        ▼잠자리가 노트북이나 스마트폰이나 어떠한 환경에서도 화면 바깥쪽으로사라지는 애니메이션 적용하기 위해 100% 적용 
        left: 100%;
    }    
}

✔️ text-align: center; : 글자나 inline 요소들을 중앙정렬 시킬 때 사용

🙅🏼 학습한 내용 중 어려웠던 내용/ 해결방법

직접 사이트를 만들어보는 작업이다 보니 이때까지 배운 내용을 되짚어보는 느낌이였다. 하지만 중간중간에 배웠던 내용이기도 하지만 긴가민가한 부분이이였다.
그러한 부분은 내가 velog에 정리해두었던 부분을 다시 보면서 개념을 잡았으며 모르는 부분은 멘토님의 답변을 보고 해결했다.

🙋‍♀️ 학습소감

실습을 통해 개념을 다시 되짚어 볼 수 있어 머리에 좀 더 각인이 될 수 있었던 시간이였던 거 같다. 또, 오늘은 2시간이 넘어가는 강의 분량이였기 때문에 일지작성하는 데도 시간이 많이 걸렸던 것 같다.