대구AI스쿨 개발일지 ( 12일차 )

박호연·2021년 7월 13일

대구 ai스쿨

목록 보기

12/47

11일여간 공부한 기본기로 첫 카피웹사이트 코딩을 시작했다.
분량도 분량이지만 사실상 다 이해하고 넘어간다기보다 어느정도 경험한다는것에 의미를 두려고한다.

1) 학습한 내용

1. 로고 만들기

로고만들기는 크게 두가지로 나뉘었는데, 만들어진 기본 kidsgao로고 이미지와 그 위에 고개를 흔드는 애니메이션을 가진 여러 동물 이미지를 합쳐서 만드는 것이었다.

우선 html - index.html
css - animation.css, mobile.css, style.css
img - img.file

이런식으로 제일 처음 구성하는 파일들을 만들었는데

이전과의 차이점이라고 말한다면, 애니메이션 모바일 모두 한 css파일에 담았었다면 이번에는 3가지 파일로 각각 나눠 구분하기도 편하고 그 작업하기 쉽게 구성했다.

 html, body{
    margin:0;
    padding: 0;
}

body{
    overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6,p{
    margin: 0;
    padding: 0;
}

button {
    border:none;
    background-color: transparent; 
}

.clearfix{
    clear: both;
}

기본적으로 고유의 값을 가진 태그들의 값을 없애주는 동시에 작업하기 쉽게 백지상태를 만들었다.

오늘 핵심내용중 하나는

position: relative; - 부모
position: absolute; - 자식

이 공식이 적용되어야 한다는 것이다.

이렇게 되면 자식은 body태그를 기준으로 움직이는 것이아닌 부모태그를 기준으로 움직일 수 있게 된다.

내가 원하는 방향과 위치로 배치할수있다.

움직이는 동물이미지

동물 이미지에 애니메이션을 넣는다

단 z-index를 이용해 기존의 이미지와 자연스럽게 합쳐질수있게끔 만든다.

왼쪽에서 오른쪽으로 이동하는 잠자리

#intro .cloudWrap .dragonfly {
    animation: flyDragonfly linear 7s infinite;
}

@keyframes flyDragonfly {
    from {
        left: -366px;
    }

    to{
        left:100%;
    }
}

왼쪽 이미지의 -값을 입혀 이미지가 벽에서 나오는듯한 효과를주고

중요한점은 도착지점은 "%"를 사용해서 사이트가 넓던 짧던 온전히 도착할수있게끔 만드는것이다.
이부분은 나름 어려웠던점없이 넘어갔던것 같다.