개발일지 210714

13일차 요약

• 키즈가오 카피 실습 (2)
• forest ~ night1
• 강의와 동시 진행 하지 않고 직접 작성 후 강의와 비교해봄

학습 내용

실습 내용 / 결과물 출력 첨부

1. forest1

카피 대상

• 배경이미지 : 이와 동일하게 forest1의 높이값 설정
• 좌측 영역 : 나무 이미지 한 개
• 우측 영역 : 나무 이미지와 동물 얼굴2, 동물 얼굴은 로고에서 처럼 까딱이는 애니메이션이 적용되어있음.

1.1. forest1 - html

<div id="forest1">
	<div class="lefttree"></div>
	<div class="treewrap">
		<div class="rabbit1"></div>
		<div class="rabbit2"></div>
		<div class="rightitree"></div>
	</div>
</div>

배경, 좌측나무, 우측나무와 동물을 기준으로 div태그를 만들어줌.

forest1 - css ver.pc

실습

#forest1 {
	position: relative;
	width: 100%;
	height: 1050px;
	background-image: url(../img/forest/forest1/forest1_bg.png);
}
#forest1 .lefttree {
	position: absolute;
	width: 445px;
	height: 1200px;
	background-image: url(../img/forest/forest1/lefttree.png);
	left: 0;
}
#forest1 .treewrap {
	position: absolute;
	width: 304px;
	height: 572px;
	right: 0;
}
#forest1 .treewrap .righttree {
	position: absolute;
	width: 304px;
	height: 572px;
	background-image: url(../img/forest/forest1/righttree.png);
	z-index: 100;

• 동물 얼굴을 삽입하기 전까지는 강의 내용과 거의 일치했음. 작은 이미지들의 배치작업은 마진을통해 딱맞는 위치를 찾는 것인데 학습에서 무의미하다고 판단하여 생략함.
• 강의에서는 forest1에 굳이 relative를 넣지 않았다.
• z-index를 넣어 나무가 앞쪽에 배치되게 해둠

정답(?)

#forest1 .treewrap .righttree {
	position: absolute;
	width: 304px;
	height: 572px;
	background-image: url(../img/forest/forest1/righttree.png);
}
#forest1 .treewrap .rabbit1 {
	position: absolute;
	width: 82px;
	height: 103px;
	background-image: url(../img/forest/forest1/rabbit1.png);
	margin: 435px 0 0 107px;
}
#forest1 .treewrap .rabbit2 {
	position: absolute;
	width: 56px;
	height: 75px;
	background-image: url(../img/forest/forest1/rabbit2.png);
	margin: 435px 0 0 200px;
}

이전은 동일 강의에서도 후에 z-index로 tree의 값을 주었다.

1.3. forest - animation css

왼쪽 토끼얼굴은 반시계, 오른쪽은 시계방향, 무한반복, 왕복. 이외의 디테일한 시간설정 등은 알 수 없으므로 따로 실습하지 않고 예측만 해봄

CSS

/*forest1*/
#forest1 .treewrap .rabbit1 {
	animation: spinrabbit1 1000ms linear infinite alternate;
}
@keyframes spinrabbit1 {
	from{
		transform: rotate(0deg);
	}
	to {
		transform: rotate(10deg);
	}
}
#forest1 .treewrap .rabbit2 {
	animation: spinrabbit2 1000ms linear infinite alternate;
}
@keyframes spinrabbit2 {
	from{ transform: rotate(10deg); }
	to{ transform: rotate(0deg); }
}

예상과 별다른 차이는 없었다.

1.4 forest - css ver mobile

원본

앞서 경우들과 마찬가지로 모바일 버전용 이미지가 모두 따로 있기 때문에 양쪽 배치 작업만 하면 된다. 나무의 위치가 조금씩 달라져있는데 역시 상세한 배치 위치를 직접 찾는 것은 의미가 없으므로 틀만 먼저 만들어봄.

실습

/*forest1*/
	#forest1 {
		height: 400;
		background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
	}
	#forest1 .treewrap .righttree,
	#forest1 .treewrap .rabbit1,
	#forest1 .treewrap .rabbit2 {
		display: none;
	}
	#forest1 .treewrap {
		width: 68px;
		height: 129px;
		background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
	}
	#forest1 .lefttree {
		width: 79px;
		height: 187px;
		background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
	}

• 미디어쿼리의 변화 지점은 위와 동일하므로 생략함
• 우측 영역의 요소들을 모두 display:none처리 하고 treewrap의 배경이미지로 모바일버전 오른쪽 나무 이미지를 넣어줌
• lefttree의 경우 수치와 이미지만 변경

결과

나무의 배치를 제외하면 유사한 결과가 나왔다.

정답(?)

#forest1 {
		position: relative;
		height: 400px;
		background-image: url(../img/mobile/forest/forest1/mobile_forest1_bg.png);
	}
	#forest1 .leftTree {
		width: 79px;
		height: 187px;
		background-image: url(../img/mobile/forest/forest1/mobile_lefttree.png);
	}
	#forest1 .treeWrap {
		width: 68px;
		height: 129px;
		top: 200px;
	}
	#forest1 .treeWrap .rabbit1,
	#forest1 .treeWrap .rabbit2 {
		display: none;
	}
	#forest1 .treeWrap .rightTree {
		width: 68px;
		height: 129px;
		background-image: url(../img/mobile/forest/forest1/mobile_righttree.png);
	}

• display:none 으로 토끼들만 제거해주고 righttree의 속성을 미디어쿼리작업 해줬다. 아무래도 이쪽이 상식적이다..
• treewrap에는 top:200px를 적용해줘서 배치.

2. forest2

목표

forest2에 사용된 이미지파일의 내용을 살펴보면
배경/창문/나무/말풍선/기계파트3개 로 총 7개이다.
창문과 나무가 좌측 정렬되어있으니 한 영역에 묶고, 기계파트들을 한 영역, 말풍선영역을 따로 지정해주면 될 것 같다.

2.1. forest2 style

forest2는 animation까지 선 실습 후 비교해보기로 하였음

실습

html

<div id="forest2">
	<div class="forgtree">
		<div class="forg"></div>
		<div class="bottomtree"></div>
	</div>
	<div class="machinewrap2">
		<div class="machinbottom"></div>
		<div class="machinleft"></div>
		<div class="machinright"></div>
	</div>
	<div class="forstbubble"></div>
</div>

• 창문(개구리), 나무 / 기계 3종 / 말풍선 각각 div
• 말풍선에 택스트가 그림에 포함된 상태로, p태그는 없음.

CSS

/*forest2*/
#forest2 {
	position: relative;
	width: 100%;
	height: 750px;
	background-image: url(../img/forest/forest2/forest2_bg.png);
}
#forest2 .frogtreewrap {
	position: absolute;
	width: 304px;
	height: 680px;
}
#forest2 .frogtreewrap .frog {
	position: absolute: ;
	width: 153px;
	height: 257px;
	background-image: url(../img/forest/forest2/frog.png);	
	margin-left: 100px;
	top: 0;
}
#forest2 .frogtreewrap .bottomtree {
	position: absolute;
	width: 304px;
	height: 282px;
	background-image: url(../img/forest/forest2/forest2tree.png);
	bottom: 0;
}
#forest2 .machinewrap2 {
	position: relative;
	width: 390px;
	height: 390px;
	left: 50%;
	margin-left: -187px;
	top: 130px;
}
#forest2 .machinewrap2 .machinebottom {
	position: absolute;
	width: 374px;
	height: 162px;
	background-image: url(../img/forest/forest2/machinebottom.png);
	bottom: 0;
	z-index: 50;
}
#forest2 .machinewrap2 .machineleft {
	position: absolute;
	width: 123px;
	height: 228px;
	background-image: url(../img/forest/forest2/machineleft.png);
	left: 0;
	bottom: 0;
	margin-bottom: 125px;
	z-index: 100;
}
#forest2 .machinewrap2 .machineright {
	position: absolute;
	width: 123px;
	height: 248px;
	background-image: url(../img/forest/forest2/machineright.png);
	right: 0;
	bottom: 0;
	margin-bottom: 125px;
	z-index: 100;
}
#forest2 .forestbubble {
	position: relative;
	width: 365px;
	height: 220px;
	background-image: url(../img/forest/forest2/forestbubble.png);
	float: right;
	margin-right: 100px;
	bottom: 130px;
}

• 눈대중으로 위치를 맞추는 것은 힘든 일이다...
• 기계 좌 우 이미지를 bottom0으로 맞춘 후 같은 크기만큼 끌어올려준 이유는 두 이미지의 하단은 같으나 상단의 버섯 장식 때문에 시작점이 다르기 때문

결과

제법 비슷하다.

정답(?)

• html에서 말풍선 부분을 바로 img 태그를 사용해서 넣었다. 결과는 거의 같다고 볼 수 있으나 alt를 이용해 내용을 적어 웹 접근성을 높였다.
• 기계의 좌우측 요소 위치를 바텀에서 위로 올리는 판단은 정답보다 더 직관적이었던 것 같다.
• 창문과 나무의 div 태그를 만든 것은 굳이 그럴 필요가 없었다.

2.2. forest2 animation

애니메이션 부분은 특별히 어려운 점은 없었다.

/*forest2*/
#forest2 .machinewrap2 .machineleft {
	animation: moveleft 1s linear infinite alternate;
}
@keyframes moveleft {
	from{left: 0;}
	to{left: 30px;}
}
#forest2 .machinewrap2 .machineright {
	animation: moveright 1s linear infinite alternate;
}
@keyframes moveright {
	from{right: 0;}
	to{right: 30px;}
}

차이점이라면 from에서 right를 사용했는데
강의에서는 left에 -값을 주었다. 결과는 같음.

2.3. forest2 mobile

pc와 차이점

• 창문위치
• 나무위치
• 기계 좌우 요소의 높이
• 말풍선 위치

모바일 버전을 미리 확인하지 않은 것이 결정적인 문제가 되었다. 창문과 나무를 묶었던 것이 모바일 버전에서 레이아웃이 크게 달라지기 때문에 다시 작업해야 했다.

3. forest3

forest1과 거의 동일함. 실습을 따라하며 학습함

4. science

목표

배경/ 가운데 큰 div/ 안쪽 3개의 div/ 더 하위에 각각의 영역을 만들되 img태그를 이용해 alt를 기입할 것을 염두에 둠

4.1. sci html

실습

	<div id="science">
		<div class="bigone">
			<div class="scicenter">
				<div class="redcloud"></div>
				<div class="bowl1"></div>
				<div class="bowl2"></div>
			</div>
			<div class="scileft">
				<div class="leftbottle"></div>
				<div class="lefttext">
					<img src="img/science/leftTitle.png" alt="자초, 어성초, 감초">
					<p>자초 어성초 감초를 넣어서<br>피부진정 및 항염 효과가 있답니다.</p>
				</div>
			</div>
			<div class="sciright">
				<div class="sciright">
					<div class="rightbottle"></div>
					<div class="righttext">
						<img src="img/science/rightTitle.png" alt="글리세린, 올리브유">
						<p>빵의 표면을 촉촉하게 해주는<br>글리세긴과 오메가-9지방산이<br>풍부한  올리브유를 넣어서<br>보습 효과도 뛰어나답니다.</p>
					</div>
				</div>
			</div>
		</div>
	</div>

이번 설계도면은 거의 일치했다.

4.2. CSS style

실습

/*science*/
#science {
	width: 100%;
	height: 800px;
	background-image: url(../img/science/science_bg.png);
}
#science .bigone {
	position: relative;
	width: 1070px;
	height: 608px;	
	top: 30px;
	margin: 0 auto;
}
#science .scileft {
	position: absolute;
	width: 287px;
	height: 600px;
	left: 0;
}
#science .scileft .leftbottle {
	position: absolute;
	width: 230px;
	height: 192px;
	right: 50px;
	background-image: url(../img/science/gly.png);
}
#science .scileft .lefttext {
	position: absolute;
	width: 287px;
	height: 300px;
	margin-top: 300px;
	line-height: 25px;
}
#science .scicenter {
	position: absolute;
	width: 488px;
	height: 600px;
	left: 287px;
}
#science .scicenter .redcloud {
	position: absolute;
	width: 241px;
	height: 216px;
	background-image: url(../img/science/grape.png);
	left: 50%;
	margin-left: -120px;
	z-index: 50;
}
#science .scicenter .bowl1 {
	position: absolute;
	width: 488px;
	height: 438px;
	background-image: url(../img/science/funnelback.png);
	bottom: 0;
}
#science .scicenter .bowl2 {
	position: absolute;
	width: 485px;
	height: 390px;
	background-image: url(../img/science/funnelfront.png);
	bottom: 0;
	z-index: 100;
}
#science .sciright {
	position: absolute;
	width: 292px;
	height: 600px;
	right: 0;
}
#science .sciright .rightbottle {
	position: absolute;
	width: 204px;
	height: 191px;
	left: 50px;
	background-image: url(../img/science/water.png);
}
#science .sciright .righttext {
	position: absolute;
	width: 292px;
	height: 300px;
	margin-top: 300px;
	line-height: 25px;
}

강의와 차이점

• 큰 div안쪽의 3개의 div에 relative를 적용하고 float으로 정렬하려했는데 레이아웃이 계속 틀어져서 모두 absolute로 설정하고 left/right를 이용해 설정했는데 강의에서는 float를 먼저 사용하고 굳이 3차원 포지션이 필요없는 좌우측 div에는 position을 주지 않았다.
  레이아웃이 틀어졌던 이유는 float를 사용할 떄 float left와 right만 사용하고 center에 float가 아닌 left와 margin-left로 시도했기 때문이었음.

• 실습에서는 큰 div와 내부 3개의 div가 높이가 같다는 것을 인식했는데 height100%를 사용할 생각을 못했음

• 깔떄기에(실습에서는 bowl class지정)z-index를 사용해줬는데 강의에서 순서대로 absloute와 relative를 사용해 코드 순서로 높이를 지정함. 둘의 포지션을 다르게 해준 이유는 잘 모르겠다.

• 이미지로 삽입된 타이틀 텍스트와 내용 부분에 마진 값, 폰트 크기를 빼먹었다. 글자간 간격은 기억했는데... 아쉽습니다?

• 나머지 차이는 세부적 위치에 따른 조절방식 차이

4.3. CSS animation

이번에는 그냥 감으로 각도와 시간을 넣어 실습해보았다.

실습

@keyframes spinbottle1 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(55deg);
	}
}
#science .sciright .rightbottle {
	animation: spinbottle2 1500ms linear infinite alternate;
}
@keyframes spinbottle2 {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-55deg);
	}
}

• 강의와 각도가 5도쯤 차이났지만 대충 만족스럽다.

4.4. CSS moblie

목표

실습

	/*science*/
	#science {
		height: 580px;
		background-image: url(../img/mobile/science/mobile_science_bg.png);
	}
	#science .bigone {
		width: 320px;
		height: 386px;
	}
	#science .bigone .scicenter {
		width: 174px;
		height: 224px;
		left: 50%;
		margin-left: -87px;
		bottom: 0;
	}
	#science .bigone .scicenter .redcloud {
		width: 80px;
		height: 71px;
		margin-left: -50px;
		background-image: url(../img/mobile/science/mobile_grape.png);
	}
	#science .bigone .scicenter .bowl1 {
		width: 173px;
		height: 151px;
		bottom: 0;
		background-image: url(../img/mobile/science/mobile_hopperback.png);
	}
	#science .bigone .scicenter .bowl2 {
		width: 160px;
		height: 122px;
		bottom: 10px;
		background-image: url(../img/mobile/science/mobile_hopperfront.png);
	}
	#science .bigone .scileft {
		width: 140px;
		height: 386px;
	}
	#science .bigone .scileft .lefttext {
		width: 140px;
		height: 21px;
		top: 0;
		margin-top: 10px;
		background-image: url(../img/mobile/science/mobile_leftTitle.png);
		background-repeat: no-repeat;
	}
	#science p {
		font-size: 10px;
    	line-height: 12px;
    	padding-top: 25px;
	}
	#science .bigone .scileft .leftbottle {
		width: 76px;
		height: 63px;
		bottom: 0;
		margin: 0 0 145px 0;
		right: 60px;
		background-image: url(../img/mobile/science/mobile_gly.png);
	}
	#science img {
		display: none;
	}
	#science .bigone .sciright {
		width: 140px;
		height: 386px;
	}
	#science .bigone .sciright .righttext {
		width: 140px;
		height: 21px;
		top: 0;
		margin-top: 10px;
		background-image: url(../img/mobile/science/mobile_rightTitle.png);
		background-repeat: no-repeat;
	}
	#science .bigone .sciright .rightbottle {
		width: 67px;
		height: 63px;
		bottom: 0;
		margin: 0 25px 145px 0;
		background-image: url(../img/mobile/science/mobile_water.png);
	}

• 오늘 실습 중 가장 오래걸렸다. 실습을 마치고 보니 막상 강의에서의 mobile버전이 실제 홈페이지와 상이했다. 비교가 조금 어려워졌다.

• p태그 안쪽 글자들을 제대로 정렬시키는 것이 어려웠는데, 실제 홈페이지를 검사해보니 모바일용 클래스를 세로 만들었다. 강의를 참조하기전에 no-repeat를 사용해 title을 반복하지않게 만들어서 해결했음.

• 기존에 만들었던 3개의 div 태그를 활용하기위해 가운데의 큰 div를 조절하고 자식 영역들의 크기도 적절히 조절했다. 실제 홈페이지의 경우 div영역 자체를 변경해서 글자부분과 이미지부분의 두 영역으로 처리함.

• text부분과 bottle 부분의 top bottom을 바꾸어 목표 디자인과 유사하게 만들었다.

결과

나름 거의 유사하다... 하지만 텍스트 줄바꿈을 하지 못했다. 강의에서는 아예 p태그를 빼버려서 배신감이 들었음. 실제 홈페이지의 경우 모바일용 p태그를 따로 만들어 다른 선택자로 미디어쿼리를 적용시켰다.

추가 학습

https://www.youtube.com/c/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A91/search?query=%ED%8F%AC%EC%A7%80%EC%85%98
생활코딩 유튜브 페이지
검색어 : 포지션

미해결 - 솔루션

각 파트 아래 실습과 강의내용의 차이점을 정리했음

질문거리

대부분 position의 세부적 성질에 관한 것이여서 위의 추가학습 링크를 통해 차차 익혀나갈 것.

학습 소감

업로드 시간에 맞게 전부 실습하고 기록하지는 못했는데, 직접 벽을 느껴가며 실습을 진행해보니 배움이 훨씬 큰 것을 느꼈다. 대부분 어려웠던 것은 영역들이 겹칠 때 포지션 선택과 정렬이었는데 남은 부분들은 pc 와 모바일 모두에서 거의 겹치는 영역이 없어서 가볍게 강의를 따라 실습해보았다.