TIL (note02)

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

TIL

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

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

๐Ÿ““ ์ฐธ๊ณ 

โ‘  ๋‹จ์ถ•ํ‚ค!๐Ÿ˜

  • ๋‹ค์ค‘ column ์„ ํƒ : ctrl+alt+โ†•๏ธ(๋ฐฉํ–ฅํ‚ค) - Window ๊ธฐ์ค€ / shift + option + command + โ†•๏ธ(๋ฐฉํ–ฅํ‚ค) - Mac ๊ธฐ์ค€
  • ํŠน์ • ๋‹จ์–ด์™€ ๋™์ผํ•œ ๋‹จ์–ด ์„ ํƒ(์—ฌ๋Ÿฌ๋ฒˆ ๋ˆ„๋ฅผ์ˆ˜๋ก ๋‹ค์ค‘ ์„ ํƒ) : ctrl+d - Window ๊ธฐ์ค€
  • ์ปค์„œ๊ฐ€ ์œ„์น˜ํ•œ ๋‹จ์–ด ์ „์ฒด ์„ ํƒ : shift+alt+โ†’(์˜ค๋ฅธ์ชฝ ๋ฐฉํ–ฅํ‚ค) - Window ๊ธฐ์ค€

โœจโ‘ก 'display: block'์ธ ์š”์†Œ๋ฅผ 'width: 100%'์ธ ์ƒํƒœ์—์„œ '๊ฐ€์šด๋ฐ ์ •๋ ฌ' (์ž๋™์œผ๋กœ ์ƒ๊ธฐ๋Š” margin์ด ์žˆ์œผ๋กœ ์ž๋™ ์—ฌ๋ฐฑ ์ƒ์„ฑ)
=> margin: 0 auto;๋กœ ์„ค์ •!

โœจโ‘ข box-sizing: border-box๋กœ ์„ค์ •ํ•œ ์ƒํƒœ์—์„œ
์ฐฝ์˜ ํฌ๊ธฐ ์กฐ์ ˆ ์ƒ๊ด€์—†์ด ํ•ญ์ƒ ์—ฌ๋ฐฑ์žˆ๋Š” ์ƒํƒœ๋กœ ์œ ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•
=> padding ๊ฐ’ ์„ค์ •!
(margin์€ border ๋ฐ–์˜ ์˜์—ญ์ด๋ฏ€๋กœ ์—ฌ๋ฐฑ ๋ฐœ์ƒโŒ)

โ‘ฃ width: 100%;์™€ width: auto;์˜ ์ฐจ์ด! ๋‘˜์€ ์—„์—ฐํžˆ ๋‹ค๋ฅธ ๊ฐ’!

  • width: 100%; : ๋ง๊ทธ๋Œ€๋กœ ์ž์‹ ์ด ์ฐจ์ง€ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ€๋กœํญ(๋ถ€๋ชจ์˜ content-box ์‚ฌ์ด์ฆˆ)์„ ๋ชจ๋‘ ๋‹ค ์ฑ„์›Œ๋ผ

  • width: auto; : ์ ์ ˆํžˆ ์•Œ์•„์„œ ์„ค์ •ํ•ด๋ผ

'width: auto;'๋Š” box์˜ display ๊ฐ’์— ๋”ฐ๋ผ, ๊ทธ๋ฆฌ๊ณ  ์š”์†Œ๊ฐ€ ์‚ฌ์šฉ๋œ ๋งฅ๋ฝ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค.๐Ÿ˜…

<display๊ฐ’์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ์ผ€์ด์Šค>

  • block: ๋ธ”๋ก์€ ๊ธฐ๋ณธ์ ์œผ๋กœ 'width: 100%'๊ฐ€ ์„ค์ •๋˜์–ด ์žˆ์–ด auto๋Š” 100% (์ž๊ธฐ ์˜์—ญ ์ฐจ์ง€)
  • inline-block: ์ธ๋ผ์ธ ๋ธ”๋ก์€ ์ž์‹ ์ด ๊ฐ€์ง„ ์ปจํ…์ธ  ๊ธธ์ด ๋งŒํผ์„ auto๋กœ ์„ค์ •
  • inline: ์ธ๋ผ์ธ ์š”์†Œ๋Š” width ์„ค์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•œ ์š”์†Œ์ด๋ฏ€๋กœ width๊ฐ’์€ ํ•ญ์ƒ auto๋กœ ์„ค์ •

<๋งฅ๋ฝ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ์ผ€์ด์Šค>

  • absolute, fixed, float: ์ž์‹ ์ด ๊ฐ€์ง„ ์ปจํ…์ธ  ๊ธธ์ด ๋งŒํผ์„ auto๋กœ ์„ค์ •
  • flex-box: center center๋กœ ์ •๋ ฌํ–ˆ์„ ๊ฒฝ์šฐ ์ž์‹ ์ด ๊ฐ€์ง„ ์ปจํ…์ธ  ๊ธธ์ด ๋งŒํผ์„ auto๋กœ ์„ค์ •

โ€ป width: auto;๋Š” ๋งฅ๋ฝ์— ๋”ฐ๋ผ ๊ฐ’์ด ๋งŽ์ด ๋‹ฌ๋ผ์ง€๊ธฐ ๋•Œ๋ฌธ์— ๊ฒฝํ—˜์„ ํ†ตํ•œ ์ดํ•ด๊ฐ€ ํ•„์š”ํ•จ!

profile
์ฒœ๋ฐฉ์ง€์ถ• ๋น™๊ธ€๋น™๊ธ€

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