학습한 내용

키즈가오 웹사이트 제작해보기

intro까지 작업 완료

포지션 relative와 absolute의 관계, 그리고 사용법

1. html 설계
   

2. 잠자리 만들기 작업업 코드에 필요한 것
   overflow-x: hidden;

3. 배경 이미지 파일 넣기 : 파일 사이즈, url로 적용
   #intro {
   width: 100%;
   height: 1600px;
   background-image: url(../img/intro/intro_bg.png);

4. 첫번째 서랖장에 대한 디자인 작업
   position: relative;
   -> 포지션 영역 지정시, 이유를 잘 만들어야한다. 포지션 relative를 사용한 이유는?
   태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용합니다. 이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능합니다.

5. 로고 넣기
   #intro .introWrap .logo {
   position: absolute; -> 어떤 동물을 위로 할지, 아래로 할지 정해야함.

z-index: 100; -> 일종의 기준점임. 이보다 값이 크면 동물은 로고보다 위에 올라오고, 적으면 아래로 내려감.

• 곰 영역
  #intro .introWrap .bear {
  position: absolute;

relative가 static인 상태를 기준으로 주어진 픽셀만큼 움직였다면, absolute는 position: static 속성을 가지고 있지 않은 부모를 기준으로 움직입니다. 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됩니다.

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

margin: 310px 0 0 560px;

z-index: 200;
-> 로고보다 위로 올라옴!

6. 구름1을 구름2 위쪽으로 올라가게 만들기 : Z축 위치 변경

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

7. intro .cloudWrap .dragonfly 적용하기
   : 성질관계 포지션에 따라 레이어가 겹치게 된다.

#intro .cloudWrap .dragonfly {
position: absolute;

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

top: 800px; : 구름 잠자리 아래로 내림.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

해결방법 작성

학습 소감

55:00까지 학습 완료.
내일 이 부분 이후부터 다시 진행.
소스가 있고, 강의를 듣는게 훨씬 이해도가 높았다.