๐Ÿฃ ์ฃผ๋‹ˆ์–ด ๊ฐœ๋ฐœ์ผ์ง€ - ํ‚ค์ฆˆ๊ฐ€์˜ค ์›น์‚ฌ์ดํŠธ ์—ฐ์Šต #1

๐Ÿ“˜ ์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ


ํ‚ค์ฆˆ๊ฐ€์˜ค ์›น์‚ฌ์ดํŠธ ์—ฐ์Šต

Intro ๋ถ€๋ถ„

1) head ๋””ํดํŠธ๊ฐ’ ์„ค์ •

  • meta ๊ฐ๊ฐ ์ •์˜๋‚ด๋ฆฌ๊ธฐ
  • title ํƒ€์ดํ‹€ ์ •ํ•˜๊ธฐ
  • link css ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
<!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/style.css">
	<link rel="stylesheet" type="text/css" href="css/animation.css">
	<link rel="stylesheet" type="text/css" href="css/mobile.css">
</head>

2) ์ฒซ ํŽ˜์ด์ง€ ๊ณต๊ฐ„ ์ž‘์—…

  • div ๊ณต๊ฐ„ ๋‚˜๋ˆ„๊ธฐ
  • class ๊ฐ div๋งˆ๋‹ค ์ด๋ฆ„ ์ •ํ•˜๊ธฐ
<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>

3) css ์ดˆ๊ธฐํ™” ์ž‘์—… ๋ฐ ์ „์ฒด์ ์ธ ์„ค๊ณ„

  • h button clear ๋“ฑ ์•ž์œผ๋กœ ์‚ฌ์šฉํ•  ํƒœ๊ทธ ๋ฏธ๋ฆฌ ์„ค๊ณ„
  • body { overflow-x: hidden; } ์‚ฌ์šฉํ•˜์—ฌ ๊ฐ€๋กœ์Šคํฌ๋กค ๋ฐฉ์ง€ **7) ์ฐธ๊ณ 
/* 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; }

4) Intro ์˜์—ญ ๋””์ž์ธ ์ž‘์—…

  • intro ๋ฐฐ๊ฒฝ ๋ถˆ๋Ÿฌ์˜ค๊ธฐ
#intro { width: 100%; height: 1600px;
	background-image: url(../img/intro_bg.png); }
  • introWrap ํฌ์ง€์…˜ ์„ค์ •, ๊ฐ€์šด๋ฐ ์ •๋ ฌ
#intro .introWrap { position: relative;
		    width: 760px; height: 516px; background-color: yellow;
            
		   /* ์˜ค๋ธŒ์ ํŠธ ๊ฐ€์šด๋ฐ ์ •๋ ฌ */ 
                   left: 50%; margin-left: -380px; }
  • logo ๋กœ๊ณ  ๋„ฃ๊ธฐ
#intro .introWrap .logo { position: absolute;
			  width: 760px; height: 516px;
			  background-image: url(../img/intro/logo.png);
			 
           		 /* ๊ธฐ์ค€์  ํ‘œ์‹œ */ z-index: 100; }

5) ๋™๋ฌผ & ๊ตฌ๋ฆ„ ๋ฐฐ์น˜์ž‘์—…

  • z-index ๊ฐ’์„ ์ฃผ์–ด ์ด๋ฏธ์ง€ ๋ ˆ์ด์–ด ์ž‘์—…
  • margin ์—ฌ๋ฐฑ ์กฐ์ •
#intro .introWrap .lion { position: absolute; 
			 width: 161px; height: 161px;
			 background-image: url(../img/intro/lion.png);
			 margin: 80px 0 0 30px; }

#intro .introWrap .rabbit {  position: absolute;
	     		  width: 105px; height: 129px;
                          background-image: url(../img/intro/rabbit.png);
                          margin: 90px 0 0 580px; }
                          
#intro .introWrap .monkey { position: absolute;
			   width: 85px; height: 93px;
            		   background-image: url(../img/intro/monkey.png);
                       	   margin: 310px 0 0 50px;
			   z-index: 200; }
  • ๋ธ”๋Ÿญ์š”์†Œ๋ฅผ ๊ฐ€์ง„ divํƒœ๊ทธ๋Š” y์ถ•์œผ๋กœ ์ •๋ ฌ๋˜๋ฏ€๋กœ ๋‹ค์‹œ ์ •๋ ฌ
    • floatํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด ์ •๋ ฌํ•˜๋ฉด ๋˜์ง€๋งŒ, ๋ ˆ์ด์•„์›ƒ ํ‹€์–ด์ง ํ˜„์ƒ์ด ์ผ์–ด๋‚œ๋‹ค.
      (ํ˜„์žฌ ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๋ณด๋‹ค float์„ ์‚ฌ์šฉํ•œ width๊ฐ’์˜ ๋ชจ๋“  ํ•ฉ์ด ๋” ํฌ๊ธฐ๋•Œ๋ฌธ)
    • position: absolute; ์‚ฌ์šฉํ•˜์—ฌ left, right ๊ฐ’ ์ฃผ๋ฉด๋œ๋‹ค.
#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; }

6) ๋กœ๊ณ  ์•„๋ž˜๋กœ ๋‚ด๋ฆฌ๊ธฐ

  • margin-top: 100px;* ๐Ÿ‘‰ ๋งˆ์ง„๋ณ‘ํ•ฉ ํ˜„์ƒ์œผ๋กœ ์‚ฌ์šฉX
  • ๋งˆ์ง„ ๋ณ‘ํ•ฉํ˜„์ƒ์—†์ด ๋‚ด๋ฆฌ๋Š” ๋ฐฉ๋ฒ•
    1.intro์™€ introWrap์‚ฌ์ด์— ๊ณต๋ฐฑ ๋งŒ๋“ค๊ธฐ (์‚ฌ์šฉX)

    ๐Ÿ“ ๋ฌธ์ œ์ 
    intro์˜ ๋†’์ด๊ฐ’์ด ๋ณ€ํ•œ๋‹ค.
    ๋ชจ๋“ ์ปจํ…์ธ ๊ฐ€ padding๊ฐ’ ๋งŒํผ ๋ฐ€๋ฆฐ๋‹ค. (๋ ˆ์ด์–ด ํ‹€์–ด์ง)
    2.top์„ ์‚ฌ์šฉํ•œ๋‹ค. ( position: relative; ์‚ฌ์šฉํ•œ ์ด์œ  )
    3์ฐจ์›์„ ๊ฐ€์ง€๊ณ  top์„ ์‚ฌ์šฉํ•  ๊ฒฝ์šฐ, ์•„๋ž˜์ชฝ์— ์–ด๋– ํ•œ ๋ ˆ์ด์•„์›ƒ ์š”์†Œ๊ฐ€ ๋ฐฐ์น˜๋˜์–ด ์žˆ๋”๋ผ๋„ ๋ณ€ํ™”๊ฐ€ ์—†๋‹ค.
    (๊ฒน์น˜๋Š” ํ˜•ํƒœ๋กœ ์ด๋™์ด ๋œ๋‹ค. ๋ ˆ์ด์•„์›ƒ ํ‹€์–ด์ง ํ˜„์ƒX )
    ๋ ˆ์ด์•„์›ƒ 2๊ฐœ๋‹ค 3์ฐจ์› ํŠน์ง•์„ ๊ฐ€์ง€๊ณ  ์žˆ๊ธฐ์— ๋‚˜์ค‘์— ์ž‘์„ฑํ•œ ๊ตฌ๋ฆ„์ด ์œ„๋กœ ์˜ฌ๋ผ์˜ค๊ฒŒ ๋œ๋‹ค.

7) ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„

  • ๋™๋ฌผ rotate ํšจ๊ณผ
#intro .introWrap .lion { animation: spinLion 1500ms linear infinite alternate; }
@keyframes spinLion { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
  • ์ž ์ž๋ฆฌ ์›€์ง์ž„ ํšจ๊ณผ
    • keyframes ์•ˆ์— ์ ์šฉ๋˜๋Š” ํšจ๊ณผ๋“ค์€ ๊ธฐ๋ณธ์ ์œผ๋กœ ์ž‘์„ฑ๋œ css์˜ ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค. (left ์‚ฌ์šฉ๊ฐ€๋Šฅ)
    • left๊ฐ’์„ 100%๋กœ ์ฃผ์–ด ์ž ์ž๋ฆฌ๊ฐ€ ํ•ญ์ƒ ํ™”๋ฉด ๋ฐ”๊นฅ์—์„œ ์‚ฌ๋ผ์ง€๊ฒŒ ํ•˜๋Š” ๊ฒƒ์ด ํฌ์ธํŠธ !
    • ๋ธŒ๋ผ์šฐ์ €๋ฅผ ๋ฒ—์–ด๋‚˜๋Š” ๋ถ€๋ถ„์ด ๊ฐ™์ด ํ‘œ์‹œ๋˜๋ฏ€๋กœ overflow-x๋ฅผ ์ ์šฉํ•ด์ฃผ์—ˆ๋‹ค.
#intro .cloudWrap .dragonfly { animation: flyDragonfly linear 7s infinite; }
@keyframes flyDragonfly { from {left: -366px} to {left: 100%} }

8) ๋ชจ๋ฐ”์ผ ์„ค๊ณ„

  • @media ๋ฏธ๋””์–ด์ฟผ๋ฆฌ ์•ˆ์— ํƒœ๊ทธ ์ž‘์„ฑ
  • display: none;์œผ๋กœ PC๋ฒ„์ „์— ๋‚จ์•„์žˆ๋Š” ์ •๋ณด ๊ฐ์ถฐ์ฃผ๊ธฐ
	#intro .introWrap .lion,
	#intro .introWrap .rabbit,
	#intro .introWrap .bear,
	#intro .introWrap .monkey,
	#intro .cloudWrap .dragonfly { display: none; }

๋†๋ถ€ ๋ถ€๋ถ„

  • text-align: center; ๊ธ€์ž, ์ธ๋ผ์ธ ์š”์†Œ์—๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
    • ์ด๋ฏธ์ง€์ด์ง€๋งŒ, ์ธ๋ผ์ธ ์š”์†Œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด ๊ฐ€์šด๋ฐ ์ •๋ ฌ์ด ๊ฐ€๋Šฅํ•จ
	#farm1 .farmSpeechWrap {
		width: 300px;

		text-align: center;

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

	#farm1 .farmSpeechWrap img {
		width: 79px;
	}

๋จธ์‹  ๋ถ€๋ถ„

  • ๋จธ์‹ ์˜ ์œ„์น˜๋Š” ํ•ญ์ƒ ์ตœ์ƒ์— ์œ„์น˜ํ•ด์•ผํ•˜๊ธฐ ๋•Œ๋ฌธ์— z-index: 900;์œผ๋กœ ์„ค์ •

๊ธฐ์–ตํ•ด์•ผํ•  ๋ถ€๋ถ„

  • overflow-x: hidden;
    ๋ธŒ๋ผ์šฐ์ € ํฌ๊ธฐ๋ณด๋‹ค (x์ถ•์„ ๋ฒ—์–ด๋‚˜๊ฒŒ ๋˜๋ฉด) ์ˆจ๊น€์ฒ˜๋ฆฌ

  • .clearfix { clear: both; }
    float๊ณผ ํ•จ๊ป˜ ๋“ฑ์žฅํ•˜๋Š” clear ํƒœ๊ทธ
    ( clear both๋ฅผ ๋‹ด๊ณ  ์žˆ๋Š” ๊ด€๋ก€์ ์ธ ํด๋ž˜์Šค ๋ช… .clearfix )

  • position
    ํฌ์ง€์…˜์„ ์‚ฌ์šฉํ•  ๋•Œ, ์–ด๋–ค ์†์„ฑ๊ฐ’์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์— ๋”ฐ๋ผ ๋‹น์œ„์„ฑ์ด ํ•„์š” !
    โœจ ์™œ ์ด ์†์„ฑ๊ฐ’์„ ์‚ฌ์šฉํ–ˆ๋Š”์ง€์— ๋Œ€ํ•œ ์ด์œ  ํ•„์š”
    ์ด์œ ๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด ํฌ์ง€์…˜ ์ดํ•ดํ•˜๋Š”๋ฐ ๋งŽ์€ ๋„์›€์ด ๋œ๋‹ค !

    • position: absolut;๋ฅผ ์ž์‹์œผ๋กœ ์‚ฌ์šฉํ•˜๊ฒŒ๋˜๋ฉด, position: relative;๋กœ ๋ถ€๋ชจ๋ฅผ ๊ฐ์‹ธ์ฃผ๊ธฐ = ์ข‹์€ ์Šต๊ด€
    • position: absolut;
      ๋ ˆ์ด์–ด์ธต์ด ์กด์žฌํ•  ๋•Œ ์‚ฌ์šฉ , z์ถ•์ด ์กด์žฌํ•œ๋‹ค๋Š” ์˜๋ฏธ (3์ฐจ์›)
    • position: relative;
      ์ค‘์•™ ์ •๋ ฌ ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ
      top, left ๋“ฑ์„ ์‚ฌ์šฉํ•˜๊ธฐ๋•Œ๋ฌธ์— ๋ถ€๋ชจ์— ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.
  • left: 50%; margin-left: -380px;
    ์˜ค๋ธŒ์ ํŠธ ๊ฐ€์šด๋ฐ ์ •๋ ฌ

  • z-index: 100;
    100์ด๋ผ๋Š” ์ˆซ์ž๋ณด๋‹ค ์ž‘์œผ๋ฉด ๋’ค์— ๋ฐฐ์น˜, ํฌ๋ฉด ์•ž์— ๋ฐฐ์น˜๋œ๋‹ค. (๊ธฐ์ค€์  ํ‘œ์‹œ)
    position: absolute;์™€ ํ•จ๊ป˜ ์‚ฌ์šฉ
    ๊ธฐ๋ณธ๊ฐ’์€ z-index: 0;์œผ๋กœ ์ƒ๋žต ๊ฐ€๋Šฅ

  • width๊ฐ’์— ๋”ฐ๋ผ margin-left๊ฐ’ ์ •์˜ํ•˜๊ธฐ

๐Ÿ“Œ ์˜ค๋Š˜์˜ Tip


  • ์ด๋ฏธ์ง€ ์ž‘์—…์‹œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ์— ๋งž์ถฐ ๊ณต๊ฐ„ํฌ๊ธฐ ์„ค์ •ํ•˜๊ธฐ (๋‹จ, ๋ฐฐ๊ฒฝ์ด๋ฏธ์ง€๋Š” ์ œ์™ธ)
  • ์ง์ˆ˜ํ˜•ํƒœ ์ด๋ฏธ์ง€ ์‚ฌ์ด์ฆˆ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ ˆ์ด์•„์›ƒ ์ž‘์—…์ด ํ›จ์”ฌ ์ˆ˜์›”ํ•ด์ง !!
  • ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ์ด์šฉํ•˜๋ฉด ๋ฐ”๊นฅ์ชฝ CSS์˜ ์†์„ฑ๊ฐ’์— ์ƒ์†๋ฐ›๋Š”๋‹ค.
  • background repeat๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ถˆํ•„์š”ํ•œ ์ด๋ฏธ์ง€ ์ค„์ด๊ธฐ
  • ๊ทธ๋ผ๋ฐ์ด์…˜ ์ด๋ฏธ์ง€๋Š” ์ž…๋ฌธ๋‹จ๊ณ„์— ์–ด๋ ค์šธ ์ˆ˜ ์žˆ๋‹ค..!

โ” ๊ถ๊ธˆํ–ˆ๋˜ ๊ฒƒ OR ์–ด๋ ค์› ๋˜ ๊ฒƒ


  • ๋†๋ถ€ ๋ถ€๋ถ„์—์„œ ์Œ€์ด๋ฏธ์ง€๊ฐ€ ๋ชจ๋ฐ”์ผ๋ฒ„์ „์—์„œ ๊ทธ๋Œ€๋กœ ๊ตฌํ˜„๋˜์—ˆ๋‹ค.

๐Ÿ’ก ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•!


  • ์ฝ”๋“œ๋ฅผ ๋‹ค์‹œ ํ™•์ธํ•˜๋Š”๋ฐ ์–ด๋–ค ์˜ค๋ฅ˜๋„ ์ฐพ์ง€ ๋ชปํ–ˆ๋‹ค.
  • ๊ฒ€์‚ฌ ๊ธฐ๋Šฅ์„ ํ†ตํ•ด์„œ ๋ฌธ์ œ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ™•์ธํ–ˆ๋”๋‹ˆ, ๋ณ€์ˆ˜๋ช…์ด ์ž˜๋ชป ๊ธฐ์ž…๋˜์—ˆ๋˜ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  • ์˜ค๋ฅ˜๋ฅผ ์ฐพ๋Š”๋ฐ ๊ฐ€์žฅ ๋น ๋ฅธ ๊ธฐ๋Šฅ์€ ๊ฒ€์‚ฌ ๊ธฐ๋Šฅ์ธ ๊ฒƒ ๊ฐ™๋‹ค!!

๐ŸŒฑ ๊ณต๋ถ€๋ฅผ ๋งˆ๋ฌด๋ฆฌํ•˜๋ฉฐ,


์˜คํƒ€, ๋ณ€์ˆ˜๋ช… ์ž˜๋ชป ๊ธฐ์ž… ๋“ฑ ๋‹ค์–‘ํ•œ ์˜ค๋ฅ˜๊ฐ€ ์ผ์–ด๋‚˜์„œ ํ•™์Šต์ด ๊ธธ์–ด์กŒ๋‹ค.
์˜ค๋ž˜๊ฑธ๋ฆฐ๋งŒํผ ์–ป๋Š” ๊ฒƒ์ด ๋งŽ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๊ธฐ๋กœ ํ–ˆ๋‹ค..!
ํ™•์‹คํžˆ ํ™ˆํŽ˜์ด์ง€ ํ•˜๋‚˜๋ฅผ ์žก๊ณ  ์—ฐ์Šตํ•˜๋Š”๊ฒŒ ํ›จ์”ฌ ๋” ์‹ค๋ฌด์— ๊ฐ€๊นŒ์›Œ์ง„ ๋Š๋‚Œ์ด ๋“ ๋‹น ๐Ÿ‘

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ