๋ชฉ๋ก2022/02 (81)
whatisthis?
Background practice (์์ด๋น์ค๋น) index.html Plus Entire apartment 4.97 (203) Unwind in a Bright Space with Rustic Accents Rooms and beds 2 guests 1 bedroom 1 bed 1 bath Amenities Wifi Kitchen style.css .like-button { box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); } /* โผ WHERE YOUR CODE BEGINS */ * { box-sizing: border-box; margin: 0; } body { font-family: "Poppins", sans-serif; } .sr-only { display: no..
1/ background-color ๋ฐฐ๊ฒฝ์์ ๋ฃ์ hex | rgb | rgba 2/ background-image ๋ฐฐ๊ฒฝ์ผ๋ก ์ด๋ฏธ์ง๋ฅผ ๋ฃ์ - url() ํจ์๋ฅผ ์ฌ์ฉํด์ผํจ. - url(์ด๋ฏธ์ง ๊ฒฝ๋ก) or url(์ด๋ฏธ์ง ์ฃผ์) .selector { background-image: url(./assets/image.png); } 3/ backgroud-repeat ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ๋ฐ๋ณต ์ฌ๋ถ repeat | no-repeat ๋๋ถ๋ถ์ no-repeat ์ผ๋ก ํจ. ( default ๊ฐ์ repeat์) 4/ background-size ๋ฐฐ๊ฒฝ ์ฌ์ด์ฆ (ํฌ๊ธฐ) contain | cover | custom contain ํฌํจ๋จ (์์ ์์ ๋ชจ๋ ๋ฉด์ด ๋ค ๋ค์ด๊ฐ๊ฒ) - ๋น๊ณต๊ฐ ์๊ฒจ๋ cover ๋น๊ณต๊ฐ ์์ด ๊ฝ ์ฐจ๋๋ก (์ฌ..
Typography Library ์ ์ ํ๋์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ ์. ๐ก ๋ผ์ด๋ธ๋ฌ๋ฆฌ(library)๋? ์ผ์ข ์ kit. ์์ฃผ ์ฌ์ฉํ๋ ์ฝ๋(CSS์ ๊ฒฝ์ฐ์ ํด๋์ค) ๋ฅผ ํ๋ฒ ์ ์ด๋๊ณ ๊ณ์ํด์ ์ฌ์ฉํ ์ ์๊ฒ ํจ. 1/ Noto Sans KR import ํด์ค๊ธฐ - fonts.google ์ด์ฉ font-size์ ๊ทธ์ ์ด์ธ๋ฆฌ๋ line-height, letter-spacing์ ๊ฐ์ด ๋ฌถ์ด์ ์ ์ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ง์. 2/ font-size์ ๋ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์ ์ (typography.css) /* Font size */ .fs-tiny { font-size: 12px; line-height: 1.3333333; letter-spacing: -0.015em; } ์์ ๊ฐ์ด font-size๋ 12px๋ก ํ๊ณ , li..
์น ํฐํธ(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..