๋ชฉ๋ก2022/02/26 (8)
whatisthis?
์น ํฐํธ(Web Font) ์ ์ฉ ๋ฐฉ๋ฒ 1 / ๊ฐ์ ธ๋ค๊ฐ ์ด๋ค. - ๊ตฌ๊ธ ํฐํธ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com ๋ค์ํ ์นํฐํธ๋ค์ด ์ ๊ณต๋๊ณ ์๋ค. ๊ทธ๋ฅ ํ๋ผ๋๋๋ก head์ link ๋ถ์ฌ๋ฃ๊ณ css์ font-family ๋ถ์ฌ๋ฃ์ผ๋ฉด ๋! ๋ฐฉ๋ฒ 2 / ์ฌ์ฉ์์๊ฒ ์ง์ ์ ๊ณตํ๋ค. ์ฐ์ , github์์ ํฐํธ ํ์ผ์ ์ ๋ถ ๋ค์ด๋ฐ๋๋ค. https://github.com/innks/NanumSquareRound GitHub - innks/NanumSquareRound: ๋๋์คํ์ด๋ผ์ด๋ ์นํฐํธ์ ๋๋ค. NanumSquareRound webfont. ๋๋์คํ์ด๋ผ์ด๋ ์นํฐํธ์ ๋๋ค..
CSS - Typography Typography ์ค์ ํ์ดํฌ๊ทธ๋ํผ - ํ์์ ์์ฒด๋ ๊ธ์ ๋ฐฐ์น ๋ฑ์ ๊ตฌ์ฑ ๋ฐ ํํ. = ํ ์คํธ๋ฅผ ์์๊ฒ ๋์์ธ. ์ ๋ณด(information)์ ๊ฐ๋ ์ฑ์ ์ํด์. ๐ font-size = ๊ธ์ ํฌ๊ธฐ px ์ ๋ ๋จ์ em ์๋ ๋จ์ ์ค์ ๋ก mywebproject.tistory.com ์์ฃผ ์ฌ์ฉํ๋ ์์ฑ๋ค ๐บ ๋ ์ฌ์ฉํ๋ ์์ฑ๋ค๐ป ๐ text-align left | right | center = ์ผ์ชฝ ์ ๋ ฌ / ์ค๋ฅธ์ชฝ ์ ๋ ฌ / ๊ฐ์ด๋ฐ ์ ๋ ฌ ๐ text-indent ๋ค์ฌ ์ฐ๊ธฐ (๋ฌธ๋จ ์์์) ์> text-indent: 100px; ** ์์(๋ง์ด๋์ค)๊ฐ๋ ์ฌ์ฉ ๊ฐ๋ฅ (์ผ์ชฝ์ผ๋ก ๋ฐ๋ ค๋จ) ๐ text-transform ์ํ๋ฒณ ๋ฒ ์ด์ค์ ๋ฌธ์๋ค๋ง. none Default. Yeon j..
Typography ์ค์ ํ์ดํฌ๊ทธ๋ํผ - ํ์์ ์์ฒด๋ ๊ธ์ ๋ฐฐ์น ๋ฑ์ ๊ตฌ์ฑ ๋ฐ ํํ. = ํ ์คํธ๋ฅผ ์์๊ฒ ๋์์ธ. ์ ๋ณด(information)์ ๊ฐ๋ ์ฑ์ ์ํด์. ๐ font-size = ๊ธ์ ํฌ๊ธฐ px ์ ๋ ๋จ์ em ์๋ ๋จ์ ์ค์ ๋ก ์ ์ฉ๋ ํฐํธ ์ฌ์ด์ฆ (๋ถ๋ชจ์ font-size) ์ N๋ฐฐ rem html ํ๊ทธ ๊ธฐ์ค N๋ฐฐ ๋ณดํต์ px์ ๋ง์ด ์ฌ์ฉํจ. ๐ line-height = ์ค ๊ฐ๊ฒฉ ๋ง์ฐฌ๊ฐ์ง๋ก px, em, rem ๋จ์ ์ฌ์ฉ. ์ฌ๊ธฐ์๋ em์ ๋ง์ด ์ฌ์ฉํจ. (ํด๋น ํฐํธ์ฌ์ด์ฆ์ N๋ฐฐ๋งํผ) (๊ทธ๋ฅ 1.5๋ผ๊ณ ์ ๋๊ฒ์ด ๊ด๋ก. 1.5em ์ด๋ผ๊ณ ์ฐ์ง X) line-height๊ฐ ์ผ๋ง๊ฐ ๋๋ ๊ฐ์ font-size์ ํด๋นํ๋ ๋ถ๋ถ์ ์ ์ค์์ ์์นํ๊ฒ ๋๋ค! ๐ letter-spacing = ์๊ฐ ๊ฐ๊ฒฉ p..
๋ฏธ๋์ด์ฟผ๋ฆฌ (Media Query) prac - ๋ชจ๋ฐ์ผ ๋ฒ์ (๊ฐ์ฅ ์์ ํ๋ฉด) ๋จผ์ ํ๋๊ฒ์ด ์ ์ค์ด๋ค! - ๋ชจ๋ฐ์ผ ๋จผ์ ๊ตฌ์ํ๊ณ , ์ ์ ํฌ๊ธฐ๋ฅผ ํค์๋๊ฐ ๐บ ์ด๋ฐ์์ผ๋ก ๋ชจ๋ฐ์ผ ๊ธฐ์ค์ผ๋ก ๋จผ์ ํด์ผํ๋ค. (๊ทธ์ค์์๋ ๋๋น ๊ฐ์ฅ ์์ ์ ๋ก ๊ณจ๋ผ์) index.html ๐ ๋ชจ์ง ์๋ฐ! 8์ ๊ฒ์คํธ ์ ์ฒญํ๊ธฐ Eat, pray, work ๊น๋ฒ๊ทธ์ ๋์งํธ๋ ธ๋ง๋ ๋ฏผ๋ฐ #์น์๋ง์ด #8์์์ฝ์คํ ๋ฏผ๋ฐ ๋๋ฌ๋ณด๊ธฐ style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.01em; height: 3000px; } a { text-decoration: none; } .landin..
๋ฏธ๋์ด์ฟผ๋ฆฌ (Media Query) - ๋ฐ์ํ ์น(Responsive Web) ์ ๋ง๋ค๊ธฐ ์ํด ๋ฐ๋์ ์์์ผํจ. ๐ป ๋ฐ์ํ ์น์ ์ํ ์ถฉ์กฑ์กฐ๊ฑด HTML viewport meta CSS media query โช [HTML] viewport meta ๋ชจ๋ฐ์ผ์์์ pc์์์ viewport๊ฐ ๋ค๋ฅด๋ค. metaํ๊ทธ๋ก width=device-width (๋๋น๋ฅผ ๋๋ฐ์ด์ค ๋๋น๋ก ์ค์ ํจ) ์ ์ ์ธํด์ผ ๋ฐ์ํ ์น์ด ์ ์์ ์ผ๋ก ์๋ ๊ฐ๋ฅ. โช [CSS] media query @media screen and (min-width: 768px) { /* ๋ณ๊ฒฝ์ฌํญ * / } atRule์ ์ฌ์ฉํด์ผํจ. (at media) ์ต์ ๊ฐ๋ก๊ฐ 768px ์ผ๋ /* ๋ณ๊ฒฝ์ฌํญ */ ์ด ์ ์ฉ๋๊ฒ ํด์ค. >> ์ฆ, 768 ์ด์์ผ๋ ์ ์ฉ๋จ. โ ..
Figma Created with Figma www.figma.com index.html Noah Madsen Copenhagen, Denmark Friends 730 Projects 3 Reviews 243 style.css * { box-sizing: border-box; margin: 0; } body { font-family: "Muli", sans-serif; color: #273444; } .profile-name { font-size: 18px; font-weight: 600; line-height: 1.3333333333; } .profile-location { font-size: 14px; line-height: 1.4285714286; color: #8492a6; } .profile-d..
https://mywebproject.tistory.com/228(private) ์ง๋๋ฒ์ float ์์ ๋ก ์ ์ํด๋ณธ ๊ฒ์ flex-box๋ก ๋ง๋ค์ด๋ณด์! ๐ป style.css (float ์ฌ์ฉ์) * { box-sizing: border-box; margin: 0; } body { font-family: "Noto Sans KR", sans-serif; letter-spacing: -0.02em; } h1 { font-size: 16px; font-weight: 400; color: #1f2d3d; line-height: 1.25; } strong { font-size: 14px; font-weight: 400; color: #afb3b9; line-height: 1.4285714286; } p { di..
https://mywebproject.tistory.com/228(private) ์ง๋๋ฒ์ float ์์ ๋ก ์ ์ํด๋ณธ ๊ฒ์ flex-box๋ก ๋ง๋ค์ด๋ณด์! float ์ด์ฉ์ ๐ป * { box-sizing: border-box; } body { font-family: "Roboto", sans-serif; letter-spacing: -0.02em; } a { font-size: 18px; line-height: 20px; color: #8492A6; text-decoration: none; } ul { list-style-type: none; padding-left: 0; } .tab-menu::after { content: ''; display: block; clear: left; } .tab-menu ..