[Front-end๐Ÿฆ] #8 ์›น ํ”„๋กœ์ ํŠธ - Jungle Cinema / CSS Animation

1. Jungle Cinema (Weniv) ๊ตฌํ˜„

์ˆ˜์—… ์†Œ์Šค์ฝ”๋“œ


2-1. ๊ฐ€์ด๋“œ

๊ฐ•์‚ฌ๋‹˜์ด ์‹ค์‹œ๊ฐ„์œผ๋กœ ๊ตฌํ˜„ํ•ด์ฃผ์‹œ๋Š”๊ฑธ ๋ณด๊ณ , ์ฝ”๋“œ๋ฅผ ๋”ฐ๋ผ์„œ ํƒ€์ดํ•‘ํ•˜๊ณ , ์ˆœ์„œ๋Œ€๋กœ ํ•œ๋ฒˆ ๋‹ค์‹œ ์ฝ์–ด๋ณด๊ณ  ์ฒ˜์Œ๋ถ€ํ„ฐ ๋‹ค์‹œ ๊ตฌํ˜„ํ•ด์•ผํ•œ๋‹ค... ์ด๋ฏธ ์›น์„ ์ž˜ ๋งŒ๋“œ๋Š” ๊ณ ์ˆ˜๋‹˜์ด ์–ด๋–ค ์ˆœ์„œ๋กœ ์งœ๋Š”์ง€, ์–ด๋–ค๊ฑธ ์‹ ๊ฒฝ์จ์„œ ๋งŒ๋“œ๋Š”์ง€ ๋ณผ ์ˆ˜ ์žˆ๋Š” ์‹œ๊ฐ„์ด์—ˆ๋‹ค.

1. ๋งˆํฌ์—… ์ˆœ์„œ์™€ ์—ฌ๋Ÿฌ ํŒ๋“ค

1. ํŽ˜์ด์ง€๋ฅผ ๋ณด๊ณ  ๊ตฌํš์„ ๋‚˜๋ˆ ์„œ html tag ์ž‘์„ฑ

- ์›น ์ ‘๊ทผ์„ฑ์„ ์œ„ํ•œ ํ™”๋ฉด์— ๋ณด์ด์ง€ ์•Š๋Š” ํƒœ๊ทธ๋Š” ๋งˆํฌ์—… ๋‹จ๊ณ„์—์„œ class="sr-only" ์ฒ˜๋Ÿผ ์•Œ์•„๋ณผ ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์„ ์ค€๋‹ค.
\
- ํ™”๋ฉด์— ์•ˆ๋ณด์ด๋Š” ์ •๋ณด๋ผ๋„ ๊ผญ heading์„ ๋‹ฌ์ž. heading์„ ๋‹ฌ ๋•Œ๋Š” ๋…ผ๋ฆฌ์ ์ธ ํ๋ฆ„์„ ์ƒ๊ฐํ•ด๋ณด๊ณ  ๋‹ฌ์ž.
\
- nav ์•ˆ์˜ li์˜ ๊ฒฝ์šฐ๋Š” ๋‚˜์ค‘์— js๋กœ ๋ˆŒ๋ €์„ ๋•Œ์— ๋Œ€ํ•œ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ค˜์•ผํ•˜๋ฏ€๋กœ class="on" ์ฒ˜๋Ÿผ ์ƒํƒœ์— ๋Œ€ํ•œ ํด๋ž˜์Šค๋ฅผ ๋”ฐ๋กœ ์ฃผ์ž.
\
- alt๋Š” ์ƒ์„ธํ•˜๊ฒŒ ๋‹ฌ๋ฉด ์ข‹๋‹ค.
\
- ๋ณด์ด๋Š” ์ˆœ์„œ๋„ ์ค‘์š”ํ•˜์ง€๋งŒ, ๋…ผ๋ฆฌ์ ์ธ ์ˆœ์„œ๋„ ๊ผญ ์ƒ๊ฐํ•ด๋ณด๊ณ  ๋งˆํฌ์—…์„ ํ•œ ๋’ค css๋กœ ์˜ฎ๊ธฐ์ž.

2. CSS ํŒŒ์ผ ์—ฐ๊ฒฐ

/* ์ผ๋ฐ˜์ ์ธ CSS file ๊ตฌ์กฐ! */
/* setting */
/* animation */
/* utility */
/* reset */
/* layout */
/* design */
/* media query */

์œ„์˜ 4๊ฐœ๋Š” ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€Œ๊ธฐ๋„ ํ•œ๋‹ค.

3. setting

@media ๋‚˜ ํ•œ๊ธ€ ์ฃผ์„์ด ๊นจ์ง€์ง€ ์•Š๋„๋ก ํ•˜๋Š” @charset "utf-8"; ๊ฐ™์€ ํƒœ๊ทธ๋“ค!

4. util

- ๋ง์ค„์ž„ ๊ฐ™์€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ํƒœ๊ทธ์— ์ ์šฉ๋˜๋Š” ์†์„ฑ์€ CSS ๋งจ ์œ„์— ์†์„ฑ๋“ค ๋จผ์ € ๋งŒ๋“ค๊ณ  ํƒœ๊ทธ์— ๋‹ฌ์•„์ค€๋‹ค. 
์ต์ˆ™ํ•ด์ง€๋ฉด html ๋งˆํฌ์—… ๋จผ์ € ์ง„ํ–‰ํ•˜๊ณ , class๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค. (ex. sl-ellipsis)

5. reset CSS

- reset CSS: aํƒœ๊ทธ ์†์„ฑ์€ ์—†๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ•˜๊ธฐ.

6. design/style

์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์—๋Š” animation์ด๋‚˜ layout๊ฐ€ ๊ฑฐ์˜ ์—†๊ณ  ๋ฐ”๋กœ design ์ด์—ˆ๋‹ค. ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋“ค์€ ๋ช‡ ๊ฐ€์ง€ ํŒ๋“ค์„ ์ •๋ฆฌํ•œ๋‹ค.
|
|
- ๊ฐ€๋กœ ์„ , ์„ธ๋กœ ์„ , ์•„์ด์ฝ˜์€ ๊ฐ€์ƒ ์š”์†Œ(::before, ::after / background-image)๋ฅผ ์ด์šฉํ•ด์„œ ์ฃผ๋Š” ๊ฒƒ์ด ๊น”๋”ํ•˜๋‹ค. border๋ฅผ ์ด์šฉํ•ด์„œ ์ค˜๋„ ๋˜์ง€๋งŒ, hr๋กœ๋Š” ์ ˆ๋Œ€ ์ฃผ์ง€๋ง์ž.
-
- style ์„ ์–ธ์„ ํ•  ๋•Œ, ๋ถ€๋ชจ ํƒœ๊ทธ๋Š” ์ ์–ด๋„ 2๊ฐœ๋Š” ๋ช…์‹œํ•ด์„œ ๋‚˜์ค‘์— ์š”์†Œ๊ฐ€ ์ถ”๊ฐ€๋  ๋•Œ ์ถฉ๋Œํ•˜์ง€ ์•Š๊ฒŒ ํ•˜์ž.
-
- anchor์˜ ๊ฒฝ์šฐ ๋งˆํฌ์—… ๋‚ด์˜ ๋„์–ด์“ฐ๊ธฐ๊ฐ€ ์ธ์‹์ด ๋˜์–ด์„œ layout์ด ๊นจ์งˆ ์ˆ˜ ์žˆ๋‹ค. - ๋„์–ด์“ฐ๊ธฐX or float๋กœ ํ•ด๊ฒฐํ•˜์ž.
-
- Vendor prefix ๋„ ์‚ฌ์šฉํ•ด๋ณด์•˜๋Š”๋ฐ, ๋ธŒ๋ผ์šฐ์ €๋ณ„๋กœ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ํ˜•์‹์„ ์ง€์›ํ•˜๊ฒŒ ํ•˜๋ ค๋Š” ๊ฒƒ. 
-
- naming convention์˜ ๊ฒฝ์šฐ ์ผํ•˜๊ฒŒ ๋  ๊ณณ์˜ ๊ทœ์น™์„ ๋”ฐ๋ฅด๋ฉด ๋œ๋‹ค. 
-
-์•ˆ์ชฝ ์š”์†Œ์— ํ…Œ๋‘๋ฆฌ๋ฅผ ์ฃผ๋ ค๋ฉด, ๋ถ€๋ชจ์— padding์„ ์ฃผ๊ฑฐ๋‚˜, ์ž์‹์— margin์„ ์ค˜์„œ ํ•ด๊ฒฐํ•œ๋‹ค.

CSS Validator ๋ฅผ ์ด์šฉํ•ด์„œ ์‚ฌ์šฉํ•ด๋„ ๊ดœ์ฐฎ์€ ์š”์†Œ๋“ค์„ ์ด์šฉํ•ด์„œ ์งฐ๋Š”์ง€ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ๋‹ค.


2. ์›น ์ ‘๊ทผ์„ฑ

์›น ์ ‘๊ทผ์„ฑ ๊ณ ๋ ค์‹œ ๊ธ€์ž๋ฅผ ์ˆจ๊ธฐ๋Š” 4๊ฐ€์ง€ ๋ฐฉ๋ฒ•
display: none์œผ๋กœ ์ˆจ๊ธฐ๋ฉด screen reader์— ์•ˆ์ฝํžŒ๋‹ค.

.sr-only { text-indent: 1000px; }
.sr-only {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}
.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px; height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}
.a11y-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    width: 1px; height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
}

skip navigation ๋งŒ๋“ค๊ธฐ.

<div class="nav-skip">
  <a href="#cont-nav">์˜ํ™” ์ •๋ณด ๋ชฉ๋ก ๋ฐ”๋กœ๊ฐ€๊ธฐ</a>
  <a href="#cont-company">ํšŒ์‚ฌ ์ •๋ณด ๋ชฉ๋ก ๋ฐ”๋กœ๊ฐ€๊ธฐ</a>
</div>
.nav-skip a {
    position: absolute;
    top: -200px;
    left: 0;
    width: 160px;
    border: 1px solid #fff;
    color: #fff;
    background: #333;
    text-align: center;
}
.nav-skip a:active, .nav-skip a:focus {
    top: 0;
}



2. CSS animation

์œ„์˜ Jungle Cinema ๊ตฌํ˜„์„ ๋งˆ์นœ ๋’ค์—๋Š” svg ํŒŒ์ผ์˜ ์†์„ฑ์— ๋Œ€ํ•ด์„œ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐฐ์šฐ๊ณ , ์‹ค์ œ svg ํŒŒ์ผ์„ html๋กœ ์—ด์–ด์„œ ์†์„ฑ๋“ค์„ ๋ฐ”๊ฟ”์„œ ์ƒ‰์น ๋„ ํ•ด๋ณด๊ณ  ๊ฐ„๋‹จํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜๋„ ์ฃผ๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์กŒ๋‹ค. ๋‚˜๋Š” ์นœ๊ตฌ์˜ ๊ทธ๋ฆผ ๊ณ„์ •์„ ๋’ค์ ธ์„œ ๋ถˆํŽŒ ์•„๋‹ˆ์—์š” ํ—ˆ๋ฝ ๋งก์•˜์–ด์š” ๊ท€์—ฌ์šด ๊ฐ•์•„์ฅ์˜ ์ƒ‰์„ ๋ฐ”๊พธ๊ณ  ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ด์šฉํ•ด์„œ ์ด๋ˆ„์•ผ์ƒค ์—”๋”ฉ ์งค์„ ๋งŒ๋“ค์–ด๋ณด์•˜๋‹ค. png๋ฅผ ๋ณ€ํ™˜ํ•œ๊ฑฐ๋ผ ์ƒ‰์„ ๋” ์ž…ํž ์ˆ˜ ์—†๋Š”๊ฒŒ ์•„์‰ฌ์› ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‚˜์„œ๋Š” transtion, transform, animation์„ ๊ณต๋ถ€ํ–ˆ๋Š”๋ฐ, #6-2 ์— ๊ฐœ๋…์„ ์ •๋ฆฌํ•ด ๋‘์—ˆ๋‹ค. ์‚ฌ์‹ค ํ•ด๋‹น ์†์„ฑ๋“ค์€ ์ต์ˆ™ํ•˜์ง€ ์•Š์„ ๋ฟ ๊ทธ๋ ‡๊ฒŒ ์–ด๋ ต์ง„ ์•Š์•˜๋‹ค.

๋Š” fake... ๋งˆ์ง€๋ง‰์— ๋‚ด์ฃผ์‹  perspective + transition ์‹ค์Šต์„ ๋ณด์™„ํ•˜๋Š” 061.html ์นด๋“œ ๋’ค์ง‘๊ธฐ๊ฐ€ ์••๋„์ ์œผ๋กœ ์‹œ๊ฐ„์„ ์žก์•„๋จน์—ˆ๋‹ค. ๋Œ๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์„ ์™„์ „ํžˆ ํ˜ผ์ž์„œ ์ƒ๊ฐํ•  ์ˆ˜๋Š” ์—†์—ˆ์ง€๋งŒ, ๊ฒ€์ƒ‰ํ•ด๋ณด๊ณ  ๋‚˜์˜จ ์ฝ”๋“œ๊ฐ€ ์ดํ•ด๋Š” ๊ฐ€๊ณ  ๊ทธ๋Œ€๋กœ ์ ์—ˆ๋Š”๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜์€ ๋‚ด ์˜ˆ์ƒ๋Œ€๋กœ ์›€์ง์ด์งˆ ์•Š์•˜๋‹ค. ์•Œ๊ณ ๋ณด๋‹ˆ ์˜ˆ์ œ ์ฝ”๋“œ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ณ ์น˜๋Š๋ผ ์›๋ž˜ transition์„ ์ค˜์•ผํ•˜๋Š” ํƒœ๊ทธ๋ณด๋‹ค ํ•œ๋‹จ๊ณ„ ์œ„์— transition์„ ์ค˜์„œ ๊ทธ๋Ÿฐ๊ฑฐ์˜€๋‹ค... ์ด๋Ÿด๋•Œ๊ฐ€ ๊ฐ€์žฅ ํ—ˆ๋ฌดํ•˜๋‹ค...




3. ์˜๋ฌธ์  & ๋Š๋‚€์ 

Q. ์•„์ด์ฝ˜์˜ background-image ์™€ width, height ๋ฅผ ์ฃผ๋ฉด ์ด๋ฏธ์ง€ ํฌ๊ธฐ๊ฐ€ ๊ทธ๊ฑฐ๋ณด๋‹ค ํด ๋•Œ, ๋ฐฐ๊ฒฝ ๋ถ€๋ถ„์ด ๋‚˜์™€์„œ ๊ณค๋ž€ํ•ด์„œ ์ด๋ฏธ์ง€ ํฌ๊ธฐ ์ค„์—ฌ์ฃผ๋Š” ์‚ฌ์ดํŠธ์—์„œ ์ค„์—ฌ์™€์„œ ๋„ฃ์—ˆ๋Š”๋ฐ, ์ด๋ ‡๊ฒŒ ๋„ฃ์–ด๋„ ๋˜๋Š”๊ฐ€?

A. ๊ฐ€๋Šฅ์€ ํ•˜์ง€๋งŒ ์ฐพ์•„๋ณด๋‹ˆ background-size ๋ผ๋Š” ์†์„ฑ์ด ์žˆ์—ˆ๋‹ค.... back-ground-size: 10px 10px;

  • html, css๋ฅผ ์งค ๋•Œ ์ง€ํ‚ค๋ฉด ์ข‹์€ ์—ฌ๋Ÿฌ๊ฐ€์ง€ ๊ทœ์น™๋“ค์ด ์žˆ๊ณ , ํŠนํžˆ ์ง€๊ธˆ๊นŒ์ง€ ์˜ˆ์ œ๋“ค์€ ์›น ์ ‘๊ทผ์„ฑ๋„ ๋”ฐ์ง€์ง€ ์•Š๊ณ  class๋„ ๊ฑฐ์˜ ์•ˆ์“ฐ๊ณ  ์งฐ์—ˆ๋Š”๋ฐ ์ˆ˜์—… ๋๋‚˜๊ณ  ์‹œ๊ฐ„ ๋‚ด์„œ ๊ณ ์น˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ€์ ธ์•ผ๊ฒ ๋‹ค.
  • dl, dt, dd ์†์„ฑ์„ ๋งŽ์ด ์ด์šฉํ•˜๋Š”๊ฒŒ ๋†€๋ผ์› ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ๊ทธ๋ƒฅ ๋‹ค pํƒœ๊ทธ์— class๋กœ small-title ์ด๋ ‡๊ฒŒ ์คฌ๋‹ค.
  • transform ๋งˆ์ง€๋ง‰ ๋ถ€๋ถ„์— DOM tree ์ฝ์–ด์„œ html ๊ตฌ์กฐ ์žก๋Š” ๊ณผ์ • ์ด๊ฑฐ ํ•™๊ต ์ •๊ทœ์ˆ˜์—…์ด์—ˆ์œผ๋ฉด ์‹œํ—˜ ๋ฌธ์ œ๋กœ ๋ฐฑํผ ๋‚˜์™”๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ ์—ญ์‹œ๋‚˜... ๊ธฐ์ˆ  ๋ฉด์ ‘ ํ•„์ˆ˜ ์งˆ๋ฌธ์ด๋ผ๊ณ .... javascript ์“ฐ๋ ค๋ฉด DOM tree์— ๋Œ€ํ•ด ์ž˜ ์•Œ์•„์•ผ๋œ๋‹ค๊ณ  ํ•œ๋‹ค. ์ด ๋ถ€๋ถ„๋„ ๊ฐ•์˜ ์ž๋ฃŒ๋ฅผ ๋ณด๊ณ  ๋” ์ฐพ์•„๋ณด๋ฉด์„œ ๊ณต๋ถ€ํ•ด์•ผ๊ฒ ๋‹ค.

+) ์ฝ”๋”ฉํ•  ๋•Œ ๋„์›€๋˜๋Š” chrome extensions

color zilla - ์ƒ‰์„ ์•Œ ์ˆ˜ ์žˆ์Œ.
heading map - ๋ธŒ๋ผ์šฐ์ €์˜ heading ๊ตฌ์กฐ
OpenWax - ์›น ์ ‘๊ทผ์„ฑ์„ ๊ณ„์‚ฐํ•ด์คŒ
whatFont - ํฐํŠธ๋ฅผ ์•Œ ์ˆ˜ ์žˆ์Œ.
Page Ruler Redux - margin ๊ฐ’ ๊ฐ™์€ ๊ฒƒ์„ px ๋‹จ์œ„๋กœ ์•Œ ์ˆ˜ ์žˆ์Œ.

https://placeholder.com - ๋งํฌ ๋’ค์— ์‚ฌ์ด์ฆˆ๋ฅผ ๋„ฃ์œผ๋ฉด ํฌ๊ธฐ์— ๋งž๋Š” ์ด๋ฏธ์ง€ ๋ถˆ๋Ÿฌ์™€์คŒ

https://via.placeholder.com/300

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