Html5-boilerplate: index.html์— theme-color ๋ฉ”ํƒ€ ํƒœ๊ทธ ์ถ”๊ฐ€

์— ๋งŒ๋“  2018๋…„ 10์›” 04์ผ  ยท  12์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: h5bp/html5-boilerplate

์ œ์ถœํ•ฉ๋‹ˆ๋‹ค...

  • [ ] ๋ฒ„๊ทธ ๋ณด๊ณ ์„œ
  • [x] ๊ธฐ๋Šฅ ์š”์ฒญ
  • [ ] ๊ธฐํƒ€(์—ฌ๊ธฐ(์•„๋ž˜)์—์„œ ์ง€์› ์š”์ฒญ์„ ์ œ์ถœํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.)

Android ๋ฐ ์‚ผ์„ฑ ์ธํ„ฐ๋„ท์šฉ Chrome์€ <meta name="theme-color" content="#3c790a"> ๋ฉ”ํƒ€ ํƒœ๊ทธ๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค.
https://caniuse.com/#feat =meta-theme-color

๋ฌธ์„œ(https://github.com/h5bp/html5-boilerplate/blob/master/src/doc/extend.md#theme-color)์—์„œ ์ด๋ฅผ ๊ฐ„๋žตํ•˜๊ฒŒ ๋‹ค๋ฃจ์ง€๋งŒ ์ด์ œ ๋ฉ”ํƒ€ ํƒœ๊ทธ๊ฐ€ ๊ธฐ๋ณธ index.html ํ…œํ”Œ๋ฆฟ. Android์šฉ Chrome์€ ์—„์ฒญ๋‚œ ๋ธŒ๋ผ์šฐ์ € ์‹œ์žฅ ์ ์œ ์œจ(33%)์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ํ…Œ๋งˆ ์ƒ‰์ƒ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์€ ๋ชจ๋“  ์›น์‚ฌ์ดํŠธ์™€ ์›น์•ฑ์— ์œ ์šฉํ•œ ์ถ”๊ฐ€ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

enhancement

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@coliff ์™ธ์—๋„ #fafafa๋Š” ๊ทธ๋ฆผ์ž๊ฐ€ ์žˆ๋Š” ์ˆœ๋ฐฑ์ƒ‰ ์นด๋“œ์™€ ๋Œ€๋น„๋ฅผ ์ž˜ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด Google์—์„œ ๊ถŒ์žฅํ•˜๋Š” ๋ฐฐ๊ฒฝ์ƒ‰์ž…๋‹ˆ๋‹ค.

๋จธํ‹ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ณต์‹ ์›น์‚ฌ์ดํŠธ์—์„œ ๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด์„ธ์š”.
์นด๋“œ์˜ ๋ฐฐ๊ฒฝ์ƒ‰์€ ์‚ฌ์‹ค #fafafa์ž…๋‹ˆ๋‹ค.

Background colour example

๋ชจ๋“  12 ๋Œ“๊ธ€

์•„์ด๋””์–ด๊ฐ€ ๋งˆ์Œ์— ๋“ญ๋‹ˆ๋‹ค. ๊ธฐ๋ณธ๊ฐ’์— ๋Œ€ํ•ด ์•„๋ฌด ๋ฌธ์ œ๊ฐ€ ์—†๋Š” ๊ฒƒ์„ ์„ ํƒํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์•„๋‹ˆ๋ฉด... ํ•ซํ•‘ํฌ?

ํ•ซํ•‘ํฌ๋Š” H5BP์˜ ์ „ํ†ต์ด๋‹ค. ํ•œ ๋ฒˆ ๊ธฐ๋ณธ ํ…์ŠคํŠธ ์„ ํƒ ์ƒ‰์ƒ์ด ์•„๋‹ˆ ์—ˆ์Šต๋‹ˆ๊นŒ?

ํ•˜์•„. ๋งŽ์€ ์‚ฌ๋žŒ๋“ค์ด ๊ทธ๊ฒƒ์„ ๋ฐ”๊ฟ€ ์ƒ๊ฐ์„ํ•˜์ง€ ์•Š์„ ์ˆ˜๋„ ์žˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋‚˜๋Š” ๋ฐ์€ ํšŒ์ƒ‰์ด ๊ฐ€์žฅ ์ข‹์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

image

๋„ค.. ๊ทธ๊ฒƒ๋„ ์ „ํ†ต์ด์—ˆ๊ฑฐ๋“ ์š”.. ๋‚˜์ค‘์— ์ •ํ™•ํžˆ ๊ทธ๋Ÿฐ ์ด์œ ๋กœ ์ œ๊ฑฐ๋ฅผ... ์Œ.. ์ถ”์–ต์ด...

์˜ˆ, ์•„๋งˆ๋„ ํ•ซํ•‘ํฌ๊ฐ€ ์•„๋‹ ๊ฒƒ์ž…๋‹ˆ๋‹ค ๐Ÿ˜„

์ˆ˜์ •๋œ web.manifest PR #2060์—๋Š” theme_color๊ฐ€ #fafafa - ๊ฑฐ์˜ ํฐ์ƒ‰์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” ์šฐ๋ฆฌ๊ฐ€ ๊ทธ๊ฒƒ์œผ๋กœ ๊ฐˆ ๊ฒƒ์„ ์ œ์•ˆํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ํ™•์ธ์€? ์šฐ๋ฆฌ๊ฐ€ ์„ ํƒํ•œ theme_color๋Š” web.manifest์™€ HTML ๋ฉ”ํƒ€ ํƒœ๊ทธ ๋ชจ๋‘์—์„œ ์ผ์น˜ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

์ด๊ฒƒ์€ ์ด์ œ PR #2074์—์„œ ํ•ด๊ฒฐ๋ฉ๋‹ˆ๋‹ค.

@coliff ์™ธ์—๋„ #fafafa๋Š” ๊ทธ๋ฆผ์ž๊ฐ€ ์žˆ๋Š” ์ˆœ๋ฐฑ์ƒ‰ ์นด๋“œ์™€ ๋Œ€๋น„๋ฅผ ์ž˜ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด Google์—์„œ ๊ถŒ์žฅํ•˜๋Š” ๋ฐฐ๊ฒฝ์ƒ‰์ž…๋‹ˆ๋‹ค.

๋จธํ‹ฐ๋ฆฌ์–ผ ๋””์ž์ธ ๊ณต์‹ ์›น์‚ฌ์ดํŠธ์—์„œ ๋‹ค์Œ ์˜ˆ์‹œ๋ฅผ ์‚ดํŽด๋ณด์„ธ์š”.
์นด๋“œ์˜ ๋ฐฐ๊ฒฝ์ƒ‰์€ ์‚ฌ์‹ค #fafafa์ž…๋‹ˆ๋‹ค.

Background colour example

#2074์— ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

๋งˆ์นจ๋‚ด!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰

๊ด€๋ จ ๋ฌธ์ œ

sideshowbarker picture sideshowbarker  ยท  5์ฝ”๋ฉ˜ํŠธ

greenchili picture greenchili  ยท  20์ฝ”๋ฉ˜ํŠธ

amilajack picture amilajack  ยท  19์ฝ”๋ฉ˜ํŠธ

neilcreagh picture neilcreagh  ยท  28์ฝ”๋ฉ˜ํŠธ

gaurav21r picture gaurav21r  ยท  21์ฝ”๋ฉ˜ํŠธ