[배운내용]

KidsGao 페이지 실습

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

페이지 특징

1. 원페이지 사이트 : 하나의 html문서로만 이루어져있음
2. 패럴랙스(Parallax) : 스크롤에 따라 새로운 이벤트가 발생하는 긴으
3. animation.css/mobile.css/style.css 세가지 css파일로 구성
4. image폴더는 섹션에 따라 나누었음

페이지 구성

1. header-intro
2. main-farm1~3
3. main-forest 1~3
4. main-science
5. main-oneday-night1~2
6. main-oneday-morning
7. main-kitchen
8. main-color 1~3

1-1. HEADER만들기 - PC환경설정

(1) html

<header id="intro">
	<div class="introwrap">
		<div class="logo"></div>	
		<div class="lion"></div>
		<div class="rabbit"></div>
		<div class="bear"></div>
		<div class="monkey"></div>
	</div>

	<div class="cloudwrap">
		<div class="leftCloud"></div>
		<div class="rightCloud"></div>
		<div class="dragonfly"></div>
	</div>


</header>

각 이미지에 대한 div공간을 만들어 준다.

(2) CSS - defaul값

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

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

body{
overflow-x: hidden;
}
브라우저 크기를 줄였을 때 좌우에 브라우저밖으로 넘어가는 콘텐츠들은 가리는 설정을 한다. 그렇지않으면 x축 스크롤이 생긴다.

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

button{
border: none;
background-color: transparent;
}
버튼이 기본적으로 가지고있는 테두리와 회색배경색을 바꿔주기 위한 코드이다. transparent는 투명색을 의미한다.

.clearfix{
clear: both;
}

★clearfix정리내용★

(3) 상단 Intro 부분

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

#intro .introwrap{
position: relative;

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

left: 50%;
margin-left: -380px;

}

#intro .introwrap .logo{
position: absolute;

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

z-index: 100;

}
absolute를 주는 이유는 페이지의 동물이미지들이 겹쳐져 있기때문에 즉, 레이어가 있기 때문이다. z-index를 사용하기 위해서는 3차원 특징을 사용해 주는 것이 좋다.

z-index의 숫자는 정해진 것은 없으며 값이 클수록 앞쪽에, 값이 작을수록 뒤쪽에 위치한다.

공간 안에 이미지를 삽입했을 때, 기본적으로 공간을 채우려는 특성이 있기 때문에 공간이 이미지크기보다 더 크면 이미지가 반복된다. 이를 방지하기 위한 background-repeat: no-repeat;이라는 명령어를 줄수도 있지만 공간을 이미지의 크기와 동일하게 부여하는 것이 좋다.

※ 부모요소(배경영역)에 position:relative;를 설정하는 이유

① 객체 중앙 정렬을 할 때, left:50%를 사용하기 위해서

② top,right,bottom,left의 기준점을 부모에 설정하기 위해서

• 부모의 포지션상태에 따라서 3차원특성을 가진 자식의 top,right,bottom,left의 기준점이 달라진다. 부모가 2차원이면 브라우저의 왼쪽 상단에, 3차원과 relative는 부모에게 기준점을 둔다.

※ 익숙해지기 전 연습할 때에는 각각 포함 관계에 있는 클래스를 모두 적어주는 것이 좋다.

(4) header부분 레이어 배치 후 상단 여백 설정하는 방법

① 첫번째 요소인 introwrap부분에 margin-top값을 부여한다. → (X) 부모자식간의 마진병합현상으로 부모태그인 intro가 함께 마진값이 생겨, 배경화면도 아래로 밀려나게된다.

② header자체인 intro에 padding-top값을 부여한다. → (X) header의 높이가 원래 지정한 1600px이 아니라 padding-top에 100을 부여했으면 1700px로 늘어나 버리게 되고, 그 아래의 레이어들이 모두 틀어지게 된다.

③ 첫번째 요소인 introwrap부분에 top값을 부여한다. → (O) 첫번째 요소가 아래로 내려오면서 상단 여백을 지정하지만, 그 아래의 요소에는 영향을 주지않아 아래 요소들의 원래 위치는 변함없이 첫번째 요소와 그 아래 요소가 겹치게 된다. 즉, 아래의 레이어들이 틀어지는 문제가 발생하지 않고 여백을 줄 수 있다.

※ 디자인 작업을 할 때의 주의점

이미지의 사이즈는 5나 짝수로 떨어지도록 만든다. 그렇지 않으면 배치작업을 할 때 정확하게 배치가 되지 않을 수 있다.

1-2. HEADER의 Animation설정하기

속도는 일정한 속도를 유지 linear, from에서 to로 움직여야하므로 alternate값을 준다.

※ 특정지점에 스크롤을 내렸을 때 움직이는 애니매이션은 자바스크립트에서 가능한 기능이다.

1-3. HEADER의 Mobile 환경설정

2-1. 첫번째 섹션(Farm1) 만들기

line-height: 글자간 위아래 간격을 지정하는 속성

2-2. 첫번째 섹션(Farm1)의 Mobile환경설정

3-1. 두번째 섹션(Farm2) 만들기

4-1. 세번째 섹션(Farm3) 만들기

[어려웠던 점]

" left:50%는 3차원 특성의 포지션 영역에서만 사용할 수 있다. position이 adsolute로 설정되어 있기 때문에, animation의 keyframes안쪽에서도 left를 사용할 수 있는 것이다."

[해결방법]

[학습소감]