개발일지 210713

이동섭·2021년 7월 13일
velog중간저장 실패대구AI스쿨카피캣
0

대구AI스쿨 개발일지

목록 보기
12/48

12일차 요약

  • 지금까지 배운 내용들을 전반적으로 활용하여 실습 진행

  • http://sisikiller.dothome.co.kr/
    위 사이트에 대한 html, css 카피 실습

  • intro ~ farm3 까지 진행

1. 준비

1.1. 프로젝트 디렉터리 구성

  • css폴더 아래 3개의 css파일을 따로 준비함.
  • 반응형 웹페이지를 만들기위한 모바일.css
  • 요소들에 대한 애니메이션 효과를 적용하기 위한 애니메이션.css를

1.2. head태그와 style.css 디폴트

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/style.css">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>

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;
}
  • meta, titie 태그 작성 및 각 css파일과 링크
  • 기본 css속성을 갖고 있는 태그들의 초기화 작업 및 .clearfix 설정

복습) .clearfix{} 를 미리 설정해두는 것
flot를 사용할 때 발생할 수 있는 레이아웃의 변동에 대처하기 위해 css를 먼저 설정해둠으로써 라이브러리를 적용하듯 사용할 수 있다.
'clearfix'는 이와 경우에 대한 일반적인 대응으로서 관습적으로 통용된다.

참고) 이미지 폴더의 파일들은 실습용으로 제공 받음

2. intro

키즈가오의 로고~구름부분까지의 영역임

크게 네 부분으로 나뉘어 작업함

  • 로고와 로고 꾸며주기
  • 로고 아래쪽 배경 디자인
  • 애니메이션 적용
  • 미디어쿼리 적용

2.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>
  • header 영역을 작성해 intro를 만든다.
  • header 영역 안에 두 개의 큰 div 태그가 있는데 이는 각각 로고와 인트로의 배경 꾸미기를 위한 영역

2.1.1. 배경 삽입

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

배경 이미지의 url 지정해주기

2.2. CSS : 로고

2.2.1. 로고 영역

#intro .introwrap {
	position: relative;

	width: 760px;
	height: 516px;

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

	top: 100px;
}
  • relative 포지션은 자식 요소들과의 관계를 고려하여 설정해야 한다.
  • relative 포지션임을 고려한 가운데 정렬 방법으로
    left 50%와 width값의 절반만큼 margin-left를 사용하였다.

2.2.2. 로고 디자인

로고 디자인은 키즈가오 글씨이미지를 중심으로 네 마리 동물의 얼굴이 까딱이는 애니메이션을 하고 있다. 먼저 로고의 중심 이미지를 삽입한다.

#intro .introwrap .logo {
	position: absolute;

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

	z-index: 100;
}
  • 포지션 absolute로 z-index를 사용 가능하게 한다. 이는 여러 이미지를 겹쳐서 표현 가능하게 한다.
  • 이처럼 자식 영역의 포지션에 absolute를 사용할 경우 부모 속성이 relative인 것이 대체로 좋다.
    (배치 / 정렬 / 자식 영역의 시작 좌표 등)

동물 이미지들 삽입

#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;
}
  • 로고 중심이미지의 z-index 값인 100을 기준으로 z-index를 설정하여 z축 포지션을 결정한다. z-index의 기본값은 0이므로 입력하지 않는 경우 중심 이미지의 뒤로 간다.
  • 유사한 css 코드는 생략

결과출력

2.3. CSS : intro배경 꾸미기

2.3.1. 꾸미기 영역 설정

#intro .cloudwrap {
	position: relative;
	width: 100;
	height: 1050px;
	/*background-color: pink;*/
}
  • 위의 로고와 마찬가지로 상위 div영역을 먼저 설정
  • 백그라운드 컬러를 이용해 작업시 가시성을 높이고 주석처리 한 모습

2.3.2. 꾸미기 요소 삽입

#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);
	top: 800px;
}
  • 구름 이미지는 브라우저 기준 좌 우 끝을 기준으로 배치되어야 한다. flot을 사용할 경우 이미지 폭의 합이 브라우저 폭을 초과하면 아래로 내려가 레이아웃이 의도와 달라질 수 있다.
  • 구름 이미지가 겹칠 경우 좌측 구름 이미지가 위로 오도록 z-index를 설정해준 모습
  • left right top bottom 역시 position에 따라 사용할 수 있는가 여부가 달라진다. absolute의 경우 위와 같이 사용 가능.

결과출력

2.4. CSS - 애니메이션 적용

2.4.1. 까딱이는 동물 얼굴

#intro .introwrap .lion {
	animation: spinlion 1500ms linear infinite alternate;
}
@keyframes spinlion {
	from {
		transform: rotate(-10deg);
	}
	to {
		transform: rotate(10deg);
	}
}
  • 사자 얼굴 이미지에 transform: rotate를 통해 회전을 적용했다.

복습) anmation태그의 요소들은 순서대로
keyframes이름 / 재생시간 / 재생속도완급 / 반복횟수 / 재생방향

2.4.2. 날아가는 잠자리

#intro .cloudwrap .dragonfly {
	animation: flydragonfly linear 7s infinite;
}
@keyframes flydragonfly {
	from {
		left: -366px;
	}
	to {
		left: 100%;
	}
}
  • from의 left -366px는 잠자리 이미지의 폭 값
  • to letf 값을 고정 수치로 줄 경우 브라우저 크기에 따라 결과가 달라지므로 비율로 입력함
  • left와 같은 속성을 사용할 수 있는 것은 앞서 작성한 .dragonfly의 div태그가 absolute포지션을 갖고 있기 때문

2.5. CSS : 미디어쿼리

키즈가오 사이트의 경우 미디어쿼리의 변화 지점이 한 군데로 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;
	}
	#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);
	}
}
  • 유의해서 볼 부분은 .introwrap 정도이다. left :50% 값을 상속받기 때문에 따로 지정해주지 않고 영역의 width 절반 값인 94.5를 margin-left로 당겨주었다.
  • 로고의 동물 얼굴 이미지가 모바일 버전 이미지에서는 하나로 합쳐져있다. 따라서 지정한 미디어쿼리 영역에서는 출력되지 않게 display를 none로 설정.
  • 위와 같이 작업할 경우 해당 미디어쿼리 영역의 이미지 파일을 잘 살펴보고 적용시키는 것이 중요한 포인트
  • mobile_intro_bg.png의 실제 폭은 767px에 미치지 못하므로 반복적으로 나타나는 것을 잠자리 이미지가 반복되는 것을 통해 알 수 있다.

출력결과

3. farm1

  • farm영역 안에 4개의 div태그 영역이 있음
  • 인트로와 마찬가지로 css작업을 종류별로 나누어 진행

3.1. farm1 html

	<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>
				안전한 제품이랍니다.
			</p>
		</div>
	</div>

3.2. CSS : farm1 style

#farm1 {
	position: relative;
	width: 100%;
	height: 800px;
	background-image: url(../img/farm/farm1/farm1_bg.png);
}
#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;
}
#farm1 .farmer {
	position: absolute;
	width: 747px;
	height: 1078px;
	background-image: url(../img/farm/farm1/farmer.png);
	left: 50%;
	margin-left: -310px;
}
#farm1 .farmspeechwrap {
	position: relative;
	top: 250px;
	left: 150px;
}
#farm1 .farmspeechwrap .farmspeech {
	color: #895c2f;
	font-size: 18px;
	line-height: 27px;	
}
  • 전체 배경 이미지인 farm1은 intro와 마찬가지로 relative포지션 사용
  • 자식 속성들은 absloute를 사용하였음
  • 예외적으로 글자박스가 들어갈 .farmspeechwrap의 경우 relative를 사용하여 뒤에 작성된 코드가 y축 기준 상위에 노출되는 속성을 이용함
  • 벼 이미지는 앞서 구름과 마찬가지로 양쪽으로 배치, z-index를 적용하지 않은 이유는 벼 이미지의 width값 합이 767px이 넘지 않으므로 겹쳐지기 전에 미디어쿼리 전환되기 떄문

결과출력

3.3. CSS : farm1 미디어쿼리

  • farm1에는 애니메이션이 들어가지않음
  • 사이즈 조절과 정렬 작업을 진행
/*Farm1*/
#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;
	background-image: url(../img/mobile/farm/farm1/mobile_rightrice.png);
	top: -20px;
}
#farm1 .farmer {
	width: 160px;
	height: 250px;
	background-image: url(../img/mobile/farm/farm1/mobile_farmer.png);
	margin-left: -69px;
}
#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;
}
  • 마찬가지로 .farmer 이미지는 left값을 상속받았으므로 margin-left만 적용하여 정렬
  • '우리쌀 점토' 이미지에 align 속성을 주었기 떄문에 text-align을 통해 가운데 정렬할 수 있음

결과출력

4. farm2

전반적으로 간략한 파트. 축약해서 작성함

html

	<div id="farm2">
		<div class="leftrice2"></div>
		<div class="scarecrow"></div>
		<div class="rightrice2"></div>
	</div>

CSS - style

#farm2 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm2/farm2_bg.png);
}
#farm2 .leftrice2 {
	float: left;
	width: 250px;
	height: 850px;
	background-image: url(../img/farm/farm2/leftrice2.png);
}
#farm2 .rightrice2 {
	float: right;
	width: 236px;
	height: 850px;
	background-image: url(../img/farm/farm2/rightrice2.png);
}
#farm2 .scarecrow {
	position: absolute;
	width: 103px;
	height: 206px;
	background-image: url(../img/farm/farm2/scarecrow.png);
	margin: 200px 0 0 300px;
}
  • rice 항목들을 flot: left, right로 좌우 정렬함. 앞서 경우와 마찬가지로 이미지 폭이 작아 만나서 레이아웃 정렬이 달라지기 전에 모바일 버전 미디어쿼리로 전환되기 때문에 가능함.
  • 허수아비의 경우 margin으로 배치함. 이와 같이도 배치 가능.

결과 출력

CSS - mobile

@media (max-width: 767px) {
	#farm2 .leftrice2 {
		width: 57px;
		height: 201px;
		background-image: url(../img/mobile/farm/farm2/mobile_leftrice2.png);
	}
	#farm2 .rightrice2 {
		width: 54px;
		height: 202px;
		background-image: url(../img/mobile/farm/farm2/mobile_rightrice2.png);
	}
	#farm2 .scarecrow {
		display: none;
	}
}
  • 앞서 intro의 잠자리처럼 허수아비는 배경처리되고 영역이 넓을 시 반복해서 나타난다

결과출력

5. farm3

  • 배경영역 - 2개의 div와 1개의 img영역 - 하위 여러개의 div 영역으로 구성

5.1. html

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

5.2. CSS : farm3 style

#farm3 {
	position: relative;
	width: 100%;
	height: 850px;
	background-image: url(../img/farm/farm3/farm3_bg.png);
}
#farm3 .farm3window{
	position: absolute;
	width: 247px;
	height: 169px;
	background-image: url(../img/farm/farm3/window.png);
	margin: 100px 0 0 100px;
}
#farm3 .machinewrap {
	position: relative;
	width: 600px;
	height: 455px;
	/*background-color: yellow;*/
	left: 50%;
	margin-left: -285px;
	top: 150px;
}
#farm3 .machinewrap .machine1 {
	position: absolute;
	width: 586px;
	height: 455px;
	background-image: url(../img/farm/farm3/machine1.png);
	z-index: 900;
}
#farm3 .machinewrap .sawshadow {
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/sawshadow.png);
	margin: 145px 0 0 145px;
}
#farm3 .machinewrap .saw1,
#farm3 .machinewrap .saw2 {
	position: absolute;
	width: 95px;
	height: 95px;
	background-image: url(../img/farm/farm3/saw.png);
}
#farm3 .machinewrap .saw1 {
	margin: 140px 0 0 140px;
}
#farm3 .machinewrap .saw2 {
	margin: 140px 0 0 350px;
}
#farm3 .machinewrap .timer {
	position: absolute;
	width: 103px;
	height: 104px;
	background-image: url(../img/farm/farm3/second.png);
	margin: 125px 0 0 45px;
	z-index: 999;
}
#farm3 .machinewrap .machinebird {
	position: absolute;
	width: 44px;
	height: 49px;
	background-image: url(../img/farm/farm3/machinebird.png);
	margin: 220px 0 0 20px;
	z-index: 999;
}
#farm3 .farm3bubble {
	position: absolute;
	top: 350px;
	right: 80px;
}
  • 여러 영역을 배치하여 결과 이미지를 만들어 내야 할 때는 z축을 잘 고려하여야 한다.
  • 3차원 속성의 요소들은 마지막에 작성된 요소가 가장 위로 올라오게 되는 속성을 활용할 수 있다.
  • 완성될 이미지의 중심이 되거나 덩치가 큰 요소들은 z-index를 통해 직접 조절해주는 것이 혼선을 피할 수 있다.

결과출력

5.3. CSS : farm3 animation

#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);  }
}
  • transform : rotate의 from-to각도에 따라 시계, 반시계 방향으로 회전하게 된다

5.4. CSS : farm3 mobile

@media (max-width: 767px) {
	#farm3 {
		height: 500px;
		background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
	}
	#farm3 .farm3Window {
		width: 82px;
		height: 56px;
		background-image: url(../img/mobile/farm/farm3/mobile_window.png);
		margin: 10px 0 0 10px;
	}
	#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 .sawShadow,
	#farm3 .machineWrap .timer,
	#farm3 .machineWrap .machineBird {
		display: none;
	}
	#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 .farm3Bubble {
		position: absolute;
		width: 152px;
		left: 50%;
		margin: 0 0 0 -70px;
	}
}
  • 역시나 각 버젼에서 사용될 이미지를 잘 파악해서 늘이고, 줄이고, 넣고, 빼는 작업을 진행해준다.

결과출력

추가 학습

  • 실습의 경우와 달리 이미지 파일을 사용할 때에는 픽셀의 가로 세로 사이즈가 짝수 또는 5로 끝나도록 사용하는 것이 레이아웃의 안정성에 좋다고 한다.

미해결 - 솔루션

x

질문거리

  • 픽셀의 고정값을 통해 영역의 위치를 잡을 때 실습에서는 제시된 수치를 입력하였는데 실무에서 이미지파일이 주어졌을 때 위치를 잡는 방법이 궁금해졌음. 노가다...?인가??

학습 소감

중간저장은 분명 수시로 해줬는데... 중간에 velog 2시간치 작성이 날아가버렸다. 다른 소감이 떠오르지 않는다. 이것도 개발자가 된다면 흔히 겪게 될 일일까...?

profile
이동섭
responsibility
이전 포스트

개발일지 210712

다음 포스트

개발일지 210714

0개의 댓글

관련 채용 정보