๐
10์ผ์ฐจ
Part 1. HTML/CSS/JS๋ก ๋ง๋๋ ์คํ๋ฒ ์ค ์น์ฌ์ดํธ
Ch 10. ์คํ๋ฒ ์ค ์์
Ch 10. ์คํ๋ฒ ์ค ์์
์ฃผ์
- ์์ํ๊ธฐ
- ํค๋์ ๋๋กญ๋ค์ด ๋ฉ๋ด
์ฃผ์ ๋ด์ฉ
https://github.com/parkYoungWoong/starbucks-vanilla-app
๐ Google Fonts
๐ Google Material Icons
๐ ๋ค์ ๊ธฐ์ตํ๊ธฐ
- before, after ๊ฐ์ ์์ ์ ํ์ ์ฌ์ฉํ ๋, content: ""; ๋ด์ฉ์ด ๋น์ด์์ด๋ ๋ฐ๋์ ๋ช ์ํด์ค์ผ ํจ.
- position absolute, fixed๋ display ๊ฐ์ด ์๋์ผ๋ก block์ผ๋ก ๋ณ๊ฒฝ๋๋ค.
์๋กญ๊ฒ ์๊ฒ ๋ ๋ด์ฉ
๐ ์คํ ๊ทธ๋ํ(The Open Graph Protocol)
์น ํ์ด์ง๊ฐ ์์ ๋ฏธ๋์ด(ํ์ด์ค๋ถ, ์นด์นด์คํก ๋ฑ)๋ก ๊ณต์ ๋ ๋ ์ฐ์ ์ ์ผ๋ก ํ์ฉ๋๋ ์ ๋ณด๋ฅผ ์ง์ ํ๋ค.
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Starbucks" />
<meta property="og:title" content="Starbucks Coffee Korea" />
<meta property="og:description" content="์คํ๋ฒ
์ค๋ ์ธ๊ณ์์ ๊ฐ์ฅ ํฐ ๋ค๊ตญ์ ์ปคํผ ์ ๋ฌธ์ ์ผ๋ก, 64๊ฐ๊ตญ์์ ์ด 23,187๊ฐ์ ๋งค์ ์ ์ด์ํ๊ณ ์์ต๋๋ค." />
<meta property="og:image" content="./images/starbucks_seo.jpg" />
<meta property="og:url" content="https://starbucks.co.kr" />
๐ ํธ์ํฐ ์นด๋(Twitter Cards)
์น ํ์ด์ง๊ฐ ์์ ๋ฏธ๋์ด(ํธ์ํฐ)๋ก ๊ณต์ ๋ ๋ ์ฐ์ ์ ์ผ๋ก ํ์ฉ๋๋ ์ ๋ณด๋ฅผ ์ง์ ํ๋ค.
<meta property="twitter:card" content="summary" />
<meta property="twitter:site" content="Starbucks" />
<meta property="twitter:title" content="Starbucks Coffee Korea" />
<meta property="twitter:description" content="์คํ๋ฒ
์ค๋ ์ธ๊ณ์์ ๊ฐ์ฅ ํฐ ๋ค๊ตญ์ ์ปคํผ ์ ๋ฌธ์ ์ผ๋ก, 64๊ฐ๊ตญ์์ ์ด 23,187๊ฐ์ ๋งค์ ์ ์ด์ํ๊ณ ์์ต๋๋ค." />
<meta property="twitter:image" content="./images/starbucks_seo.jpg" />
<meta property="twitter:url" content="https://starbucks.co.kr" />
๐ img๋ ๊ธฐ๋ณธ์ ์ผ๋ก inline ์์์ด๊ธฐ ๋๋ฌธ์, baseline์ผ๋ก ์ธํด ์๋์ ๊ณต๋ฐฑ์ด ๋ํ๋๋ค.
์ ๋ฐฉ๋ฒ์ผ๋ก ํด๊ฒฐ!
๐ ์ฌ๊ธฐ์๋ ๊ฐ์ด๋ฐ ๋ฐฐ์นํ ๋ ์ด ๋ฐฉ๋ฒ ์ฌ์ฉํ๋ค
๐ a ๋งํฌ ์ด๋ X
๋๋์
๊ฐ ๊ธธ์ด ๊ธํด์ 1.5๋ฐฐ์ํ๊ณ ๊ฐ์๋ฅผ ๋ดค์๋๋ฐ ์ด๋ฒ ๊ฐ์๋ ๊ทธ๋ ๊ฒ ๋ค์ผ๋ฉด์ ์ฝ๋ฉํ๋ค๊ฐ ์๋ชฉ์ด ๋๊ฐ ๋ป ํ๋ค. ๋ค์์๋ 1๋ฐฐ์ํ๊ณ ๋ค์ด์ผ๊ฒ ๋ค๐ญ ๊ฐ์๋ฅผ ์ฌ๋ฌ ๊ตฐ๋ฐ์์ ๋ค์ด๋ณด๋ฉด ์๋ฌด๋๋ ์ฌ๋๋ง๋ค ์ฝ๋ ๋ฐฉ์์ด ๋ค ๋ค๋ฅด๋ค๋ ์ ๋๋ฌธ์ ๊ฐ์ฅ ํฐ ํผ๋์ ๊ฒช๋๋ค.. ์ฒ์์ ํ๋ก ํธ์๋ ๊ฐ๋ฐ์ ๋ฐฐ์ ์ ๋ div์ class๋ฅผ ์ต๋ํ ์ฐ์ง ์๋(์ด ๋ฐฉ๋ฒ์ ๋ญ๋ผํ๋๋ผ ๊ธฐ์ต์ด ์ ๋๋ค) ๊ฒ์ ๊ต์ฅํ ๊ฐ์กฐํ์
์ ์ด๊ฑฐ์ ๊ฐ์ ์ก๊ธฐ ์ํ ์ฐ์ต์ ๋ง์ด ํ๋ค. ์์ ์ ๊ฝค ์ ๋ช
ํ ํด๋ก ์ฝ๋ฉ ๊ฐ์๋ฅผ ๋ค์ ์ ์ด ์๋๋ฐ div์ class๋ฅผ ๋จ๋ฐํด์ ?! ์ด ์ํ๋ก ๋ฃ๋ค๊ฐ ๊ฒฐ๊ตญ์ html ๋ถ๋ถ์ ๋ค ๋ฏ์ด ๊ณ ์ณค์๋ค. ใ
ใ
ํ๋ก ํธ ๊ฐ์๋ ์ ์ ํ ์ฐ๋ ๊ฒ ๊ฐ๋ค. (๋๋ฌด ์ ์ฐ์ง๋ ์ฐ์ง๋ ์๋ ๊ทธ๋ฐ..!) ์ ๊ทธ๋ฆฌ๊ณ semantic ๋ถ๋ถ์ ์์ธํ ์ ๋ค๋ฃฌ๋ค.
๋ณธ ํฌ์คํ ์ ํจ์คํธ์บ ํผ์ค ํ๊ธ ์ฑ๋ฆฐ์ง ์ฐธ์ฌ๋ฅผ ์ํด ์์ฑ๋์์ต๋๋ค.
#ํจ์คํธ์บ ํผ์ค
#ํจ์บ ์ฑ๋ฆฐ์ง
#์ง์ฅ์ธ์ธ๊ฐ
#์ง์ฅ์ธ์๊ธฐ๊ณ๋ฐ
#ํจ์คํธ์บ ํผ์คํ๊ธฐ
#ํ_๋ฒ์_๋๋ด๋_ํ๋ก ํธ์๋_๊ฐ๋ฐ_์ด๊ฒฉ์ฐจ_ํจํค์ง_Online
'๐ฌ > ใ ใ ใ ใ ใ ใ ์ฑ๋ฆฐ์ง' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
ํจ์คํธ ์บ ํผ์ค ์ฑ๋ฆฐ์ง 12์ผ์ฐจ (0) | 2022.02.04 |
---|---|
ํจ์คํธ ์บ ํผ์ค ์ฑ๋ฆฐ์ง 11์ผ์ฐจ (0) | 2022.02.03 |
ํจ์คํธ ์บ ํผ์ค ์ฑ๋ฆฐ์ง 9์ผ์ฐจ (0) | 2022.02.01 |
ํจ์คํธ ์บ ํผ์ค ์ฑ๋ฆฐ์ง 8์ผ์ฐจ (0) | 2022.01.31 |
ํจ์คํธ ์บ ํผ์ค ์ฑ๋ฆฐ์ง 7์ผ์ฐจ (0) | 2022.01.30 |