๐ ์ฐธ๊ณ
โ ๊ฐ ๋ธ๋ผ์ฐ์ ์๋ ์์๋ค๋ง๋ค ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์๋ simple css๊ฐ ์๋ค.
(์. h1, strong์ bold(font-weight: 700), p๋ normal(font-weight: 400))
font-weight๋ฅผ ๋ณ๊ฒฝํ๊ธฐ ์ํด body์ ์์ฑ์ ์์ฑํ ๊ฒฝ์ฐ ์ ์ฉ๋์ง ์์ ๊ฐ๊ฐ ์์๋ง๋ค ์ง์ ์์ฑํด์ค์ผ ํ๋ค.
โก CSS ์์ฑ ์์ฑํ๋ ์์๋ฅผ ๋ณดํต '์ฝ๋ฉ ์ปจ๋ฒค์ ' ํน์ '๋งํฌ์ ์ปจ๋ฒค์ ' ์ด๋ผ ํ๋ค. ์ผํ๋ ํ์ฌ๋ง๋ค ์คํ์ผ์ด ๋ค๋ฅด๋ฉฐ, ํน์ ๊ท์น์ ์งํค๋ฉด์ ์์ฑํ๋ ๊ฒ์ ์ ์ง๋ณด์ ์ธก๋ฉด๊ณผ ํ์ ํ ๋ ์ข์ ์ต๊ด์ด๋ค.
<์ฐธ๊ณ ์ฌ์ดํธ>
nhn nuli ์ฝ๋ฉ ์ปจ๋ฒค์
๋ ์ง์ฝ๋ฏน์ค ๋งํฌ์
๊ฐ์ด๋
bootstrap์์ ์ฌ์ฉํ๋ stylelint
โจโข ์ด๋ฏธ์ง ์ฌ์ด์ฆ ์กฐ์ ํ ๋ ๊ต์ฅํ ๋ง์ด ์ฐ๋ ์กฐํฉ
.parent {
width: 400px;
}
.child {
width: 100%; // โ
๋ถ๋ชจ ์์ ์ฝํ
์ธ ๊ธธ์ด์ 100%์ ๋ง๊ฒ ์ค์
height: auto; // โ
height๋ width์ ๋ง๊ฒ ์์์ ์กฐ์
}
๐ค์๋ img๋ inline ์์์ด์ง๋ง ํน์ํ ๊ฒฝ์ฐ๋ก ์์ฒด์ ์ผ๋ก ๊ฐ๊ณ ์๋ ์ฌ์ด์ฆ์ width์ height๋ฅผ ์กฐ์ ํ ์ ์๋ค. ์ฝ๊ฐ์ ์ค์ฐจ๊ฐ ์๊ธธ ์ ์๋ ๊ฒฝ์ฐ๋ฅผ ๋ฐฉ์งํ๊ธฐ ์ํด width, height ๊ฐ์ ์ ์ฉํ ์ ์๋ ํํ์ธ 'display: block;'์ ๋ช ์ํด์ค๋คโ (์์ด๋ ๊ฒฐ๊ณผ ๋์ผ)
.card img {
display: block; // ๋๋น, ๋์ด ์ค์ ๊ฐ๋ฅํ ์์์์ ๋ช
์ํจ
width: 100%;
height: auto;
}
โจโฃ position์ px(ํฝ์ )์ด ์๋๋ผ '%' ๋ฅผ ์ด์ฉํ์ ๋, ์์๋ฅผ ์ ๊ฐ์ด๋ฐ ์์น์์ผ์ฃผ๊ธฐ ์ํด transform: translate ์์ฑ์ด ํ์ํ๋ค.
.parent {
position: relative;
}
button {
position: absolute;
top: 50%;
transform: translate(-50%);
}
top: 50%;
: relative๋ฅผ ์ ์ฉํ ๋ถ๋ชจ ์์์ height ๊ธฐ์ค์ผ๋ก top์์ 50%๋งํผ ๋จ์ด์ ธ ์์นํ๊ฒ ๋๋ค.
transform: translate(-50%);
:
translate๋ฅผ ํ์ง ์๋๋ค๋ฉด ๋ฒํผ์ '์ผ์ชฝ ๋ชจ์๋ฆฌ ๊ผญ์ง์ ' ๊ธฐ์ค์ผ๋ก ๋ถ๋ชจ ์์์ ๊ฐ์ด๋ฐ ์์นํ๊ฒ ๋๋ค.
๋ฒํผ์ '๊ฐ์ด๋ฐ' ์ง์ ์ ๊ธฐ์ค์ผ๋ก ์ ๊ฐ์ด๋ฐ ์์นํ๊ธฐ ์ํด ์๊ธฐ ์์ ์ ๋ฐ๋งํผ ์๋ก(y์ถ์ -50%๋งํผ) ์ด๋ํด์ผ ํ๋ค.
(x์ถ, y์ถ ๋ชจ๋ ์กฐ์ ํ๋ ๊ฒฝ์ฐ translate(-50%, -50%) ์ค์ !)