๋ฐ˜์‘ํ˜•

์—˜๋ฆฌ๋จผํŠธ์˜ ๋„ˆ๋น„๋ฅผ ์ œ์–ดํ•˜๊ธฐ ์œ„ํ•ด CSS์˜ width ์†์„ฑ์„ ์‚ฌ์šฉํ•œ๋‹ค. ํ‰์†Œ์— ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์ด์ง€๋งŒ ์ข…์ข… ์ƒ๊ฐํ•œ๋Œ€๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š์„ ๋•Œ๊ฐ€ ์žˆ๋‹ค. width๋Š” โžŠ์ ˆ๋Œ€๊ฐ’ โž‹์ƒ๋Œ€๊ฐ’ โžŒํ‚ค์›Œ๋“œ ํฌ๊ฒŒ 3๊ฐ€์ง€ ์„ค์ •์œผ๋กœ ๊ตฌ๋ถ„๋˜๋ฉฐ, ๊ฐ ์„ค์ •์— ๋”ฐ๋ผ ๋„ˆ๋น„๊ฐ€ ๋‹ค๋ฅด๊ฒŒ ๊ฒฐ์ •๋œ๋‹ค.

<!-- ์•„๋ž˜ ์˜ˆ์ œ์—์„œ ๊ณตํ†ต์ ์œผ๋กœ ์‚ฌ์šฉํ•  HTML -->
<section>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua
  </p>
</section>

 

์ ˆ๋Œ€๊ฐ’


section {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
} /* ๋ถ€๋ชจ */

p {
  width: 300px;
  background: Khaki;
  margin: 10px;
} /* ์ž์‹ */

 

 

๐Ÿ’ก ๊ฐ€์šฉ ๋„ˆ๋น„ : ๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ์˜ ์ฝ˜ํ…์ธ  ๋ฐ•์Šค ํฌ๊ธฐ

 

  • px ๊ฐ™์€ ์ ˆ๋Œ€ ๋‹จ์œ„๋ฅผ ์‚ฌ์šฉํ•ด์„œ width๋ฅผ ์ง€์ •ํ•˜๋ฉด ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ๋Š” ํ•ญ์ƒ ๊ณ ์ •๋œ ๋„ˆ๋น„๋ฅผ ๊ฐ–๋Š”๋‹ค.
  • ๊ฐ€์šฉ ๋„ˆ๋น„ / ์ฝ˜ํ…์ธ  ํฌ๊ธฐ์™€ ์ƒ๊ด€์—†์ด ์—˜๋ฆฌ๋จผํŠธ์˜ ๋„ˆ๋น„๋ฅผ ํŠน์ •๊ฐ’์œผ๋กœ ๊ณ ์ •์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.
  • ๊ณ ์ •๋œ ๋„ˆ๋น„๋ฅผ ๊ฐ€์ง€๋ฏ€๋กœ ๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋„˜์น  ์ˆ˜ ์žˆ๋‹ค(๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ๋ณด๋‹ค ํฌ๋‹ค๋ฉด).
  • ๋ฐ˜์‘ํ˜•์ด๋ผ๋ฉด ๊ณ ์ •๊ฐ’(์ ˆ๋Œ€๊ฐ’)์„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๊ฒŒ ์ข‹๋‹ค

 

์ƒ๋Œ€๊ฐ’


section {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
} /* ๋ถ€๋ชจ */

p {
  width: 100%;
  background: Khaki;
  margin: 10px;
} /* ์ž์‹ */

 

p ์š”์†Œ์— margin: 10px๊ฐ€ ์ง€์ •๋์œผ๋ฏ€๋กœ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋„˜์น˜๊ฒŒ ๋œ๋‹ค

  • % ํผ์„ผํŠธ ๊ฐ™์€ ์ƒ๋Œ€ ๋‹จ์œ„๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ถ€๋ชจ ์š”์†Œ์˜ ํฌ๊ธฐ์— ๋น„๋ก€ํ•œ ๋„ˆ๋น„๋ฅผ ๊ฐ–๋Š”๋‹ค
  • p ์š”์†Œ์˜ ๋„ˆ๋น„๋Š” ์•„๋ž˜์ฒ˜๋Ÿผ ๊ณ„์‚ฐ๋œ ํ›„ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋„˜์น˜๊ฒŒ ๋œ๋‹ค.
    • width: 100% : ๋ถ€๋ชจ ์š”์†Œ(section)์˜ ๊ฐ€์šฉ ๋„ˆ๋น„ 200px
    • margin: 10px : ์ขŒ / ์šฐ ํ•ฉํ•ด์„œ 20px
    • p ์š”์†Œ์˜ ๋„ˆ๋น„ 200px(width) + 20px(margin) > ๋ถ€๋ชจ ์š”์†Œ์˜ ๋„ˆ๋น„ 200px

 

auto


section {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
} /* ๋ถ€๋ชจ */

p {
  width: auto;
  background: Khaki;
  margin: 10px;
} /* ์ž์‹ */

 

margin ํฌ๊ธฐ๋ฅผ ์ œ์™ธํ•œ ๊ฐ’์„ width๋กœ ์ง€์ •ํ–ˆ์œผ๋ฏ€๋กœ ๋ถ€๋ชจ ์š”์†Œ๋ฅผ ๋„˜์น˜์ง€ ์•Š๋Š”๋‹ค

๐Ÿ’ก width ์†์„ฑ์„ ๋ช…์‹œํ•˜์ง€ ์•Š์œผ๋ฉด auto ํ‚ค์›Œ๋“œ๊ฐ€ ๊ธฐ๋ณธ๊ฐ’์ด ๋œ๋‹ค.

 

  • auto ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ํ•ด๋‹น ์—˜๋ฆฌ๋จผํŠธ์˜ width ์†์„ฑ๊ฐ’์„ ์ž๋™์œผ๋กœ ๊ณ„์‚ฐํ•œ๋‹ค.
  • ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ€์šฉ ๋„ˆ๋น„์—์„œ margin ํฌ๊ธฐ๋ฅผ ์ œ์™ธํ•œ ๋„ˆ๋น„๋ฅผ width ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
    • ๋”ฐ๋ผ์„œ p ์š”์†Œ์˜ ๋„ˆ๋น„๋Š” 200px(width) - 20px(margin) = 180px ๋กœ ๊ณ„์‚ฐ๋œ๋‹ค
    • width: calc(100% - 10px * 2) ์†์„ฑ์„ ์ ์šฉํ•œ ๊ฒƒ๊ณผ ๋™์ผํ•˜๋‹ค

 

min-content


section {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
} /* ๋ถ€๋ชจ */

p {
  width: min-content;
  background: Khaki;
  margin: 10px;
} /* ์ž์‹ */

 

non-CJK
CJK

  • min-content๋Š” ์—˜๋ฆฌ๋จผํŠธ์˜ ์ฝ˜ํ…์ธ ์— ์˜ํ•ด width ์†์„ฑ๊ฐ’์ด ๊ฒฐ์ •๋œ๋‹ค.
  • ์ฃผ๋กœ ์—˜๋ฆฌ๋จผํŠธ์˜ ๋„ˆ๋น„๋ฅผ ์ตœ๋Œ€ํ•œ ์ค„์ด๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์—˜๋ฆฌ๋จผํŠธ์˜ ์ฝ˜ํ…์ธ ๊ฐ€ ํ…์ŠคํŠธ ํ˜•์‹์ด๋ผ๋ฉด ์ค‘๋‹จ์ ์— ์˜ํ•ด ๋ถ„๋ฆฌ๋œ ๊ฐ€์žฅ ๊ธด ๋‹จ์–ด์˜ ๊ธธ์ด๊ฐ€ ์ตœ์†Œ ๋„ˆ๋น„๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค.
    • non-CJK(์˜์–ด ๋“ฑ)๋Š” ๊ฐ€์žฅ ๊ธด ๋‹จ์–ด๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ตœ์†Œ ๋„ˆ๋น„๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค(์œ„ ์˜ˆ์‹œ์—์„œ consectetur)
    • CJK๋Š” ํ•œ ๊ธ€์ž(์Œ์ ˆ)๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ตœ์†Œ ๋„ˆ๋น„๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.

 

์•„๋ž˜๋Š” word-break ์†์„ฑ์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š” ์ค‘๋‹จ์  ์ •๋ฆฌํ‘œ. ์œ„ ์˜ˆ์‹œ์—” ๋ช…์‹œํ•˜์ง€ ์•Š์•˜์œผ๋ฏ€๋กœ normal์ด ์ ์šฉ๋œ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์€ ์ค„๋ฐ”๊ฟˆ ์ œ์–ด ์†์„ฑ ํฌ์ŠคํŒ… ์ฐธ๊ณ . 

  normal (๊ธฐ๋ณธ๊ฐ’) break-all keep-all (CJK๋งŒ ํ•ด๋‹น)
non-CJK ๋„์–ด์“ฐ๊ธฐ, - (ํ•˜์ดํ”ˆ) ์Œ์ ˆ ๋„์–ด์“ฐ๊ธฐ, - (ํ•˜์ดํ”ˆ)
CJK ์Œ์ ˆ ์Œ์ ˆ ๋„์–ด์“ฐ๊ธฐ, - (ํ•˜์ดํ”ˆ),
๊ทธ ์™ธ ๊ธฐํ˜ธ

 

max-content


section {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
} /* ๋ถ€๋ชจ */

p {
  width: max-content;
  background: Khaki;
  margin: 10px;
} /* ์ž์‹ */

 

non-CJK
CJK

  • max-content ์—ญ์‹œ ์—˜๋ฆฌ๋จผํŠธ์˜ ์ฝ˜ํ…์ธ ์— ์˜ํ•ด width ์†์„ฑ๊ฐ’์ด ๊ฒฐ์ •๋œ๋‹ค.
  • min-content ์™€ ๋ฐ˜๋Œ€๋กœ ์—˜๋ฆฌ๋จผํŠธ์˜ ๋„ˆ๋น„๋ฅผ ์ตœ๋Œ€ํ•œ ๋Š˜๋ฆฌ๊ณ  ์‹ถ์„ ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค.
  • ์—˜๋ฆฌ๋จผํŠธ์˜ ์ฝ˜ํ…์ธ ๊ฐ€ ํ…์ŠคํŠธ ํ˜•์‹์ด๋ผ๋ฉด ์ค‘๋‹จ์ ๊ณผ ์ƒ๊ด€์—†์ด ํ•œ ๋ฌธ๋‹จ์˜ ๊ธธ์ด๊ฐ€ ์ตœ๋Œ€ ๋„ˆ๋น„๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค.
  • max-content๋Š” ํ…์ŠคํŠธ ๊ธธ์ด ๋งŒํผ๋งŒ ๋ฐฐ๊ฒฝ์ƒ‰์„ ์ ์šฉํ•  ๋•Œ ์œ ์šฉํ•˜๋‹ค.

 

fit-content โญ๏ธ


section {
  width: 200px;
  height: 200px;
  border: 1px solid gray;
} /* ๋ถ€๋ชจ */

p {
  width: fit-content;
  background: Khaki;
  margin: 10px;
} /* ์ž์‹ */

 

๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ(section)๊ฐ€ 200px ์ผ ๋•Œ
๋ถ€๋ชจ ์—˜๋ฆฌ๋จผํŠธ(section)๊ฐ€ 400px ์ผ ๋•Œ

  • fit-content๋Š” max-content์™€ auto๋ฅผ ํ•ฉ์นœ ํ•˜์ด๋ธŒ๋ฆฌ๋“œ ๋ชจ๋“œ์ฒ˜๋Ÿผ ์ž‘๋™ํ•œ๋‹ค
  • ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ€์šฉ ๋„ˆ๋น„๊ฐ€ ๋ถ€์กฑํ•˜์ง€ ์•Š์œผ๋ฉด, ์ฝ˜ํ…์ธ ์˜ ์ตœ๋Œ€ ๋„ˆ๋น„๋ฅผ width ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค
    width: max-content ์†์„ฑ์ฒ˜๋Ÿผ ์ž‘๋™
  • ๋ถ€๋ชจ ์š”์†Œ์˜ ๊ฐ€์šฉ ๋„ˆ๋น„๊ฐ€ ๋ถ€์กฑํ•˜๋‹ค๋ฉด, ๊ฐ€์šฉ ๋„ˆ๋น„ - margin ๋„ˆ๋น„๋ฅผ width ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.
    width: auto ์†์„ฑ์ฒ˜๋Ÿผ ์ž‘๋™

 

์ฝ”๋“œํŽœ


See the Pen CSS - width ์†์„ฑ ๋งค์ปค๋‹ˆ์ฆ˜ by ColorFilter (@colorfilter) on CodePen.

 

 

๋ ˆํผ๋Ÿฐ์Šค


 


๊ธ€ ์ˆ˜์ •์‚ฌํ•ญ์€ ๋…ธ์…˜ ํŽ˜์ด์ง€์— ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”
๋ฐ˜์‘ํ˜•