TIL (note03)

0l0lยท2021๋…„ 5์›” 13์ผ
0

TIL

๋ชฉ๋ก ๋ณด๊ธฐ
32/86

์ƒˆ๋กœ ์•Œ๊ฒŒ๋œ ๊ฒƒ ๋ฉ”๋ชจ ๋‚จ๊ธฐ๊ธฐ

๐Ÿ““ ์ฐธ๊ณ 

โ‘  ๊ฐ ๋ธŒ๋ผ์šฐ์ €์—๋Š” ์š”์†Œ๋“ค๋งˆ๋‹ค ๊ธฐ๋ณธ์ ์œผ๋กœ ์ •์˜๋œ 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%) ์„ค์ •!)

  • top์˜ ๊ธฐ์ค€์€ relative๋ฅผ ์ ์šฉํ•œ ๋ถ€๋ชจ ์š”์†Œ
  • transform์˜ ๊ธฐ์ค€์€ ์†์„ฑ์„ ์ ์šฉ์‹œํ‚จ ์ž๊ธฐ ์ž์‹ 
profile
์ฒœ๋ฐฉ์ง€์ถ• ๋น™๊ธ€๋น™๊ธ€

0๊ฐœ์˜ ๋Œ“๊ธ€