๐ฃ ์ฃผ๋์ด ๊ฐ๋ฐ์ผ์ง - ํค์ฆ๊ฐ์ค ์น์ฌ์ดํธ ์ฐ์ต #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 ์ด๋ ค์ ๋ ๊ฒ
- ๋๋ถ ๋ถ๋ถ์์ ์์ด๋ฏธ์ง๊ฐ ๋ชจ๋ฐ์ผ๋ฒ์ ์์ ๊ทธ๋๋ก ๊ตฌํ๋์๋ค.
๐ก ํด๊ฒฐ ๋ฐฉ๋ฒ!
- ์ฝ๋๋ฅผ ๋ค์ ํ์ธํ๋๋ฐ ์ด๋ค ์ค๋ฅ๋ ์ฐพ์ง ๋ชปํ๋ค.
- ๊ฒ์ฌ ๊ธฐ๋ฅ์ ํตํด์ ๋ฌธ์ ์ ์ด๋ฏธ์ง๋ฅผ ํ์ธํ๋๋, ๋ณ์๋ช ์ด ์๋ชป ๊ธฐ์ ๋์๋ ๊ฒ์ ํ์ธํ ์ ์์๋ค.
- ์ค๋ฅ๋ฅผ ์ฐพ๋๋ฐ ๊ฐ์ฅ ๋น ๋ฅธ ๊ธฐ๋ฅ์ ๊ฒ์ฌ ๊ธฐ๋ฅ์ธ ๊ฒ ๊ฐ๋ค!!
๐ฑ ๊ณต๋ถ๋ฅผ ๋ง๋ฌด๋ฆฌํ๋ฉฐ,
์คํ, ๋ณ์๋ช
์๋ชป ๊ธฐ์
๋ฑ ๋ค์ํ ์ค๋ฅ๊ฐ ์ผ์ด๋์ ํ์ต์ด ๊ธธ์ด์ก๋ค.
์ค๋๊ฑธ๋ฆฐ๋งํผ ์ป๋ ๊ฒ์ด ๋ง๋ค๊ณ ์๊ฐํ๊ธฐ๋ก ํ๋ค..!
ํ์คํ ํํ์ด์ง ํ๋๋ฅผ ์ก๊ณ ์ฐ์ตํ๋๊ฒ ํจ์ฌ ๋ ์ค๋ฌด์ ๊ฐ๊น์์ง ๋๋์ด ๋ ๋น ๐
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐ฃ ์ฃผ๋์ด ๊ฐ๋ฐ์ผ์ง - ํค์ฆ๊ฐ์ค ์น์ฌ์ดํธ ์ฐ์ต #1), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@seok_aejin1231/์ฃผ๋์ด-๊ฐ๋ฐ์ผ์ง-ํค์ฆ๊ฐ์ค-์น์ฌ์ดํธ-์ฐ์ต์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค