[대구AI스쿨] 21.07.13 개발일지

임채업·2021년 7월 13일
0

KidsGao 실습 1편 (1/2) - html과 css 기준


※ 사이트 – http://sisikiller.dothome.co.kr/

● 원페이지 사이트

★ 전체 코드

Git 링크.KidsGao

1. intro

● Default CSS 설정하기
htmlbodymarginpadding값을 0으로 설정
② CSS에서 body { overflow-x: hidden; } 설정
h1~h6pmarginpadding값을 0으로 설정
button { }의 기본값으로 테두리(border)값을 가지고 있기에 { border: none } 으로 설정
그리고 배경색으로 투명(transparent)를 설정
.clearfix { clear: both; }를 설정

● 전체 height값은 img/intro/intro_bg.png의 높이값(1600)으로 설정, witdh는 100%
background-image: url( )에 intro_bg.png의 위치 넣기

1) 키즈가오 글자를 감싸고 있는 영역

position 사용 시 → 왜 사용하는지에 대한 당위성이 필요,
● 브라우저 창의 크기 변화에 관계없이 이미지를 x축 가운데 정렬
#intro .introWrap { left: 50%; margin-left: -380px; }
● 이미지에 z축(3차원)이 필요하기에 position: absolute 로 설정

● 동물 이미지 넣기 – 사이트의 이미지와 같은 위치에 놓기위해 margin값 설정, 곰과 원숭이는 z-index값 설정
① 사자 - { margin: 80px 0 0 30px; }
② 토끼 - { margin: 90px 0 0 580px; }
③ 곰 - { margin: 310px 0 0 560px; z-index: 200; }
④ 원숭이 - { margin: 310px 0 0 50px; z-index: 200; }

※ .introWrap을 position: relative로 설정한 이유
① ‘가운데 정렬’을 하기 위함 – left(3차원)
② 현재 자식 태그들은 position: absolute 이므로, 부모 태그가 relative이면 자식 태그의 좌표기준점이 부모 태그의 위치를 따르기 때문

※ 이미지의 공간의 크기(width, height)는 이미지파일의 크기에 맞춰서 설정하는 것이 바람직함

● PC 버전 결과

● 모바일 버전 결과

2) 구름과 잠자리가 움직이는 영역

<div> 태그는 기본적으로 y축 정렬(block)으로 설정되어 있음

● 구름 좌우 배치

  • float: left;float: right를 사용하면 브라우저의 width값이 두 구름의 width값보다 크면 괜찮지만, 작을 경우 레이어가 틀어지게 됨 → 사용 불가
  • position: absolute를 사용하여, 좌측 구름에 left: 0 과 우측 구름에 right: 0 값을 넣어서 좌우 양끝 정렬을 함
    → 레이어이 틀어지지 않고 구름이 겹쳐지게 됨

● 구름과 잠자리 태그(형제 태그)가 3차원적 특징을 가져서 레이어가 겹침
– 잠자리 이미지를 { top; 800px }로 밑으로 내려오게 함

※ logo 이미지를 아래로 내리는 방법
.introWrap { margin-top: 100px; } 적용
→ intro 태그 영역까지 같이 내려옴/마진 병합 현상 발생(사용불가)
#intro { padding-top: 100px; } 적용하여 introintroWrap 사이에 공백을 만드는 방법
→ 주의점: intro영역의 전체 높이값이 1600px이 아닌 1700px이 됨, 모든 배치작업을 다시 해줘야 함(사용불가)
.introWrap { top: 100px } 적용 → introWrap 영역이 아래 cloudWrap 영역(같이 내려가지 않음)과 겹치게 됨

※ 실무 tip
■ 직접 디자인 작업을 하는 경우
이미지의 크기는 일의 자리가 5이거나 2로 나누어 떨어지는 수를 사용해야 함
→ 이를 지키지 않으면 배치 작업시 레이아웃 구조가 정확하게 배치되지 않을 수 있음

3) 애니메이션 넣기(animation.css)

■ 사자 이미지 애니메이션
.lion { animation: spinLion 1500ms linear infinite alternate; }
① spinLion : 애니메이션 이름
② 1500ms : 애니메이션 시간, 1.5초(=1.5s)
③ linear : 일정한 속도로 움직임
④ infinite : 무한 반복
⑤ alternate : from ↔ to 왕복 움직임

● keyframes 설정

@keyframes spinLion {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(10deg);
    }
}

rotate( ) : 회전(deg로 조절)

※ 나머지 동물 이미지는 시간과 회전 각도 조절로 맞춰줌.

※ 구름이 움직이는 영역은 javaScript 영역이라 일딴 제외함.

■ 잠자리 이동 애니메이션

  • 왼쪽 바깥쪽 영역에서 오른쪽 바깥쪽 영역으로 사라져야 함
#intro .cloudWrap .dragonfly {
    animation: flyDragonfly linear 7s infinite;
}

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

    to {
        left: 100%;
    }
}
  • 기존에 작성되어진 position값 때문에 @keyframes에서 left값을 활용 가능함

  • 브라우저 크기가 달라져도 동일한 애니메이션 결과가 나와야 하기에 to { left }에 고정값(예:100px)를 넣을 수 없음

  • to { left }에 너무 큰 고정값을 넣을 경우 잠자리 애니메이션이 너무 빠르게 움직이게 되고, 브라우저에서 보이는 시간이 줄어듬 → left: 100%(가변값)을 넣어 브라우저 크기의 영향이 없도록 함

● 결과

※ 여기서 overflow-x: hidden이 없다면 잠자리가 브라우저 x축 끝에 가면 ‘가로 스크롤’이 생김

4) 모바일 버전(mobile.css)

  • PC버전용 이미지와 모바일용 이미지가 별도로 존재하는 경우

● 모바일 버전 목표
① PC버전과는 다른 모바일 버전 이미지를 사용함
② PC버전 이미지는 나오지 않게 함 - 동물들과 잠자리 부분에 display: none을 적용

※ mobile_intro_bg.png의 width값보다 모바일 브라우저의 width값이 큰 경우, 기본 설정인 background-repeat값을 이용하여 공백을 자동적으로 매워줌

2. farm1

● PC 버전 결과

● 모바일 버전 결과

3. farm2

● leftRice2와 rightRice2 이미지의 좌우 정렬

  • absoluteleft, right를 사용해도 되지만, 여기서는 좌, 우 이미지가 서로 맞부딪치기 전에 모바일 버전으로 바뀌므로 CSS에서 float: left, right를 적용해도 됨

● PC 버전 결과

● 모바일 버전 결과

4. farm3

● sawShadow보다 saw1이 늦게 position: absolute가 되었으므로, z축 값이 더 높아 sawShadow보다 앞에 위치함

● PC 버전 결과

● 모바일 버전 결과

□ 어려웠던 점

index.html의 태그들과 CSS의 코드 내용과 양이 연습하던 내용에 비해 상당히 많았습니다. 그로 인해 오타나 경로지정이 잘못되었을 경우에 이를 찾기가 어려웠습니다. 그리고 브라우저의 배율 설정에 따라 모바일 버전으로 전환되는 px값이 달라져서 코드를 잘못입력한 줄 알고 많이 헤맸습니다.

□ 해결방법

브라우저에서 '검사'를 통해 작성한 코드가 제대로 적용되는지 확인하고, 안되는 부분을 찾아서 수정하여 정상적으로 출력되도록 하였습니다.

□ 학습 소감

이제까지 부분, 부문만 실습을 해보다가 실제 사이트를 만들어보게 되니 코드가 이렇게 길어질 줄은 생각하지 못했습니다. 게다가 작성한 내용들이 정상적으로 작동하지 않으니, 이걸 어떻게 해결해야하나 당황하게 되는 경우도 더러 있었습니다.
하지만 제대로 작성된 코드로 실행했을 때, 원하는 결과가 나오니 많이 뿌듯하였습니다.

profile
반갑습니다. 잘부탁드립니다.

0개의 댓글