2021.07.13 kidsgao-1

정혜리·2021년 7월 13일

CSS html 개발일지 코린이 프론트엔드

Practice-copy_websites

목록 보기

1/15

Day12,
11일 동안 배운 내용을 바탕으로 웹사이트 'kidsgao'를 따라 만들어봤다.

오늘 무엇을 배웠지?

Kidsgao 사이트 따라 만들어보기

Kidsgao : http://sisikiller.dothome.co.kr/

Intro, 구름 페이지

html

new file-save(index0713.html), save(style0713.css, animation0713.css, mobile0713.css) (css파일은 편의상 css 폴더를 만들어 그안에 저장)
기본 설정 + html, css 파일을 연동, 미디어쿼리를 사용할 수 있도록 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 태그 입력

<link>
<!DOCTYPE html>
<html>
<head>
	<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 rel="stylesheet" type="text/css" href="css/style0713.css">
	<link rel="stylesheet" type="text/css" href="css/animation0713.css">
	<link rel="stylesheet" type="text/css" href="css/mobile0713.css">
</head>
<body>

</body>
</html>

<header>태그로 intro 영역을 설정하고 id를 입력한다. <div> 태그로 들어갈 이미지의 영역을 설정하고 class를 설정한다.

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

CSS-Style

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

으로 웹브라우저의 경계에 주어진 기본값을 없애고, 각 영역의 경계에 주어진 기본값을 없앤다. 또, button 태그, 자식관계의 태그들의 기본값을 모두 없앤다.
2. <header>태그인 #intro의 너비와 높이를 설정하고 이미지를 연결한다.

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

<div> 태그 .introWrap의 position을 relative로 설정해 이 태그 안에 있는 자식관계의 태그들의 위치가 영향을 받을 수 있도록 한다. 또 중앙정렬을 위해 left:50%, margin-left:-380px로 설정한다. logo가 웹사이트 바로 위에서 시작하는 것이 아닌 조금 아래에서 시작할 수 있도록 top을 설정한다.

#intro .introWrap { position: relative; width: 760px; height: 516px;
	left: 50%; margin-left: -380px;	top: 100px;}

+++ 로고를 아래로 내릴 때 사용할 수 있는 방법 3가지
① margin-top: 100px; ->margin병합현상때문에 배경까지 같이 100px 내려옴
② padding-top: 100px; ->로고를 살짝 내릴 수 있음, 그러나 컨텐츠들이 100px씩 내려옴
③ top: 100px; ->로고를 살짝 내릴 수 있음, 레이아웃이 틀어지지 않음, 그러나 아래의 배경과 겹칠 수 있음

.introWrap 안의 자식 태그들의 위치와 크기를 설정하고 이미지를 연결한다. 이때, 이미지들의 앞,뒤 위치가 있기 때문에(3차원적 성격) position:absolute, z-index를 설정한다. (z-index를 설정 안할 경우 기본값은 0)

#intro .introWrap .logo { position: absolute; z-index: 100;
	width: 760px; height: 516px;
	background-image: url(../../img/intro/logo.png);}

+++ 이미지를 연결할때 각각의 사이즈는 이미지 본래의 사이즈에 맞게 설정하는것이 좋다!
(본래의 이미지 보다 크게 이미지 영역을 크게 설정할 경우 ->반복되어서 이미지가 나옴 -> background-repeat: norepeat;으로 설정할 수 있지만 이미지 사이즈는 동일하다.)
5. <header>태그의 또다른 <div>태그인 .cloudWrap의 너비와 높이를 설정한다.

#intro .cloudWrap {	position: relative;
	width: 100%; height: 1050px; }

.cloudWrap 안의 자식 태그들의 위치와 크기를 설정하고 이미지를 연결한다. 이때, 이미지들의 앞,뒤 위치가 있기 때문에(3차원적 성격) position:absolute, z-index를 설정한다. (z-index를 설정 안할 경우 기본값은 0)

#intro .cloudWrap .leftCloud { position: absolute; z-index: 2;
	left: 0; width: 934px; height: 816px;
	background-image: url(../../img/intro/cloud1.png); }

CSS-Animation

Intro에서 움직이는 이미지(사자, 토끼, 곰, 원숭이)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.

#intro .introWrap .lion { animation: spinLion 1500ms linear infinite alternate; }
@keyframes spinLion {
	from { transform: rotate(-10deg); }
	to { transform: rotate(10deg); }
}

#intro .introWrap .rabbit { animation: spinRabbit 1000ms linear infinite alternate; }
@keyframes spinRabbit {
	from { transform: rotate(-5deg); }
	to { transform: rotate(5deg); }
}

구름 아래의 왼쪽에서 오른쪽으로 움직이는 잠자리에게 애니메이션 효과를 적용한다. 시작할때 왼쪽에서 잠자리가 보이지 않기 때문에 위치를 잠자리이미지 크기 만큼 옮기고, 어느 브라우저크기에도 오른쪽 끝까지 이동하도록 left:100%로 효과를 적용한다.

#intro .cloudWrap .dragonfly { animation: flyDragonfly linear 7s infinite; }

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

CSS-Mobile

미디어쿼리를 적용해 모바일 사이즈(최대 767px-> 768px부터는 pc버전 화면)의 화면에서는 다르게 적용되도록 설정한다.

@media (max-width: 767px) {
	#intro { height: 1150px; background-image: url(../../img/mobile/intro/mobile_intro_bg.png); }
	#intro .introWrap { width: 189px; height: 129px; 
    		margin-left: -94.5px; top: 230px; }
	#intro .introWrap .logo { width: 189px; height: 129px;
		background-image: url(../../img/mobile/intro/mobile_logo.png); }
	#intro .introWrap .lion, #intro .introWrap .rabbit,
	#intro .introWrap .bear, #intro .introWrap .monkey,
	#intro .cloudWrap .dragonfly { display: none; }
	#intro .cloudWrap { height: 350px; top: 280px; }
	#intro .cloudWrap .leftCloud { width: 267px; height: 314px;
		background-image: url(../../img/mobile/intro/mobile_cloud1.png); }
	#intro .cloudWrap .rightCloud { width: 237px; height: 309px;
		background-image: url(../../img/mobile/intro/mobile_cloud2.png); }
}

<header>태그인 #intro의 높이를 재설정하고 이미지를 연결한다.
<div> 태그의 높이와 너비를 재설정한다. 또, .introWrap의 중앙정렬을 위해 margin-left:-94.5px로 설정한다.(이미 style에서 left:50%값이 적용되어있으므로 한번 더 설정할 필요는 없다) logo가 웹사이트 바로 위에서 시작하는 것이 아닌 조금 아래에서 시작할 수 있도록 top을 설정한다.
.introWrap의 위치와 크기를 재설정하고 이미지를 연결한다.
모바일 버전으로 바뀌었을 때 애니메이션효과로 따로 이미지를 연결했던 .lion, .rabbit, .bear, .monkey, .dragonfly를 보이지 않도록 설정한다.(display: none;) 또,<header>태그의 또다른 <div>태그인 .cloudWrap의 너비와 높이를 재설정한다. top으로 로고의 위치에서 더 아래의 영역에 위치하도록 설정한다.
.cloudWrap 안의 자식 태그들의 위치와 크기를 재설정하고 이미지를 연결한다.

Farm1 페이지

html

(Intro, 구름 페이지의 html에 이어서)
1. <div> 태그로 farm1 페이지 영역을 설정하고 id를 설정한다.
2. 삽입할 이미지 각각의 영역을 <div>태그로 설정하고 class를 설정한다.
3. <img>태그로 이미지를 입력하고 글자를 입력하기 위해 <p>태그를 이용한다. <br>태그는 글에 줄바꿈을 설정할 수 있다.

<div id="farm1">
		<div class="leftRice1"></div>
		<div class="farmer"></div>
		<div class="rightRice1"></div>
		<div class="farmSpeechWrap">
			<img src="../img/farm/farm1/farmspeech.png" align="우리쌀 점토">
			<p class="farmSpeech">
				식재료만 넣은 안전한<br>
				우리쌀 점토 키즈가오는<br>
				우리 쌀을 사용하여 만들어요.<br>
				화학물질을 사용하지 않고,<br>
				식재료를 사용해서 만든<br>
				안전한 제품이랍니다.<br>
			</p>
		</div>
	</div>

CSS-Style

(Intro, 구름 페이지의 css에 이어서)
1. <div>태그인 #farm1의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.

#farm1 { position: relative; width: 100%; height: 800px;
	background-image: url(../../img/farm/farm1/farm1_bg.png); }

<div> 태그 .leftRice1, .rightRice1의 position을 absolute로 설정하고 각각의 위치를 left:0;, right:0;으로 위치를 고정한다. 각 태그에 맞는 이미지를 연결하고 너비와 높이를 설정한다. 이때, .leftRice1 보다 .rightRice1의 높이가 100px 작기 때문에 top:100px을 적용해 두 태그의 바닥을 맞춘다.

#farm1 .leftRice1 { position: absolute; width: 390px; height: 670px;
	background-image: url(../../img/farm/farm1/leftrice.png);
	left: 0; }

#farm1 .rightRice1 { position: absolute; width: 335px; height: 570px;
	background-image: url(../../img/farm/farm1/rightrice.png);
	right: 0; top: 100px; }

.farmer의 이미지를 연결하고 너비, 높이를 설정한다. 2.와 같이 위치를 동일하게 position: absolute로 고정하고, 중앙정렬을 위해 left, margin-left값을 설정한다.

#farm1 .farmer { position: absolute; width: 747px; height: 1078px;
	background-image: url(../../img/farm/farm1/farmer.png);

	left: 50%; margin-left: -310px; }

.farmSpeechWrap 안의 자식태그들이 위치의 영향을 받을 수 있도록 position을 relative로 설정하고 위치를 설정한다. .farmSpeech의 글자를 디자인한다.

#farm1 .farmSpeechWrap { position: relative; top: 250px; left: 150px; }

#farm1 .farmSpeechWrap .farmSpeech { color: #895c2f;
	font-size: 18px; line-height: 27px; }

CSS-Mobile

(Intro, 구름 페이지의 css에 이어서)

#farm1 { height: 450px; background-image: url(../../img/mobile/farm/farm1/mobile_farm1_bg.png);	}
#farm1 .leftRice1 { width: 86px; height: 150px; background-image: url(../../img/mobile/farm/farm1/mobile_leftrice.png); }
#farm1 .rightRice1 { width: 95px; height: 170px; top: -20px; 
        background-image: url(../../img/mobile/farm/farm1/mobile_rightrice.png);	}
#farm1 .farmer { width: 160px; height: 250px; margin-left: -69px;
		background-image:url(../../img/mobile/farm/farm1/mobile_farmer.png); }
#farm1 .farmSpeechWrap { width: 300px; text-align: center;
		left: 50%; margin-left: -150px;	}
#farm1 .farmSpeechWrap img { width: 79px; }
#farm1 .farmSpeechWrap .farmSpeech { line-height: 20px; font-size: 12px; }

<div>태그인 #farm1의 높이를 재설정하고 이미지를 연결한다.
#farm1에 속한 <div> 태그들의 높이와 너비를 재설정한다. 또, .rightRice1의 높이가 .leftRice1의 높이보다 20px 작으므로 .rightRice1에 top:-20px을 설정해준다.logo가 웹사이트 바로 위에서 시작하는 것이 아닌 조금 아래에서 시작할 수 있도록 top을 설정한다.
.farmer의 너비와 높이를 설정하고 중앙정렬을 위해 margin-left:-69px로 설정한다.(이미 style에서 left:50%값이 적용되어있으므로 한번 더 설정할 필요는 없다)
.farmSpeechWrap의 너비를 설정하고 자식태그들이 중앙정렬할 수 있도록 text-align: center;로 설정한다. .farmSpeechWrap의 영역이 브라우저의 중앙에 위치하도록 left:50%; margin-left:-150px;로 설정한다.
.farmSpeechWrap 안의 자식 태그들의 크기를 재설정하고 글자를 디자인한다.

Farm3 페이지

(farm2는 반복적인 페이지로 생략)

html

(Intro, 구름 페이지,farm1,2 페이지의 html에 이어서)
1. <div> 태그로 farm3 페이지 영역을 설정하고 id를 설정한다.
2. 삽입할 이미지 각각의 영역을 <div>태그로 설정하고 class를 설정한다.
3. <img>태그로 이미지를 입력하고 alt로 이미지 안의 글을 입력한다.

	<div id="farm3">
		<div class="farm3Window"></div>
		<div class="machineWrap">
			<div class="machine1"></div>
			<div class="sawShadow"></div>
			<div class="saw1"></div>
			<div class="saw2"></div>
			<div class="machineBird"></div>
			<div class="timer"></div>
		</div>
		<img class="farm3Bubble" src="../img/farm/farm3/farm3bubble.png" alt="기계를 통해서 쌀알이 딱딱한 껍질을 벗어 냅니다.">
	</div>

CSS-Style

(Intro, 구름 페이지, farm1,2 페이지의 css에 이어서)
1. <div>태그인 #farm3의 너비와 높이를 설정하고 이미지를 연결한다. 이때 position을 relative로 설정해 자식태그들과 영향을 받을수 있도록 한다.

#farm3 { position: relative; width: 100%; height: 850px;
	background-image: url(../../img/farm/farm3/farm3_bg.png); }

<div> 태그 .farm3Window의 position을 absolute로 설정하고 각각의 위치를 margin으로 위치를 고정한다. 각 태그에 맞는 이미지를 연결하고 너비와 높이를 설정한다.

#farm3 .farm3Window { position: absolute; width: 247px; height: 169px;
	margin: 100px 0 0 100px; background-image: url(../../img/farm/farm3/window.png); }

.machineWrap의 이미지를 연결하고 너비, 높이를 설정한다. 2.와 같이 위치를 동일하게 position: absolute로 고정하고, 중앙정렬을 위해 left, margin-left값을 설정한다.

#farm3 .machineWrap { position: relative; width: 600px; height: 455px;
	left: 50%; margin-left: -285px;	top: 150px; }

.machine1의 위치를 absolute로 설정하고 너비, 높이를 정한다. z-index로 각 영역의 앞,뒤 기준을 세운다. 또, .sawShadow, .saw1, .saw2, .timer의 위치를 absolute로 설정하고 각 class의 이미지를 연결하고 이미지 사이즈를 설정한다.

#farm3 .machineWrap .machine1 {	position: absolute; width: 586px;
	height: 455px; z-index: 900; background-image: url(../../img/farm/farm3/machine1.png); }
#farm3 .machineWrap .sawShadow { position: absolute; width: 95px; height: 95px; 
	margin: 145px 0 0 145px; background-image:url(../../img/farm/farm3/sawshadow.png); }

.timer, .machineBird도 동일하게 위치를 absolute로 설정하고 이미지를 연결해 너비, 높이, 위치를 설정한다. 이때 타이머와 새는 가장 앞에 나와있으므로 z-index값을 999로 설정한다.

#farm3 .machineWrap .timer { position: absolute; width: 103px; 
	height: 104px; margin: 125px 0 0 45px; 	z-index: 999;
	background-image: url(../../img/farm/farm3/second.png); }
#farm3 .machineWrap .machineBird { position: absolute; width: 44px; 
	height: 49px; margin: 220px 0 0 20px; z-index: 999;
	background-image: url(../../img/farm/farm3/machinebird.png); }

.farm3Bubble의 top, right로 위치를 설정하고 position 또한 absolute로 설정한다.

#farm3 .farm3Bubble { position: absolute; top: 350px; right: 80px; }

CSS-Animation

(Intro, 구름 페이지의 css에 이어서)
1. Farm3 페이지에서 움직이는 이미지(타이머, 톱니바퀴1, 톱니바퀴2)에 애니메이션을 적용한다. 모든 애니메이션은 일정한 속도로 계속해서 반복적으로 효과가 적용되도록 설정한다.

#farm3 .machineWrap .timer { animation: rotateTimer 10000ms linear infinite; }
@keyframes rotateTimer {
	from {	transform: rotate(0deg);	}
	to {	transform: rotate(360deg);	}
}

이 때, 톱니바퀴의 방향이 서로 반대이므로 한쪽의 방향을 반대로 설정해준다.

#farm3 .machineWrap .saw1 { animation: rotateLeftSaw 10000ms linear infinite; }
@keyframes rotateLeftSaw {
	from {	transform: rotate(0deg);	}
	to {	transform: rotate(360deg);	}
}
#farm3 .machineWrap .saw2 { animation: rotateRightSaw 10000ms linear infinite; } 
@keyframes rotateRightSaw {
	from {	transform: rotate(360deg);	}
	to {	transform: rotate(0deg);	}
}

CSS-Mobile

(Intro, 구름 페이지, farm1,2 페이지의 css에 이어서)

#farm3 { height: 500px; background-image: url(../../img/mobile/farm/farm3/mobile_farm3_bg.png); }
#farm3 .farm3Window { width: 82px; height: 56px; margin: 10px 0 0 10px;
		background-image: url(../../img/mobile/farm/farm3/mobile_window.png); }
#farm3 .machineWrap { width: 200px; height: 150px; top: 120px;
		margin-left: -96px; }
#farm3 .machineWrap .machine1 { width: 191px; height: 149px; background-image: url(../../img/mobile/farm/farm3/mobile_machine1.png); }
#farm3 .machineWrap .saw1, 
#farm3 .machineWrap .saw2 { width: 31px; height: 31px; background-image: url(../../img/mobile/farm/farm3/mobile_saw.png); }
#farm3 .machineWrap .saw1 { margin: 50px 0 0 50px; }
#farm3 .machineWrap .saw2 { margin:  50px 0 0 115px; }

#farm3 .machineWrap .sawShadow,
#farm3 .machineWrap .timer,
#farm3 .machineWrap .machineBird { display: none; }

#farm3 .farm3Bubble { position: absolute; width: 152px; left: 50%;
		margin: 0 0 0 -70px; }

<div>태그인 #farm3의 높이를 재설정하고 이미지를 연결한다. #farm3에 속한 <div> 태그들의 높이와 너비를 재설정하고 이미지를 연결한다.
이 때, margin, top 등을 이용해 각영역의 위치를 재설정한다.
.sawShadow, .timer, .machineBird는 이미 .machine1에 속해있는 이미지로 재설정했기 때문에 모바일버전에서는 나타나지 않도록 display:none;으로 설정한다.
.farm3Bubble은 모바일 버전에서 새로운 위치로 재설정해주고 position은 absolute로 설정한다.

무엇이 어려웠지?

여태껏 배운 내용의 총망라였다. 정말 쉽지 않았다. 평소에 듣는 진도속도에 3분의2 정도도 겨우겨우 따라갔다. 분명 똑같이 입력했고 오탈자도 없는걸 확인했는데 가끔 원하는대로 나오지 않아서 답답했다. 그럴 땐 그냥 방금 적은 코드는 없던 걸로 하고 처음부터 차근차근 새로 적었다. 그럼 될때가 있다! ~~(정말 어이가 없어... 진짜 똑같은 코든데...)~~

어떻게 해결했지?

이번에 주로 나를 힘들게 한 것들을 생각해보면 정확한 코드와의 싸움이었다. 그럴때 마다 나는 이런 순서로 해결해나가려고 한다. 1. 선택자를 제대로 입력했는가, 2. ;를 빠뜨리지 않았는가 3. 다른 오탈자는 없는가 4. 띄어쓰기를 잘못 하지는 않았는가... 이것도 안되면 그냥 지우고 새로 쓴다. 그래서 점점 하면 할수록 이런 자잘한 실수 때문에 코딩속도가 늦어지는게 답답하다.

그래서?

선생님이 알려주시는 속도는 잘따라간다. 머릿속으로는 그 이상을 먼저 생각하고 있을 때도 있다. 그치만! 손가락이 안따라준다. 속도도 정확도도... 이건 뭐 어쩔수 없다고 생각한다... 마음이 급해서 손가락이 실수를 하는 것이니 자주 해보면서 속도를 높일수 있는 효율적인 나만의 코딩 방법을 터득해낸다면 마음이 급해서 실수를 줄일수 있지 않을까? 하는 생각을 해본다.

sublime3를 이용해 오늘 만들어본 파일
https://github.com/hyeriJUNG/Daegu_AI_School/tree/main/0713

정혜리

다음 포스트

2021.07.13 kidsgao-1

Practice-copy_websites

오늘 무엇을 배웠지?

Kidsgao 사이트 따라 만들어보기

Intro, 구름 페이지

html

CSS-Style

CSS-Animation

CSS-Mobile

Farm1 페이지

html

CSS-Style

CSS-Mobile

Farm3 페이지

html

CSS-Style

CSS-Animation

CSS-Mobile

무엇이 어려웠지?

어떻게 해결했지?

그래서?

2021.07.14 kidsgao-2

0개의 댓글