21.07.13

여태까지 배운 html, css를 활용하여 kidsgao 웹사이트를 따라하는 작업을 해보았다.

키즈가오 웹사이트
http://sisikiller.dothome.co.kr

학습 내용

실습 위주로 진행했다. 우선 html 파일을 하나 만들고 그 안에서 pc버전, 모바일 버전을 함께 썼다. 이런 걸 원 페이지 사이트라고 한다.

패럴랙스(parallax) : 스크롤에 따라 이벤트가 발생하는 웹페이지 기능. 수업에선 이 기능을 제외하고 실습하였다.

일단 결과물

210713 키즈가오 실습 코드

애니메이션을 구현한 PC 브라우저

모바일 브라우저로 사이즈를 줄일 때 변화, 애니메이션

html head 태그

<!--head 안쪽에 들어가는 meta 태그를 적용하였다.
제일 첫 시간에 배운 후로 다 적어보는 건 이번이 처음인 것 같다.-->

<meta charset="utf-8">
<meta name="description" content="우리쌀 점토로 만든 키즈가오 웹사이트 소개">
<meta name="keywords" content="키즈가오, 점토, 장난감">
<meta name="author" content="키즈가오">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>키즈가오</title>

그리고 link태그를 이용해 css파일들을 연결해주었다.

이미 완성되어 있는 사이트를 보며 도면을 짠 후에 pc용 css, animation css, 모바일용 css 순으로 작성했다. 실습을 할수록 도면 짜는 게 정말 중요하단 걸 느낀다. 첫 시간에 강사님이 도면을 왜 그렇게 강조했는지 이젠 알겠다.

css default

css에서 디폴트 값으로 쓰고 들어간 속성들

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;
}

마지막의 clearfix는 float을 생각해서 쓴 것!

body 태그 본문

• CSS position 중 relative나 absolute는 사용할 때 당위성이 필요하다. 왜 그걸 쓰는지 이유를 찾아야지 깊은 이해를 할 수 있다.

다른 본문도 비슷한 방식으로 작성했기 때문에 일단 header태그 안쪽의 코드만 적는다.

/* Intro */

#intro {
	width: 100%;
	height: 1600px;
	background-image: url(../img/intro/intro_bg.png);

	/*padding-top: 100px;*/
}


#intro .introWrap {
	position: relative;

	width: 760px;
	height: 516px;
	/*background-color: yellow;*/

	left: 50%;
	margin-left: -380px;
    
   	/*margin-top: 100px;*/
	top: 100px;
}

#intro .introWrap .logo {
	position: absolute;

	width: 760px;
	height: 516px;
	background-image: url(../img/intro/logo.png);

	z-index: 100;
	/* z인덱스 100은 별 다른 의미가 없다. 그냥 기준점을 만든 것 뿐이다. */
}

#intro .introWrap .lion {
	position: absolute;

	width: 161px;
	height: 161px;
	background-image: url(../img/intro/lion.png);

	/*아래는 좌표 설정*/
	margin: 80px 0 0 30px;

	z-index: 0;
}

#intro .introWrap .rabbit {
	position: absolute;

	width: 105px;
	height: 129px;
	background-image: url(../img/intro/rabbit.png);

	margin: 90px 0 0 580px;
}

#intro .introWrap .bear {
	position: absolute;

	width: 112px;
	height: 105px;
	background-image: url(../img/intro/bear.png);

	margin: 310px 0 0 560px;

	z-index: 200;
}

#intro .introWrap .monkey {
	position: absolute;

	width: 85px;
	height: 93px;
	background-image: url(../img/intro/monkey.png);

	margin: 310px 0 0 50px;

	z-index: 200;
 }

로고를 감싼 introWrap 영역에 포지션 relative를 사용한 이유
1. 일단은 중앙 정렬을 위해. left 50% 쓸 수 있는건 3차원 특징을 가진 포지션에서만 사용 가능..
2. absolute를 사용한 영역의 부모가 relative나 순수 3차원 특징을 가진 포지션 속성값이라면 부모를 기준으로 좌표 형성 -> 실습할 땐 margin을 사용했지만 만약 top left로 배치할 경우 부모 기준 좌표를 쓰고 싶다면 relative를 쓰자.

• 3차원 position과 z-index 개념을 잘 이해해야지 적용을 잘 할 수 있다.

• 오브젝트 정가운데 정렬은 margin: 0 auto;와 그냥 left, right를 이용하는 것도 가능하다.

• 배경 이미지 말고 데코용 이미지 작업시 공간 크기 = 이미지 크기로 맞춰주기

아래로는 헤더의 로고 부분 말고 구름 부분을 작업한 코드다.

#intro .cloudWrap {
	position: relative;

	width: 100%;
	height: 1050px;
	/*background-color: pink;*/
}

#intro .cloudWrap .leftCloud {
	position: absolute;

	width: 934px;
	height: 816px;
	background-image: url(../img/intro/cloud1.png);

	left: 0;

	z-index: 2;
}

#intro .cloudWrap .rightCloud {
	position: absolute;

	width: 843px;
	height: 858px;
	background-image: url(../img/intro/cloud2.png);

	right: 0;
}

#intro .cloudWrap .dragonfly {
	position: absolute;

	width: 366px;
	height: 228px;
	background-image: url(../img/intro/dragonfly.png);
	/*background-color: yellow;*/


	top: 800px;
}

▶ 자식으로 absolute를 사용한다면 부모를 relative로 감싸는 게 안전하다.

• 현재 브라우저 크기보다 float을 사용한 레이어의 width 합이 더 클 경우 레이어가 틀어진다.

• 개체를 각각 왼쪽 끝, 오른쪽 끝으로 배치해야 할 경우 position absolute와 left, right을 사용하면 된다.

• 형제들이 3차원이면 레이어 겹침 발생
  
  

• 다 완성한 로고를 밑으로 내리는 작업

1. Padding-top 사용. 주의점은 intro 부분에 공백이 들어갔기 때문에 전체 높이값도 늘어난다. 더군다나 공백만큼 다른 컨텐츠도 내려간다. 이러면 레이어가 어그러질 수 있다. 그래서 패딩 탑을 마지막 단계에서 쓰는 건 좋지 못하다. 마진 탑은 병합현상때문에 안되고.
2. top을 사용한다.(right bottom left도 포함하는 특징) introWrap에 position relative를 이용한 3번째 이유이기도 하다. 3차원 특징을 가진 요소에 top을 쓰면 자기가 주체가 돼서 이동한다. 다만, 아래에 어떤 요소가 배치돼있더라도 그 요소의 최초 위치는 변하지 않는다. 겹치는 형태로 이동하게 되는 셈이다. + 둘다 3차원일 때 나중에 작성된 3차원 요소의 z축이 더 높다.

• 로고 옆에서 동물을 움직이는 애니메이션은 @keyframes에서 transform: rotate(n deg); 를 이용했다.

• 잠자리 애니메이션의 포인트는 overflow-x: hidden;와 브라우저 크기에 구애받지 않아야 해서 고정값을 넣지 않는다는 점이다. 여기선 to에 left: 100%;를 적었다.

• 모바일 버전과 pc버전이 다를 경우 비교해서 다른 값들을 전부 작성해줘야한다.

• display: none; : 기존 이미지 감추는 작업
  background-repeat: no-repeat;를 잘 사용하면 불필요한 이미지를 없애기 쉽다.

• position은 부모 자식간, 형제간 관계에 유의하며 쓰자

• html에서 엔터 역할 태그 <br>

• text-align: center; : 글자나 인라인 요소를(여기에만 영향 줄 수 있다) 중앙 정렬할 때 쓴다.

• 오브젝트의 좌우 끝 배치는 position: absolute;를 이용해도 되고 대충 봐서 이미지들끼리 부딪치기 전에 모바일로 바뀔 것 같으면 그냥 float을 써도 된다.

실무 tip!

1. 만약 내가 디자인 작업을 해야한다면 이미지 크기는 5로 떨어지거나 짝수로 끝나게 만들자

2. ※ 디자이너에게 이미지를 받으면 이미지를 먼저 보면서 도면을 어떻게 짤 지 고려해야 한다 ※

어려운 점

1. class가 엄청 늘어나서 요소를 적을 때마다 헷갈렸다. 분명히 단계별로 보면 이해가 되는데 자칫하다간 다 놓칠 것 같았다.

2. 맨 위에 #intro에서 마진 병합 해결 방법을 배우다가 paddig-top: 100px을 지우는 걸 까먹었는데 intro 결과물 바닥 밑바닥쪽에 이상한 블록처리가 돼서 계속 오류를 찾았다. 저녁도 못 먹고 강의를 다시 들으며 코드를 한 번 쭉 다시 봤는데도 안 보여서 미칠 것 같았다...

해결 방법

1. 해결법은 꾸준한 연습 뿐인 것 같다. 단계를 익혀서 어떤 클래스를 작성해도 어떤 태그에 어떤 효과를 적용하는지 바로 알아챌 수 있도록 해야겠다.

2. 다른 코드들을 하나씩 지워보며 찾았다. 난 farm 부분과 잘못 결합된 거라고 예상했지만 원인은 intro내부에 있었다. paddig-top을 지우고 #intro .introWrap에 top: 100px;을 추가하니까 완벽해졌다!

3. 7월 8일에 혼자 실습했던 recipe페이지에 오늘 실습하며 다시 등장한 line-height를 보고 무릎을 탁 치고 적응해봤더니 잘 먹혔다. 기존에 문제였던 사진 높이와 div 공간 높이가 딱 맞아떨어졌다. 잊고 있던 속성이었다...

느낀 점

오늘은 긴 실습을 했다. 클래스가 엄청 많아지고 pc, 모바일 버전으로 나눠서 css를 적용하는데다가 애니메이션까지 하니까 강의를 듣다가 순간적으로 잠깐씩 혼동하는 시간이 있었다. 연습을 많이 해서 단계별 적용에 익숙해지는 방법밖에 없는 것 같다.

그리고 강사님이 3개월 공부하고 첫 외주를 맡은 사이트가 키즈가오라고 해서 놀라웠다. 나도 2개월 정도 후에 저렇게 만들 수 있게 부단히 노력해야겠다. 코드를 스스로 쓰면서 자꾸 오류가 나니까 약간 자신감이 하락했는데 내 몫을 해내려면 그런 생각을 할 시간조차 없다는 걸 깨달았다;; 강한 동기부여가 됐다. 더 열심히 공부해서 배운 걸 자유자재로 응용하는 개발자가 되자.