7월 13일 Velog

류영서·2021년 7월 13일
대구AI스쿨
0

학습한 내용

Kids Gao 실습

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

0. Default

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

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

	<title>키즈가오</title>

</head>

[style.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;
}
  • overflow-x: hidden; : 브라우저의 x축 범위를 벗어나는 내용은 숨김 처리, 가로 스크롤 생성
  • button
    • 기본적으로 border를 가지고 있다. -> border: none; 로 제거
    • 기본적으로 희미한 회색을 가지고 있다.
      -> background-color: transparent; 로 투명하게 설정
  • .clearfix { clear: both; } -> float 사용시에 기본값으로 설정

1. Intro

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

[style.css]

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

	/*padding-top: 100px;*/
}

#intro .introWrap {
	position: relative;

	width: 760px;
	height: 516px;

	/*x축 중앙 정렬*/
	left: 50%;
	margin-left: -380px;

	/*margin-top: 100px;*/
	top: 100px;
}

/* Intro 상단 배치작업*/
#intro .introWrap .logo {
	position: absolute;

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

	z-index: 100;
	/*기준점을 설정*/
}

#intro .introWrap .lion {
	position: absolute;

	width: 161px;
	height: 161px;
	background-image: url(../img/intro/lion.png);

	margin: 80px 0 0 30px;

	z-index: 0;
}

#intro .introWrap .rabbit {
	position: absolute;

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

	margin: 90px 0 0 580px;

	z-index: 0;
}

#intro .introWrap .bear {
	position: absolute;

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

	margin: 310px 0 0 560px;

	z-index: 200;
}

#intro .introWrap .monkey {
	position: absolute;

	width: 85px;
	height: 93px;
	background-image: url(../img/intro/monkey.png);

	margin: 310px 0 0 50px;

	z-index: 200;
}

/*Intro 하단 배치작업*/
#intro .cloudWrap {
	position: relative;

	width: 100%;
	height: 1050px;
}

#intro .cloudWrap .leftCloud {
	/*float: left; 사용할 수 없다*/
	position: absolute;

	width: 934px;
	height: 816px;
	background-image: url(../img/intro/cloud1.png);

	left: 0;

	z-index: 2;
}

#intro .cloudWrap .rightCloud {
	/*float: right;*/
	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;
}

  • #intro의 크기 설정 : width = 100%, height = 백그라운 이미지의 높이

  • introWrap의 position : relative; 이유
    : left를 이용한 중앙 정렬 -> 3차원 속성
    : 부모 태그 = relative / 자식 태그 = absolute
    -> 부모 태그 영역을 기준점으로 좌표 이동(top/left/bottom/right) 가능

  • background_image는 기본적으로 주어진 공간에 대해 반복하는 속성이 있다. 따라서 백그라운드 이미지를 삽입할 영역의 width/height를 이미지와 동일한 크기로 맞춰준다.

  • logo, lion, rabbit, bear, monkey의 position : absolute;
    : 형제 div 태그 간에 z-index을 사용하여 겹침을 만들기 위해 3차원 포지션 부여

  • cloud1, cloud2 정렬

    • 둘 다 형제 div 태그 : block 요소의 성격, 기본적으로 y축 정렬
    • float 사용 : 브라우저 폭을 줄이면 각각의 width 값의 합보다 브라우저의 폭이 더 작아지면서 레이아웃이 틀어진다. -> 사용 X
    • 부모 태그에 relative, 자식 태그(cloud1, 2)에 absolute를 설정하고 left/right 속성값으로 0을 부여하여 부모 태그 영역을 기준으로 왼쪽 끝/오른쪽 끝으로 좌표 이동시킨다.

  • 완성 후 intro 상단에 공백을 주고 싶을 때
    (1) #intro 에 padding-top 적용 -> 부적절
    : padding 값으로 인해 #intro의 height 값이 늘어나서 나머지 컨텐츠들이 아래로 밀리게 됨

    (2) #intro .introWrap 에 margin-top 적용
    : 마진 병합 현상 때문에 사용할 수 없음

    (3) #intro .introWrap 에 top: 100px; 적용 -> 적절
    : 아래의 레이아웃의 최초 위치에 영향을 주지 않음, 겹치는 형태로 이동 (형제 태그들이 각각 relative 속성)

  • 실무 팁 : 이미지의 크기는 보통 5단위이거나 짝수로 한다.

[animation.css]

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(0deg);
	}

	to {
		transform: rotate(5deg);
	}
}

#intro .introWrap .bear {
	animation: spinBear 1000ms linear infinite alternate;
}

@keyframes spinBear {
	from{
		transform: rotate(10deg);
	}

	to {
		transform: rotate(-10deg);
	}
}

#intro .introWrap .monkey {
	animation: spinMonkey 800ms linear infinite alternate;
}

@keyframes spinMonkey {
	from{
		transform: rotate(20deg);
	}

	to {
		transform: rotate(50deg);
	}
}

/*화면 바깥으로 사라지는 애니메이션*/
#intro .cloudWrap .dragonfly {
	animation: flyDragonfly linear 7s infinite;
}

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

	to {
		left: 100%;
	}
}
  • 화면 바깥으로 사라지는 애니메이션
    • left: 100%; : 잠자리 이미지의 왼쪽 면 기준으로 브라우저 width 값 100% 만큼 이동한다. -> 브라우저의 크기 변화에 따라 유동적
    • style.css의 body{overflow-x: hidden;}를 설정하지 않으면 애니메이션 적용시에 가로 스크롤이 발생한다. -> 디폴트로 사용

[mobile.css]

	#intro {
		height: 1150px;
		background-image: url(../img/mobile/intro/mobile_intro_bg.png);
	}

	#intro .introWrap {
		width: 189px;
		height: 129px;

		 /*left:50% 상속*/
		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: 200px;
	}

	#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);
	}
  • display: none; : 모바일 화면에서 숨김

2. Farm 1

왼쪽 : 벼 이미지, 헤드라인, 설명
중간 : 농부 이미지
오른쪽 : 벼 이미지

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

[style.css]

#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: #895c3f;
	font-size: 18px;
	line-height: 27px;
}

  • <br> : p 태그 내의 띄어쓰기

  • #farm1 .farmSpeechWrap
    : 먼저 나온 이전 형제 태그가 모두 absolute, 3차원이므로 뒤에 나오는 형제 태그와 레이어가 겹친다. 뒤에 잇는 형제 태그(relative)일수록 레이어가 높이 배치된다.

  • line-height: 27px; : 글자 위아래 간격 지정

[mobile.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;
		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);

		/* left: 50%; 상속 */
		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;
	}
  • #farm1 .farmSpeechWrap 의 text-align: center;
    : 글자, inline 요소를 중앙 정렬
    : img 태그는 inline-block 요소를 갖는다.

3. Farm 2

왼쪽 : 벼
오른쪽 : 벼
허수아비

[html]

	<div id="farm2">		
		<div class="leftRice2"></div>
		<div class="scarecrow"></div>
		<div class="rightRice2"></div>
	</div>

[style.css]

#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;
}
  • leftRice2와 rightRice2는 브라우저 크기를 줄여도 둘이 만나기 전에 모바일 버전으로 바뀌기 때문에 float로 좌우 배치해도 문제 없다.

[mobile.css]

	#farm2 {
		height: 440px;
		background-image: url(../img/mobile/farm/farm2/mobile_farm2_bg.png);
	}

	#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;
		/* mobile_farm2_bg.png에 넣어서 대체 */
	}

4. Farm 2

왼쪽 : 창문
중간 : 기계
오른쪽 : 말풍선

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

[style.css]

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

	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;
}
  • saw1, saw2 -> position: absolute;
    : 나중에 나오는 3차원 형제 태그의 레이어가 더 높아서 sawshadow보다 위에 겹친다. z-index 값이 없기 때문에 machine보단 아래에 위치한다.

[animation.css]

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

[mobile.css]

	#farm3 {
		height: 500px;
		background-image: url(../img/mobile/farm/farm3/mobile_farm3_bg.png);
	}

	#farm3 .farm3Window {
		width: 82px;
		height: 52px;
		background-image: url(../img/mobile/farm/farm3/mobile_window.png);
		
		margin: 10px 0 0 10px;
	}

	#farm3 .machineWrap {
		width: 200px;
		height: 150px;

		margin-left: -96px;
        
        top: 120px;
	}

	#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 .saw {
		margin: 50px 0 0 115px;
	}

	#farm3 .farm3Bubble {
		position: absolute;

		width: 152px;

		left: 50%;
		margin: 0 0 0 -70px;
	}

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

실습을 하던 중에 형제 태그 position 관계에서 내가 정리했던 것과 다른 부분을 인지하여 코드를 더 추가하여 겹침에 대해 연습해보았다.

해결 방법 작성

[html]

	<div class="a"></div>
	<div class="b"></div>

[css]

.a {
	position: relative;

	width: 200px;
	height: 300px;
	background-color: pink ;

	top: 50px;

	/*z-index: 10;*/
}

.b {
	/*position: static;*/
    /*position: fixed;*/
	/*position: relative;*/
	/*position: absolute;*/

	width: 200px;
	height: 300px;
	background-color: yellow ;
}

앞서 형제 태그 관계를 알아볼 때는 top 값이 없을 때 레이어에 겹침이 발생하지 않았다.

이번에는 앞의 태그에 top: 50px; 을 부여하여 레이어가 겹쳐진 상태에서 비교해보았다.
앞에 있는 형제 태그의 position을 relative로 고정하였다.

default 값인 static 을 제외하고는 z-index 에 따라 레이어의 겹침이 발생하였다.

학습 소감

이미지 파일을 이용해서 실제 사이트와 비슷하게 만드는 것이 흥미로웠다. position에 따른 태그 간의 관계를 직접 적용하는 것이 어렵게 느껴졌다.

profile
류영서
이전 포스트

7월 12일 Velog

다음 포스트

7월 14일 Velog

0개의 댓글

관련 채용 정보