skin
์ถœ์ฒ˜ : https://github.com/twitter/twemoji 12twemoji.parse(document.body); html์— ์ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋„ฃ๋Š”๋‹ค (์–ด๋”” ๋„ฃ์„์ง€ ๋ชจ๋ฅด๊ฒ ์œผ๋ฉด ๋ฐ”๋กœ ์œ„์— ๋„ฃ์œผ๋ฉด ๋จ) 1img.emoji { width: 12px; vertical-align: top; padding: 3px 0; } css์— ์ด ์ฝ”๋“œ ๋„ฃ์œผ๋ฉด ๋! (12px๋Š” ์ œ ์Šคํ‚จ ๊ธฐ์ค€์ด๊ณ  ์ ์šฉ ์ค‘์ธ ์Šคํ‚จ์˜ ํฐํŠธ ํฌ๊ธฐ๋ž‘ ๋˜‘๊ฐ™์ด ์ ์šฉํ•˜๋Š” ๊ฒŒ ์˜ˆ์จ) ์ž‘๋…„์— ํ‹”ํ„ฐ ์Šคํ‚จ ๋ฆฌ๋…ˆํ•˜๋‹ค๊ฐ€ ์ฐพ์€ ๊ฑด๋ฐ........ ํ‹”ํ„ฐ ์Šคํ‚จ์€ ์•„์ง๋„..............................................ใ… 
์œ ํŠœ๋ธŒ ์˜์ƒ ์ „์ฒด ํ™”๋ฉด ์•ˆ ๋˜๋Š” ๊ฑฐ, ๊ธ€ ์ˆ˜์ •๊ณผ ์ฒจ๋ถ€ ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œํ•  ๋•Œ ์•ˆ์ „ํ•˜์ง€ ์•Š์€ ์ฝ˜ํ…์ธ ๋ผ๊ณ  ๋œจ๋Š” ๊ฑฐ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค.. css์—์„œhtml {-webkit-text-size-adjust: 100%;}์ด๊ฑฐ ์ง€์›Œ์ฃผ์„ธ์š” ์•„์ดํฐ ํฐํŠธ ํฌ๊ธฐ ์ž๋™ ์กฐ์ ˆ๋˜๋Š” ๊ฑฐ ๋ฐฉ์ง€ํ•œ๋‹ค๊ธธ๋ž˜ ๋„ฃ์€ ๊ฑด๋ฐ ์ด๊ฑฐ ๋•Œ๋ฌธ์ด์—ˆ์Šต๋‹ˆ๋‹ค..........
์ปค๋ฒ„์™€ ์˜ต์…˜์„ ์ถ”๊ฐ€ํ–ˆ์Œ ์ˆ˜์ •์„ ๋งŽ์ด ํ•ด์„œ ๋ช‡ ๋ฒ„์ „์ธ์ง€...... ํฌ๋กฌ ์ตœ์ ํ™”๋ฐ˜์‘ํ˜• - ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€- ์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”- ์ˆ˜์ •O ์žฌ๋ฐฐํฌ,๊ณต์œ  X ๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธฐ๋ณธ ์„ค์ • - ๊ธ€ ๋ชฉ๋ก ๊ธ€ ์ˆ˜ 3์˜ ๋ฐฐ์ˆ˜(3, 6, 9 ๋“ฑ)์ฝ˜ํ…์ธ  - ์„ค์ • - ๊ฐ€๋กœํญ 368px ํฌ์ธํŠธ ์ปฌ๋Ÿฌ- โ— #8EA6B4 ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ- ๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ- http://troy.labs.daum.net/ ๋””์ž์ธ ์ฐธ๊ณ - https://codepen.io/mandycodestoo/pen/gBPoPe(์ด๊ฑฐ ๋ณด๊ณ  ๊ตฌ์ƒ์„ ํ•˜๊ธด ํ–ˆ๋Š”๋ฐ ๋„ˆ๋ฌด ๋‹ฌ๋ผ์ง„....^^;) ์ปค๋ฒ„, ์˜ต์…˜์ปค๋ฒ„๋ฅผ..
๋ฐ˜์‘ํ˜• ํฌ๋กฌ ์ตœ์ ํ™” - ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€ - ์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š” - ์ˆ˜์ •O ์žฌ๋ฐฐํฌ, ๊ณต์œ  X - ๊ฐค๋Ÿฌ๋ฆฌํ˜• ์นดํ…Œ๊ณ ๋ฆฌ์— ์‚ฌ์ง„ ์—†๋Š” ๊ธ€ X ๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ ๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธฐ๋ณธ ์„ค์ • - ๋Œ“๊ธ€ ํŽผ์นจ O ๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธฐ๋ณธ ์„ค์ • - ๊ธ€ ๋ชฉ๋ก ๊ธ€ ์ˆ˜ 9๊ฐœ ์ฝ˜ํ…์ธ  - ์„ค์ • - ๊ฐ€๋กœํญ 370px ํฌ์ธํŠธ ์ปฌ๋Ÿฌ - โ— #8EA6B4 ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ - ๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ - http://troy.labs.daum.net/ ๋Œ“๊ธ€ ์–‘์‹ - ์„ฑ์˜ ๊ธ€: (์žฅ๋ฌธ์˜ ํŽธ์ง€๋ฅผ ์›ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค ๊ณ ๋ง™๋‹ค๋Š” ์ธ์‚ฌ์กฐ์ฐจ ์•ˆ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.) ๋ฉ”์ผ ์ฃผ์†ŒX ์–‘์‹ ์ง€ํ‚ค์ง€ ์•Š..
(์ž๊ธฐ๋ณต์ œ๋Š” ๋‚˜์˜ ํž˜....^^7) ๋ฐ˜์‘ํ˜• ํฌ๋กฌ ์ตœ์ ํ™” - ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€ - ์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š” - ์ˆ˜์ •O ์žฌ๋ฐฐํฌ, ๊ณต์œ  X - ๊ฐค๋Ÿฌ๋ฆฌํ˜• ์นดํ…Œ๊ณ ๋ฆฌ์— ์‚ฌ์ง„ ์—†๋Š” ๊ธ€ X ๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ ๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํฌ์ธํŠธ ์ปฌ๋Ÿฌ - โ— #8EA6B4 ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ - ๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ - http://troy.labs.daum.net/ ๋Œ“๊ธ€ ์–‘์‹ - ์„ฑ์˜ ๊ธ€: (์žฅ๋ฌธ์˜ ํŽธ์ง€๋ฅผ ์›ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค ๊ณ ๋ง™๋‹ค๋Š” ์ธ์‚ฌ์กฐ์ฐจ ์•ˆ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.) ๋ฉ”์ผ ์ฃผ์†ŒX ์›นํฐํŠธ ์‚ฌ์ดํŠธ - http://xpressengine.github.io/XEIcon/library-2.3.3.html (2.3.3,..
์ด๊ฒƒ ๋ณด์„ธ์š”,, ๊ด€๋ฆฌ์ž ํ™”๋ฉด์ธ๋ฐ ๋„ˆ๋ฌด ๊ท€์—ฝ์ฃ ,,, ๋‹ค์Œ ์นดํŽ˜ ์–ดํ”Œ์„ ๋ชจํ‹ฐ๋ธŒ๋กœ ๋งŒ๋“  ์Šคํ‚จ์ž…๋‹ˆ๋‹ค. ๋ฐ˜์‘ํ˜• ํฌ๋กฌ ์ตœ์ ํ™” - ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€ - ์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š” - ์ˆ˜์ •O ์žฌ๋ฐฐํฌ, ๊ณต์œ  X - ๊ฐค๋Ÿฌ๋ฆฌํ˜• ์นดํ…Œ๊ณ ๋ฆฌ์— ์‚ฌ์ง„ ์—†๋Š” ๊ธ€ X ๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ ๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ํฌ์ธํŠธ ์ปฌ๋Ÿฌ - โ— #8EA6B4 ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ - ๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ - http://troy.labs.daum.net/ ๋Œ“๊ธ€ ์–‘์‹ - ์„ฑ์˜ ๊ธ€: (์žฅ๋ฌธ์˜ ํŽธ์ง€๋ฅผ ์›ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค ๊ณ ๋ง™๋‹ค๋Š” ์ธ์‚ฌ์กฐ์ฐจ ์•ˆ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.) ๋ฉ”์ผ ์ฃผ์†ŒX ์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์€ ๊ณณ ์šฐํด๋ฆญ - ๊ฒ€์‚ฌ ๋ˆ„๋ฅด๋ฉด html css ๋‹ค ๋œน๋‹ˆ๋‹ค ์งˆ๋ฌธ..



์ถœ์ฒ˜ : https://github.com/twitter/twemoji






1
2
<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js"></script>
<script>twemoji.parse(document.body);</script>

html์— ์ด ์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋„ฃ๋Š”๋‹ค (์–ด๋”” ๋„ฃ์„์ง€ ๋ชจ๋ฅด๊ฒ ์œผ๋ฉด </s_t3> ๋ฐ”๋กœ ์œ„์— ๋„ฃ์œผ๋ฉด ๋จ)


1
img.emoji { width: 12px; vertical-align: top; padding: 3px 0; }

css์— ์ด ์ฝ”๋“œ ๋„ฃ์œผ๋ฉด ๋!

(12px๋Š” ์ œ ์Šคํ‚จ ๊ธฐ์ค€์ด๊ณ  ์ ์šฉ ์ค‘์ธ ์Šคํ‚จ์˜ ํฐํŠธ ํฌ๊ธฐ๋ž‘ ๋˜‘๊ฐ™์ด ์ ์šฉํ•˜๋Š” ๊ฒŒ ์˜ˆ์จ)








์ž‘๋…„์— ํ‹”ํ„ฐ ์Šคํ‚จ ๋ฆฌ๋…ˆํ•˜๋‹ค๊ฐ€ ์ฐพ์€ ๊ฑด๋ฐ........ ํ‹”ํ„ฐ ์Šคํ‚จ์€ ์•„์ง๋„..............................................ใ… 

์œ ํŠœ๋ธŒ ์˜์ƒ ์ „์ฒด ํ™”๋ฉด ์•ˆ ๋˜๋Š” ๊ฑฐ, ๊ธ€ ์ˆ˜์ •๊ณผ ์ฒจ๋ถ€ ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œํ•  ๋•Œ ์•ˆ์ „ํ•˜์ง€ ์•Š์€ ์ฝ˜ํ…์ธ ๋ผ๊ณ  ๋œจ๋Š” ๊ฑฐ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค..



css์—์„œ

html {-webkit-text-size-adjust: 100%;}

์ด๊ฑฐ ์ง€์›Œ์ฃผ์„ธ์š”



์•„์ดํฐ ํฐํŠธ ํฌ๊ธฐ ์ž๋™ ์กฐ์ ˆ๋˜๋Š” ๊ฑฐ ๋ฐฉ์ง€ํ•œ๋‹ค๊ธธ๋ž˜ ๋„ฃ์€ ๊ฑด๋ฐ ์ด๊ฑฐ ๋•Œ๋ฌธ์ด์—ˆ์Šต๋‹ˆ๋‹ค..........


์ปค๋ฒ„์™€ ์˜ต์…˜์„ ์ถ”๊ฐ€ํ–ˆ์Œ ์ˆ˜์ •์„ ๋งŽ์ด ํ•ด์„œ ๋ช‡ ๋ฒ„์ „์ธ์ง€......





ํฌ๋กฌ ์ตœ์ ํ™”

๋ฐ˜์‘ํ˜•




- ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€

- ์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”

- ์ˆ˜์ •O ์žฌ๋ฐฐํฌ,๊ณต์œ  X


๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ

๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธฐ๋ณธ ์„ค์ • - ๊ธ€ ๋ชฉ๋ก ๊ธ€ ์ˆ˜ 3์˜ ๋ฐฐ์ˆ˜(3, 6, 9 ๋“ฑ)

์ฝ˜ํ…์ธ  - ์„ค์ • - ๊ฐ€๋กœํญ 368px






ํฌ์ธํŠธ ์ปฌ๋Ÿฌ

- โ— #8EA6B4


ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ


๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ

http://troy.labs.daum.net/


๋””์ž์ธ ์ฐธ๊ณ 

- https://codepen.io/mandycodestoo/pen/gBPoPe

(์ด๊ฑฐ ๋ณด๊ณ  ๊ตฌ์ƒ์„ ํ•˜๊ธด ํ–ˆ๋Š”๋ฐ ๋„ˆ๋ฌด ๋‹ฌ๋ผ์ง„....^^;)








์ปค๋ฒ„, ์˜ต์…˜

์ปค๋ฒ„๋ฅผ ์‚ฌ์šฉํ•  ๊ฑฐ๋ฉด ํ™ˆ ํ™”๋ฉด ๊พธ๋ฏธ๊ธฐ์—์„œ ์ปค๋ฒ„๋ฅผ ์ผœ์ฃผ์…”์•ผ ๋ผ์š” ํŠธ์œ„ํ„ฐ ์œ„์ ฏ์€ ์ปค๋ฒ„ ์•ˆ ์ผœ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค (์˜ต์…˜์œผ๋กœ ๋„ฃ์—ˆ์Œ)



-์ปค๋ฒ„

1. ์Šฌ๋ผ์ด๋”

์Šฌ๋ผ์ด๋” - ์ˆ˜์ • ๋ˆ„๋ฅธ ํ›„ ์ž…๋ ฅํ•œ ๊ธ€ ๋ชฉ๋ก - ์ƒˆ ๊ธ€ ์ถ”๊ฐ€ ๋ˆ„๋ฅด๋ฉด ์ด๋ ‡๊ฒŒ ๋œจ๋Š”๋ฐ ๊ทธ๋ƒฅ ์Šฌ๋ผ์ด๋”์— ๋„ฃ๊ณ  ์‹ถ์€ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค ์ƒˆ ๊ธ€์„ ์—ฌ๋Ÿฌ๊ฐœ ์ถ”๊ฐ€ํ•˜๋ฉด ์‚ฌ์ง„์ด ์—ฌ๋Ÿฌ๊ฐœ ๋œจ๋Š” ๊ฑฐ์˜ˆ์š”,, ์ฐธ ์‰ฝ์ฃ ,,? ๊ทธ๋ƒฅ ์‚ฌ์ง„๋งŒ ์—…๋กœ๋“œํ•˜๋ฉด ์Šฌ๋ผ์ด๋” ๋จ



2. ๊ณต์ง€

๊ณต์ง€์‚ฌํ•ญ - ์ˆ˜์ • ๋ˆ„๋ฅธ ํ›„ ์ž…๋ ฅํ•œ ๊ธ€ ๋ชฉ๋ก - ์ƒˆ ๊ธ€ ์ถ”๊ฐ€ ๋ˆ„๋ฅด๋ฉด ์ด๋ ‡๊ฒŒ ๋œจ๋Š”๋ฐ ๋‚ด์šฉ ๋ถ€๋ถ„์— ์ž…๋ ฅํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค


์ด๋ ‡๊ฒŒ ๋‚ด์šฉ์ด ๋‚˜์˜ต๋‹ˆ๋‹ค. html๋„ ์ ์šฉ๋ผ์š” ์ฝ”๋”ฉํ•˜๋“ฏ์ด ํ•ด๋„ ์ •์ƒ์ ์œผ๋กœ ์ ์šฉ์ด ๋ฉ๋‹ˆ๋‹น

sns๋Š” ์˜ต์…˜์—์„œ ์ž…๋ ฅํ•ด์•ผ ๋ผ์š” ์ž…๋ ฅ ์•ˆ ํ•˜๋ฉด ์•ˆ ๋œน๋‹ˆ๋‹ค



3. ๊ฐค๋Ÿฌ๋ฆฌ

๊ฐค๋Ÿฌ๋ฆฌ - ์ˆ˜์ • ๋ˆ„๋ฅด๋ฉด ์ด๋ ‡๊ฒŒ ๋œจ๋Š”๋ฐ ์นดํ…Œ๊ณ ๋ฆฌ ์ € ๋ถ€๋ถ„๋งŒ ์›ํ•˜๋Š” ์นดํ…Œ๊ณ ๋ฆฌ๋กœ ์ˆ˜์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ „์ฒด ๊ธ€์„ ์›ํ•˜๋ฉด ๊ทธ๋ƒฅ ๋‘ฌ๋„ ๋ผ์š” ๊ทผ๋ฐ ๊ธ€ ์ˆ˜๋Š” ๋น„์œจ์„ 4๊ฐœ์— ๋งž๊ฒŒ ํ•ด๋†จ๊ธฐ ๋•Œ๋ฌธ์— 4๊ฐœ ์ด์ƒ์œผ๋กœ ์„ค์ •ํ•˜๋ฉด ์ด์ƒํ•  ๊ฑฐ์˜ˆ์š”


๊ฐค๋Ÿฌ๋ฆฌ๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ๋„ฃ๊ณ  ์‹ถ์œผ๋ฉด ์ปค๋ฒ„ ์•„์ดํ…œ ์ถ”๊ฐ€ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค 


์ปค๋ฒ„ ์•„์ดํ…œ ์ˆ˜์ •ํ•˜๊ณ  ์ €์žฅ ๋ฒ„ํŠผ ํ•œ ๋ฒˆ๋งŒ ๋ˆ„๋ฅด๋ฉด ์ €์žฅ์ด ์•ˆ ๋ผ์š” ์ €์žฅ ๋ฒ„ํŠผ ๋ฐฐ๊ฒฝ์ด ์ฃผํ™ฉ์ƒ‰์ด๋ฉด ์ €์žฅ์ด ์•ˆ ๋๋‹ค๋Š” ๋œป์ด๋‹ˆ ํ•œ ๋ฒˆ ๋” ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”




-์˜ต์…˜

์˜ต์…˜ ๋ญ๊ฐ€ ๋งŽ์ง€๋งŒ ์–ด๋ ต์ง€ ์•Š์•„์š”,,


1. ์ปค๋ฒ„ ์‚ฌ์šฉ ์—ฌ๋ถ€

๋ง ๊ทธ๋Œ€๋กœ ์ปค๋ฒ„ ์‚ฌ์šฉ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฑฐ์˜ˆ์š”. ์ปค๋ฒ„ ์‚ฌ์šฉํ•  ๋•Œ๋งŒ ์ผœ์ฃผ์‹œ๋ฉด ๋ผ์š”. ๊ผญ ์‚ฌ์šฉํ•  ๋•Œ๋งŒ ์ผœ์ฃผ์…”์•ผ ๋ผ์š”


์ปค๋ฒ„ ์‚ฌ์šฉ ์•ˆ ํ•˜๋Š” ๊ธฐ์ค€

๊ป์„ ๋•Œ

์ผฐ์„ ๋•Œ


์ด๋ ‡๊ฒŒ ์ ์šฉ์ด ๋˜๋‹ˆ๊นŒ ๊ผญ ํ™•์ธํ•ด์ฃผ์„ธ์š”



2. ๊ณต์ง€ ๋‹‰๋„ค์ž„ ํ‘œ์‹œ ์—ฌ๋ถ€

์ผฐ์„ ๋•Œ

๊ป์„ ๋•Œ


๋‹‰๋„ค์ž„์€ ๋ฐ”๊พธ๋ ค๋ฉด ๊ธฐ๋ณธ ์ •๋ณด์—์„œ ๋ฐ”๊พธ์‹œ๋ฉด ๋ผ์š”



3. ์Šคํ† ๋ฆฌ ๊ธฐ๋Šฅ ์‚ฌ์šฉ ์—ฌ๋ถ€

์‚ฌ์ด๋“œ๋ฐ” ํ”„๋กœํ•„ ์‚ฌ์ง„์„ ๋ˆ„๋ฅด๋ฉด ์ธ์Šคํƒ€๊ทธ๋žจ ์Šคํ† ๋ฆฌ๋ž‘ ๋น„์Šทํ•œ ํŒ์—…์ฐฝ์ด ๋œจ๋Š”๋ฐ ๊ทธ ๊ธฐ๋Šฅ ์‚ฌ์šฉ ์—ฌ๋ถ€๋ฅผ ํ™•์ธํ•˜๋Š” ๊ฑฐ์˜ˆ์š” ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๋•Œ ๋„๋ฉด ๋œจ์ง€ ์•Š์Šต๋‹ˆ๋‹ค.



4. ํŠธ์œ„ํ„ฐ ์œ„์ ฏ ์‚ฌ์šฉ ์—ฌ๋ถ€

ํŠธ์œ„ํ„ฐ ์œ„์ ฏ ์‚ฌ์šฉํ•  ๊ฑฐ๋ฉด ์ผœ์ฃผ์‹œ๋ฉด ๋˜๊ณ  ์•„๋‹ˆ๋ฉด ๊บผ์ฃผ์„ธ์š” ์ˆ˜์ • ํŒ์— ์ ํ˜€์žˆ๋“ฏ์ด ๊ธฐ๋ณธ์€ ๊ธฐ์ƒ์ฒญ ๊ณ„์ •์ธ๋ฐ ๋ณธ์ธ ๊ณ„์ •์œผ๋กœ ํ•˜๋ ค๋ฉด ์˜ต์…˜์— ํŠธ์œ„ํ„ฐ ์•„์ด๋””๋ฅผ ์ž…๋ ฅํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค(@ ์ œ์™ธ)



5. ํŠธ์œ„ํ„ฐ ์•„์ด๋”” ~ ๋ฉ”์ผ

์ด ๋ถ€๋ถ„์€ ์ž…๋ ฅํ•˜๋ฉด ์ปค๋ฒ„ ๊ณต์ง€์‚ฌํ•ญ์— ๋œน๋‹ˆ๋‹ค ํŠธ์œ„ํ„ฐ ์ œ์™ธ ๊ณต์ง€์‚ฌํ•ญ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ์ž…๋ ฅํ•˜์ง€ ์•Š์•„๋„ ๋ผ์š”



6. ์Šคํ† ๋ฆฌ ๋‹‰๋„ค์ž„

์ž…๋ ฅ์„ ํ•˜๋ฉด ์ € ๋นจ๊ฐ„ ๋ฐ•์Šค ๋ถ€๋ถ„์— ์ ์šฉ์ด ๋ฉ๋‹ˆ๋‹ค.

์›ํ•˜๋Š” ๋‹‰๋„ค์ž„์„ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”.



7. ์Šคํ† ๋ฆฌ ์‹œ๊ฐ„, ์Šฌ๋ผ์ด๋” ์‹œ๊ฐ„

์Šคํ† ๋ฆฌ ์‹œ๊ฐ„ : ์˜ˆ๋ฅผ ๋“ค์–ด 7์„ ์ž…๋ ฅํ•˜๋ฉด ์Šคํ† ๋ฆฌ ํŒ์—…์ฐฝ์ด 7์ดˆ ํ›„์— ๋‹ซํ˜€์š”.


์Šฌ๋ผ์ด๋” ์‹œ๊ฐ„ : ์˜ˆ๋ฅผ ๋“ค์–ด 7์„ ์ž…๋ ฅํ•˜๋ฉด ์‚ฌ์ง„์ด 7์ดˆ ํ›„์— ๋‹ค๋ฅธ ์‚ฌ์ง„์œผ๋กœ ๋„˜์–ด๊ฐ‘๋‹ˆ๋‹ค.


7์ดˆ ์ด๋ ‡๊ฒŒ ์ž…๋ ฅํ•˜์‹œ๋ฉด ์ ˆ๋Œ€ ์•ˆ ๋˜๊ณ  ๊ทธ๋ƒฅ ์ˆซ์ž๋งŒ ์ž…๋ ฅํ•ด์ฃผ์„ธ์š”. ์ดˆ ๋‹จ์œ„๋‹ˆ๊นŒ 1๋ถ„ โ†’ 60 ์ด๋ ‡๊ฒŒ ์ž…๋ ฅํ•ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.



8. ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

์‚ฌ์ด๋“œ๋ฐ”, ์Šคํ† ๋ฆฌ ์† ํ”„๋กœํ•„ ์‚ฌ์ง„์— ์ ์šฉ์ด ๋ฉ๋‹ˆ๋‹ค ์ด์ œ ๋ฒˆ๊ฑฐ๋กญ๊ฒŒ html ์ˆ˜์ • ์•ˆ ํ•˜์…”๋„ ๋ฉ๋‹ˆ๋‹ค..........!


๋ฐ˜๋“œ์‹œ ์ •์‚ฌ๊ฐํ˜•์˜ ์‚ฌ์ง„์„ ์—…๋กœ๋“œํ•ด์ฃผ์„ธ์š”!



9. ์Šคํ† ๋ฆฌ ์ด๋ฏธ์ง€

์—…๋กœ๋“œํ•˜๋ฉด ์ด๋ ‡๊ฒŒ ์‚ฌ์ง„์ด ๋œน๋‹ˆ๋‹ค. ๋น„์œจ์€ ์ˆ˜์ • ํŒ์— ์ ์–ด๋’€์–ด์š”



10. ๊ฐค๋Ÿฌ๋ฆฌํ˜• ๊ธฐ๋ณธ ์ด๋ฏธ์ง€

๋…ธ์ด๋ฏธ์ง€๋ผ๊ณ  ์ƒ๊ฐํ•˜์‹œ๋ฉด ๋ผ์š”. ์—…๋กœ๋“œํ•˜์ง€ ์•Š์œผ๋ฉด images ํด๋” ์† noimg ํŒŒ์ผ์ด ๋œน๋‹ˆ๋‹ค. ๊ทธ ํŒŒ์ผ์„ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์œผ์‹œ๋ฉด ๊ตณ์ด ์—…๋กœ๋“œ x




๊ธฐ์กด 19์Šคํ‚จ๋ณด๋‹ค ์ˆ˜์ •ํ•˜๊ธฐ ์‰ฝ๊ฒŒ ์˜ต์…˜์„ ๋„ฃ์—ˆ์–ด์š” ์ „์ฒด์ ์œผ๋กœ ์Šคํ‚จ์„ ๊ฐˆ์•„์—Ž์ง€ ์•Š๋Š” ์ด์ƒ ์˜ต์…˜๋งŒ ์ž˜ ํ™œ์šฉํ•˜๋ฉด ์ˆ˜์›”ํ•˜๊ฒŒ ์ˆ˜์ •ํ•  ์ˆ˜ ์žˆ๋‹ต๋‹ˆ๋‹ค....,, ๋‹ค์Œ ์Šคํ‚จ์€ ํฌ์ธํŠธ ์ปฌ๋Ÿฌ๋„ ์˜ต์…˜์œผ๋กœ ๋„ฃ๋„๋ก,,,,






์†Œ์†Œํ•œ ์ˆ˜์ • ํŒ



์Šคํ† ๋ฆฌ ๊ธฐ๋Šฅ์€ ๊ทธ๋ƒฅ ์‹œ๊ฐ„์ œํ•œ ์žˆ๋Š” ํŒ์—…์ฐฝ์ž…๋‹ˆ๋‹ค..(์ˆ˜๋™) ์ง„์งœ ์ธ์Šคํƒ€ ์Šคํ† ๋ฆฌ๋ž‘ ๋งŽ์ด ๋‹ฌ๋ผ์š”



์›ฌ๋งŒํ•œ ๊ฑฐ ์˜ต์…˜์œผ๋กœ ๋„ฃ์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ˆ˜์ •ํ•˜๊ธฐ ์‰ฌ์šธ ๊ฑฐ์˜ˆ์š”

์ปฌ๋Ÿฌ๋„ css ์ƒ๋‹จ์— ๋ชจ์•„๋’€์œผ๋‹ˆ ๊ทธ๊ฑฐ ์ˆ˜์ •ํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹น


๊ฒ€์ƒ‰ํ•˜๋ฉด ๋‚˜์˜ค๋Š” ๊ฐ„๋‹จํ•œ ์งˆ๋ฌธ์€ ๋‹ต๋ณ€ํ•˜์ง€ ์•Š๊ฒ ์Šต๋‹ˆ๋‹ค ์˜ค๋ฅ˜๋Š”.... ํ•ด๊ฒฐ ๊ฐ€๋Šฅํ•œ ๊ฒƒ๋งŒ.............. ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ์–ด์š”... (์•ผ๋งค์ž„)


๋ฐ˜์‘ํ˜•

ํฌ๋กฌ ์ตœ์ ํ™”



- ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€

์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”

- ์ˆ˜์ •O ์žฌ๋ฐฐํฌ, ๊ณต์œ  X

- ๊ฐค๋Ÿฌ๋ฆฌํ˜• ์นดํ…Œ๊ณ ๋ฆฌ์— ์‚ฌ์ง„ ์—†๋Š” ๊ธ€ X


๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ

๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธฐ๋ณธ ์„ค์ • - ๋Œ“๊ธ€ ํŽผ์นจ O

๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธฐ๋ณธ ์„ค์ • - ๊ธ€ ๋ชฉ๋ก ๊ธ€ ์ˆ˜ 9๊ฐœ

์ฝ˜ํ…์ธ  - ์„ค์ • - ๊ฐ€๋กœํญ 370px


ํฌ์ธํŠธ ์ปฌ๋Ÿฌ

- โ— #8EA6B4


ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ

-


๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ

http://troy.labs.daum.net/




๋Œ“๊ธ€ ์–‘์‹

- ์„ฑ์˜ ๊ธ€:

 (์žฅ๋ฌธ์˜ ํŽธ์ง€๋ฅผ ์›ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค ๊ณ ๋ง™๋‹ค๋Š” ์ธ์‚ฌ์กฐ์ฐจ ์•ˆ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.)

๋ฉ”์ผ ์ฃผ์†ŒX


์–‘์‹ ์ง€ํ‚ค์ง€ ์•Š์€ ๋Œ“๊ธ€์€ ์‚ญ์ œํ•ฉ๋‹ˆ๋‹ค.




์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์€ ๊ณณ ์šฐํด๋ฆญ - ๊ฒ€์‚ฌ ๋ˆ„๋ฅด๋ฉด

html css ๋‹ค ๋œน๋‹ˆ๋‹ค



์งˆ๋ฌธ์€ ์—ฌ๊ธฐ์„œ ํ•ด์ฃผ์„ธ์š”

http://shore24.tistory.com/764

(์ž๊ธฐ๋ณต์ œ๋Š” ๋‚˜์˜ ํž˜....^^7)


๋ฐ˜์‘ํ˜•

ํฌ๋กฌ ์ตœ์ ํ™”



- ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€

์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”

- ์ˆ˜์ •O ์žฌ๋ฐฐํฌ, ๊ณต์œ  X

- ๊ฐค๋Ÿฌ๋ฆฌํ˜• ์นดํ…Œ๊ณ ๋ฆฌ์— ์‚ฌ์ง„ ์—†๋Š” ๊ธ€ X


๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ

๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


ํฌ์ธํŠธ ์ปฌ๋Ÿฌ

- โ— #8EA6B4


ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ

-


๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ

http://troy.labs.daum.net/




๋Œ“๊ธ€ ์–‘์‹

- ์„ฑ์˜ ๊ธ€:

 (์žฅ๋ฌธ์˜ ํŽธ์ง€๋ฅผ ์›ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค ๊ณ ๋ง™๋‹ค๋Š” ์ธ์‚ฌ์กฐ์ฐจ ์•ˆ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.)

๋ฉ”์ผ ์ฃผ์†ŒX




์›นํฐํŠธ ์‚ฌ์ดํŠธ

http://xpressengine.github.io/XEIcon/library-2.3.3.html

(2.3.3, 1.0.4 ๋‹ค ์ ์šฉ ๊ฐ€๋Šฅ)

https://fontawesome.com/icons?d=gallery


๋ชจ๋“  ์•„์ด์ฝ˜์„ ๊ฐ™์€ ์‚ฌ์ดํŠธ๋กœ ํ†ต์ผํ•ด์•ผ ๊น”๋”ํ•จ



์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์€ ๊ณณ ์šฐํด๋ฆญ - ๊ฒ€์‚ฌ ๋ˆ„๋ฅด๋ฉด

html css ๋‹ค ๋œน๋‹ˆ๋‹ค



์˜ค๋ฅ˜๋Š” ์ €๋„ ๋ชจ๋ฆ…๋‹ˆ๋‹ค.... ํ…Œ์ŠคํŠธ ์•ˆ ํ–ˆ์Œ


์งˆ๋ฌธ ๋ฐ›์ง€ ์•Š์Šต๋‹ˆ๋‹ค


์ด๊ฒƒ ๋ณด์„ธ์š”,, ๊ด€๋ฆฌ์ž ํ™”๋ฉด์ธ๋ฐ ๋„ˆ๋ฌด ๊ท€์—ฝ์ฃ ,,,


๋‹ค์Œ ์นดํŽ˜ ์–ดํ”Œ์„ ๋ชจํ‹ฐ๋ธŒ๋กœ ๋งŒ๋“  ์Šคํ‚จ์ž…๋‹ˆ๋‹ค.


๋ฐ˜์‘ํ˜•

ํฌ๋กฌ ์ตœ์ ํ™”



- ์นดํ”ผ๋ผ์ดํŠธ ์ œ๊ฑฐ, ์ˆ˜์ • ๊ธˆ์ง€

์ด๋ฏธ์ง€ ํŒŒ์ผ๊ณผ ์†Œ์Šค ํ•ด๋‹น ์Šคํ‚จ ์™ธ์˜ ๋‹ค๋ฅธ ๊ณณ์— ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์„ธ์š”

- ์ˆ˜์ •O ์žฌ๋ฐฐํฌ, ๊ณต์œ  X

- ๊ฐค๋Ÿฌ๋ฆฌํ˜• ์นดํ…Œ๊ณ ๋ฆฌ์— ์‚ฌ์ง„ ์—†๋Š” ๊ธ€ X


๊พธ๋ฏธ๊ธฐ - ์Šคํ‚จ ํŽธ์ง‘ - ๊ธ€ ๋ชฉ๋ก ํ˜•ํƒœ : ๋ชฉ๋ก+๋‚ด์šฉ or ๋‚ด์šฉ

๊พธ๋ฏธ๊ธฐ - ๋ชจ๋ฐ”์ผ - ์‚ฌ์šฉํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.


ํฌ์ธํŠธ ์ปฌ๋Ÿฌ

- โ— #8EA6B4


ํ…Œ์ŠคํŠธ ๋ธ”๋กœ๊ทธ

-


๋ชจ๋ฐ”์ผ ๋ฒ„์ „ ํ…Œ์ŠคํŠธ

http://troy.labs.daum.net/




๋Œ“๊ธ€ ์–‘์‹

- ์„ฑ์˜ ๊ธ€:

 (์žฅ๋ฌธ์˜ ํŽธ์ง€๋ฅผ ์›ํ•˜์ง„ ์•Š์Šต๋‹ˆ๋‹ค ๊ณ ๋ง™๋‹ค๋Š” ์ธ์‚ฌ์กฐ์ฐจ ์•ˆ ํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด ๋งŽ์•„์„œ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.)

๋ฉ”์ผ ์ฃผ์†ŒX




์ˆ˜์ •ํ•˜๊ณ  ์‹ถ์€ ๊ณณ ์šฐํด๋ฆญ - ๊ฒ€์‚ฌ ๋ˆ„๋ฅด๋ฉด

html css ๋‹ค ๋œน๋‹ˆ๋‹ค


์งˆ๋ฌธ ๋ฐ›์ง€ ์•Š์Šต๋‹ˆ๋‹ค