Skip to content

Latest commit

ย 

History

History
320 lines (249 loc) ยท 14.1 KB

step37.md

File metadata and controls

320 lines (249 loc) ยท 14.1 KB

๋ฌธ์„œ ๋ชฉ๋ก์œผ๋กœ ๋Œ์•„๊ฐ€๊ธฐ

STEP 37

๐Ÿ’ก์งˆ์˜์‘๋‹ต์€ https://github.com/pul8219/TIL Issues ํƒญ์˜ ์•Œ๋งž์€ step ์ด์Šˆ์•ˆ์— ๋‚จ๊ฒจ์ฃผ์„ธ์š”. โžก๏ธ Issueํƒญ์œผ๋กœ ์ด๋™

๋ณด์ถฉ ํ•„์š”

๋ชฉ์ฐจ

FLOAT

left | right | none | inherit

  • NEW BFC: ์ƒˆ๋กœ์šด BFC๋ฅผ ํ˜•์„ฑํ•œ๋‹ค.
  • FLOAT OVER NORMAL FLOW: NORMAL FLOW ์œ„์— ๊ทธ๋ ค์ง„๋‹ค.
  • TEXT, INLINE GUARD
  • LINE BOX
    • FLOAT๋Š” BFC, IFC๋“ฑ์˜ ๊ณต์‹์œผ๋กœ ๊ทธ๋ ค์ง€์ง€ ์•Š๊ณ , LINE BOX๋ผ๋Š” ๊ณต์‹์œผ๋กœ ๊ทธ๋ฆผ์ด ๊ทธ๋ ค์ง„๋‹ค. (์ฐธ๊ณ  - ์ €๋ฒˆ ์‹œ๊ฐ„์— ๋ฐฐ์› ๋“ฏ NORMAL FLOW๋Š” BFC, IFC, relative position ์›๋ฆฌ๋กœ ๊ทธ๋ ค์ง„๋‹ค.)

์˜ˆ์ œ1: NEW BFC + FLOAT

<div style="width:500px">
  <div style="height:50px;background:red"></div>
  <div
    style="width:200px;height:150px;float:left;background:rgba(0,255,0,0.5)"
  ></div>
  <div style="height:50px;background:skyblue"></div>
</div>

  • BFC๊ฐ€ ์‹œ์ž‘๋˜๊ณ  ๋นจ๊ฐ„ ๋ฐ•์Šค๊ฐ€ ๊ทธ๋ ค์ง„๋‹ค.
  • FLOAT ์š”์†Œ๋ฅผ ๋งŒ๋‚˜๋ฉด ์ƒˆ๋กœ์šด BFC ์˜์—ญ์ด ์ƒ์„ฑ๋œ๋‹ค.
  • skyblue์ƒ‰ ๋ฐ•์Šค๋Š” ๋ฐ”๋กœ ์œ„์—์„œ ๋งŒ๋“ค์–ด์ง„ BFC ์˜์—ญ ์•ˆ์—์„œ NORMAL FLOW๋กœ ๊ทธ๋ฆผ์ด ๊ทธ๋ ค์ง„๋‹ค.
  • FLOAT ์š”์†Œ์ธ ์ดˆ๋ก์ƒ‰๋ฐ•์Šค๋Š” ๊ฐ€์žฅ ๋ฐ”๊นฅ์— ๋– ์žˆ๋‹ค.
  • FLOAT ์š”์†Œ๋กœ ์ธํ•ด ๋งŒ๋“ค์–ด์ง„ ์ƒˆ๋กœ์šด BFC์˜ ํฌ๊ธฐ๋Š” FLOAT ์˜์—ญ ์ „์ฒด + INLINE ์˜์—ญ ์ „์ฒด๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ๊ณต๊ฐ„์ด๋‹ค.(?)
  • FLOAT๋Š” ์ถ”๊ฐ€์ ์ธ BFC ์˜์—ญ์„ ๋งŒ๋“œ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.
  • BFC, IFC ์˜์—ญ์ด ๋งŽ์•„์งˆ ์ˆ˜๋ก GEOMETRY ๊ณ„์‚ฐ์ด ๋ณต์žกํ•ด์ง„๋‹ค.

์˜ˆ์ œ2: TEXT, INLINE GUARD

FLOAT๋Š” INLINE์š”์†Œ์— ๋Œ€ํ•ด์„œ (๋ชป ๊ทธ๋ ค์ง€๊ฒŒ ํ•˜๋Š”) ๊ฐ€๋“œ๋กœ ๋™์ž‘ํ•œ๋‹ค.

<div style="width:500px">
  <div style="height:50px;background:red"></div>
  <div
    style="width:200px;height:150px;float:left;background:rgba(0,255,0,0.5)"
  ></div>
  HELLO
  <div style="height:50px;background:skyblue">WORLD</div>
  !!
</div>

  • HELLO ์ดˆ๋ก์ƒ‰ ๋ฐ•์Šค ๋’ค์— ๊ทธ๋ ค์ ธ์•ผํ•  ๊ฒƒ์œผ๋กœ ๊ธฐ๋Œ€๋˜๊ฒ ์ง€๋งŒ ์•„๋‹ˆ๋‹ค.
  • FLOAT ์š”์†Œ๊ฐ€ INLINE์š”์†Œ์— GUARD์—ญํ• ์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— HELLO๋Š” FLOAT ๋ฐ”๊นฅ์— ๊ทธ๋ ค์ง„๋‹ค.
  • FLOAT ์š”์†Œ๋Š” INLINE์š”์†Œ์—๋งŒ ๊ฐ€๋“œ๋กœ ์ž‘๋™ํ•œ๋‹ค.
  • BLOCK์š”์†Œ์—๋Š” ๊ฐ€๋“œ๋กœ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋”ฐ๋ผ์„œ skyblue์ƒ‰ ๋ฐ•์Šค๋Š” ๊ทธ๋Œ€๋กœ ๊ทธ๋ ค์ง„๋‹ค.
  • ๋˜ํ•œ DOM์˜ ํฌํ•จ๊ด€๊ณ„์— ๊ด€๊ณ„์—†์ด INLINE์š”์†Œ๋Š” ๊ฐ€๋“œ๋œ๋‹ค. ๋”ฐ๋ผ์„œ WORLD๋ผ๋Š” ๋‹จ์–ด๋Š” DOM๊ตฌ์กฐ์ƒ skyblue์ƒ‰ ๋ฐ•์Šค ์•ˆ์— ์žˆ์ง€๋งŒ, FLOAT ๋ฐ”๊นฅ์— ๊ทธ๋ ค์ง€๊ฒŒ๋œ๋‹ค.

์˜ˆ์ œ3: LINE BOX

FLOAT๊ฐ€ ์ง€์˜ฅ์ด๋ผ๊ณ  ๋Š๋ผ๋Š” ์ด์œ ๋Š” LINE BOX์— ๋Œ€ํ•œ ์ •ํ™•ํ•œ ์ดํ•ด๊ฐ€ ์—†์–ด์„œ์ด๋‹ค.

<head>
  <style>
    .left {
      float: left;
      background: rgba(0, 255, 0, 0.5);
    }
    .right {
      float: right;
      background: rgba(255, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div style="width:500px">
    <div class="left" style="width:200px;height:150px">1</div>
    <div class="right" style="width:50px;height:150px">2</div>
    <div class="right" style="width:50px;height:100px">3</div>
    <div class="left" style="width:150px;height:50px">4</div>
    <div class="right" style="width:150px;height:70px">5</div>
    <div class="left" style="width:150px;height:50px">6</div>
    <div class="left" style="width:150px;height:50px">7</div>
    <div style="height:30px;background:skyblue">ABC</div>
  </div>
</body>

๊ทธ๋ฆฌ๋Š” ๊ณผ์ •

  • ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋“ฏ FLOAT์š”์†Œ๋Š” ์ƒˆ๋กœ์šด BFC ์˜์—ญ์„ ์ƒ์„ฑํ•œ๋‹ค.
  • ๊ทธ BFC ์˜์—ญ์€ (์ „ ์‹œ๊ฐ„์— ๋ฐฐ์› ๋“ฏ์ด) ๋ถ€๋ชจ์˜ ๊ฐ€๋กœ๊ธธ์ด(width)๋งŒํผ์„ ๋‹ค ๋จน๋Š”๋‹ค.
  • ์ด๋งŒํผ์˜ BFC ์˜์—ญ์ด ์ฒซ FLOAT์š”์†Œ๋ฅผ ๊ทธ๋ฆด ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์ธ LINE BOX1์ด ๋œ๋‹ค. float: left์ด๋‹ˆ๊นŒ ํ•ด๋‹น LINE BOX์˜ ๊ฐ€์žฅ ์™ผ์ชฝ์— FLOAT ์š”์†Œ๊ฐ€ ๊ทธ๋ ค์ง„๋‹ค.

  • ๋‘๋ฒˆ์งธ DIV๋Š” ์ฒซ๋ฒˆ์งธ FLOAT ์š”์†Œ๋ฅผ ์ œ์™ธํ•œ ๊ณต๊ฐ„์ด LINE BOX2๊ฐ€ ๋œ๋‹ค. ์ด LINE BOX์˜ ๊ฐ€์žฅ ์˜ค๋ฅธ์ชฝ์— ๊ทธ๋ ค์ง„๋‹ค.(float: right์ด๋‹ˆ๊นŒ) (DIV๋ฅผ ๊ทธ๋ฆฌ๊ธฐ ์ „์— ๊ทธ๋ ค์งˆ ์ˆ˜ ์žˆ๋Š” LINE BOX๊ฐ€ ์ด๋ฏธ ๊ณ„์‚ฐ๋˜์–ด์žˆ๋‹ค.)

  • LINE BOX๋Š” ์„ธ๋กœํฌ๊ธฐ๋„ ๊ณ ๋ คํ•œ๋‹ค. ์„ธ๋ฒˆ์งธ DIV ๋ฐ•์Šค๊ฐ€ ํ•„์š”ํ•œ HEIGHT๋Š” 100PX๋‹ˆ๊นŒ LINE BOX๋Š” ๊ทธ๋ฆผ๊ณผ ๊ฐ™์ด ๊ณ„์‚ฐ๋œ๋‹ค. ๊ทธ LINE BOX๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๊ฐ€์žฅ ์˜ค๋ฅธ์ชฝ์— ์„ธ๋ฒˆ์งธ DIV ๋ฐ•์Šค๊ฐ€ ๊ทธ๋ ค์ง„๋‹ค.

  • ๋‹ค์„ฏ๋ฒˆ์งธ DIV ๋ฐ•์Šค๋Š” ๊ณต๊ฐ„์ด ๋ถ€์กฑํ•ด ๋„ค๋ฒˆ์งธ DIV๋ฐ•์Šค ์˜ค๋ฅธ์ชฝ์— ๊ทธ๋ ค์งˆ ์ˆ˜ ์—†๋‹ค. ์ด๋Ÿด ๊ฒฝ์šฐ, ์ง์ „ LINE BOX(4)์˜ ๋ฐ”๋‹ฅ์„ (BASE LINE)์„ ๊ธฐ์ค€์œผ๋กœ ์•„๋ž˜ ๋‚จ์€ ๊ณต๊ฐ„์˜ ๊ฐ€์žฅ ์™ผ์ชฝ, ์˜ค๋ฅธ์ชฝ๋ฅผ ๋”ฐ์ ธ์„œ ์ƒˆ๋กœ์šด LINE BOX ์˜์—ญ์ด ๊ณ„์‚ฐ๋œ๋‹ค. ๋‹ค์„ฏ๋ฒˆ์งธ DIV ๋ฐ•์Šค๋Š” ์ด LINE BOX์˜ ๊ฐ€์žฅ ์˜ค๋ฅธ์ชฝ์— ๋ถ™์—ฌ ๊ทธ๋ ค์ง„๋‹ค.(float: right๋‹ˆ๊นŒ)
  • LINE BOX 5์˜ ์ž…์žฅ์—์„œ ๋ฐ•์Šค3 ์•„๋ž˜ ์žˆ๋Š” ๋นˆ ๊ณต๊ฐ„์€ ๋ฌด์‹œ๋œ๋‹ค.(5๋ฒˆ ๋ฐ•์Šค๊ฐ€ LINE BOX์˜ ๊ฐ€์žฅ ์˜ค๋ฅธ์ชฝ์— ๋ฐฐ์น˜๋œ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ. ๋” ์˜ค๋ฅธ์ชฝ์€ ์žˆ์„ ์ˆ˜ ์—†๋‹ค.)

  • ๋ฐ•์Šค7์„ ๊ทธ๋ฆด ๋•Œ๋Š” ์ง์ „์˜ BASE LINE์ด ๋‚ด๋ ค์˜ค๋‹ค ๋ฐ•์Šค2์˜ BASE LINE์— ๊ฑธ๋ฆฐ๋‹ค.(๋ฐ•์Šค6์˜ ๋ฐ”๋‹ฅ๋ณด๋‹ค ๋จผ์ € ๋“ฑ์žฅ)

  • ๋งˆ์ง€๋ง‰ DIV ๋ฐ•์Šค๋Š” float์ด ์•„๋‹ˆ๋‹ค. (ABC) ๋งจ์ฒ˜์Œ float์š”์†Œ๊ฐ€ ์ƒ์„ฑํ•œ BFC ์˜์—ญ์œ„์น˜์—์„œ NORMAL FLOW๋กœ ๊ทธ๋ ค์ง„๋‹ค. ์•ˆ์— ์žˆ๋Š” ABC๋Š” ํ…์ŠคํŠธ ์ฆ‰ ์ธ๋ผ์ธ์š”์†Œ์ด๋ฏ€๋กœ ๊ฐ€๋“œ๋ฅผ ์ ์šฉ๋ฐ›์•„ FLOAT ์š”์†Œ์˜ ๋ฐ”๊นฅ ์ค‘ '์‚ด์•„๋‚จ์€' ์˜์—ญ์— ๊ทธ๋ ค์ง€๊ฒŒ๋œ๋‹ค.

  • ๊ทœ์น™

    • LINE BOX๋Š” FLOAT์š”์†Œ๋งŒ ์‹ ๊ฒฝ์“ด๋‹ค. LINE BOX๊ฐ€ ๊ณ„์‚ฐ๋ ๋•Œ๋„ FLOAT์š”์†Œ๋งŒ ๊ณ ๋ คํ•œ๋‹ค.
    • LEFT๋ณด๋‹ค ๋” ์™ผ์ชฝ์— ๊ทธ๋ ค์ง€์ง€ ์•Š๊ณ , RIGHT๋ณด๋‹ค ๋” ์˜ค๋ฅธ์ชฝ์— ๊ทธ๋ ค์ง€์ง€ ์•Š๋Š”๋‹ค.
    • ๋นˆ ๊ณต๊ฐ„์€ LEFT์™€ RIGHT ์‚ฌ์ด์—๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.

์‹คํ–‰๊ฒฐ๊ณผ

์˜ˆ์ œ4: LINE BOX + INLINE GUARD

<head>
  <style>
    .left {
      float: left;
      background: rgba(0, 255, 0, 0.5);
    }
    .right {
      float: right;
      background: rgba(255, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div style="width:500px">
    <div class="left" style="width:200px;height:150px">1</div>
    <div class="right" style="width:50px;height:150px">2</div>
    <div class="right" style="width:50px;height:100px">3</div>
    <div class="left" style="width:150px;height:50px">4</div>
    <div class="right" style="width:150px;height:70px">5</div>
    <div class="left" style="width:150px;height:50px">6</div>
    <div class="left" style="width:150px;height:50px">7</div>
    <div style="height:30px;background:skyblue">
      ABC1 ABC2 ABC3 ABC4 ABC5 ABC6 ABC7 ABC8
      <!-- โœ๏ธ ์˜ˆ์ œ3์—์„œ ์ˆ˜์ •ํ•œ ๋ถ€๋ถ„(์ด๋ ‡๊ฒŒ ๋ฐ”๋€” ๊ฒฝ์šฐ, ์–ด๋–ป๊ฒŒ ๊ทธ๋ ค์งˆ์ง€ ๊ฒฐ๊ณผ๋ฅผ ์˜ˆ์ƒํ•ด๋ณด์ž) -->
    </div>
  </div>
</body>

์‹คํ–‰๊ฒฐ๊ณผ

'์‚ด์•„๋‚จ์€' ๊ณต๊ฐ„์— ๊ธ€์ž๋“ค์ด ์™์™์™ ๋“ค์–ด๊ฐ„๋‹ค. LINE BOX๋ฅผ ์ดํ•ดํ•˜๋ฉด ๊ธ€์ž๊ฐ€ (์„ธ๋กœ๋กœ ๊ธด) ๊ณก์„ ์˜ ๋ฑ€๋ชจ์–‘์ฒ˜๋Ÿผ ๋‚˜์˜ค๊ฒŒ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ๋„ ๊ฐ€๋Šฅํ•˜๋‹ค.

OVERFLOW

CSS2.1 VISUAL FORMATTING MODEL

VISIBLE | HIDDEN | SCROLL | INHERIT | AUTO

  • AUTO: ๋‚ด๋ถ€์˜ ํฌ๊ธฐ๊ฐ€ ์ปค์ง€๋ฉด ๋ถ€๋ชจ๋„ ์ปค์ง„๋‹ค. GEOMETRY์˜ ํฌ๊ธฐ๊ฐ€ ์ง์ ‘ ๋ณ€ํ•œ๋‹ค.
  • VISIBLE: ๋ณด์ผ ๋•Œ๊นŒ์ง€ ์ปค์ง„๋‹ค. ์ผ๋ฐ˜์ ์ธ ๋ธŒ๋ผ์šฐ์ €์—์„œ๋Š” VISIBLE = AUTO ๊ฐ™์€ ์˜๋ฏธ์ด๋‹ค.
  • SCROLL: ๋‚ด GEOMETRY ๋„˜์–ด๊ฐ€๋Š” ์ปจํ…์ธ ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์Šคํฌ๋กค๋ฐ”๋ฅผ ๋งŒ๋“ ๋‹ค.
  • HIDDEN: ๋‚ด GEOMETRY ๋„˜์–ด๊ฐ€๋Š” ์ปจํ…์ธ ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์•ˆ๋ณด์ด๊ฒŒ ์ž˜๋ผ๋ฒ„๋ฆฐ๋‹ค.

OVERFLOW๊ฐ€ HIDDEN, SCROLL์ผ ๋•Œ

  • NEW BFC: ์ƒˆ๋กœ์šด BFC๋ฅผ ์ฆ‰์‹œ ์ƒ์„ฑํ•œ๋‹ค.
  • FIRST LINE BOX BOUND: ์ฒซ๋ฒˆ์งธ LINE BOX๋ฅผ ์ด์šฉํ•ด BFC ์˜์—ญ์„ ๋งŒ๋“ ๋‹ค.
<head>
  <style>
    .left {
      float: left;
      background: rgba(0, 255, 0, 0.5);
    }
    .right {
      float: right;
      background: rgba(255, 0, 0, 0.5);
    }
  </style>
</head>
<body>
  <div style="width:500px">
    <div class="left" style="width:200px;height:150px">1</div>
    <div class="right" style="width:50px;height:150px">2</div>
    <div class="right" style="width:50px;height:100px">3</div>
    <div class="left" style="width:150px;height:50px">4</div>
    <div class="right" style="width:150px;height:70px">5</div>
    <div class="left" style="width:150px;height:50px">6</div>
    <div class="left" style="width:150px;height:50px">7</div>
    <div style="height:30px;overflow:hidden;background:skyblue">A</div>
    <!-- div8 -->
  </div>
</body>
  • ๋ฐ•์Šค div8์€ ์ฒ˜์Œ float ์š”์†Œ๊ฐ€ ๋งŒ๋“ค์–ด์งˆ ๋•Œ BFC ์˜์—ญ์— ์†ํ•œ ๊ฒƒ ๊ฐ™์œผ๋‚˜, overflow ์†์„ฑ์ด hidden์ด๊ธฐ ๋•Œ๋ฌธ์— ์ƒˆ๋กœ์šด BFC ์˜์—ญ์ด ๋งŒ๋“ค์–ด์ง„๋‹ค.
  • BFC๋Š” ๋ถ€๋ชจ๋งŒํผ width๋ฅผ ๊ฐ–๋Š”๋‹ค๋Š” ์›์น™์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.
  • ๊ทธ๋Ÿฐ๋ฐ overflow๊ฐ€ hidden์ด๋ฉด ์ด ๋ถ€๋ชจ ์˜์—ญ์„ ๊ณ„์‚ฐํ•  ๋•Œ LINE BOX BOUND๋ฅผ ๊ณ„์‚ฐํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์‹คํ–‰๊ฒฐ๊ณผ๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ๋‚˜ํƒ€๋‚œ๋‹ค. (LINEBOX ๋‚จ์€ ๊ณต๊ฐ„์— ๊ทธ๋ ค์ง„ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.)
  • LINE BOX๋ฅผ ์ฒ˜์Œ ๊ณต๋ถ€ํ–ˆ๋˜ ์˜ˆ์ œ3๊ณผ ๋น„๊ตํ•ด๋ณผ ๊ฒƒ
<div style="width:500px">
  <!-- ... -->
  <!-- 1๏ธโƒฃ -->
  <div style="height:30px;overflow:hidden;background:red">A</div>
  <!-- 2๏ธโƒฃ -->
  <div style="height:15px;overflow:hidden;background:orange">B</div>
  <!-- 3๏ธโƒฃ -->
  <div style="height:30px;background:black"></div>
  <!-- 4๏ธโƒฃ -->
  <div style="height:30px;overflow:hidden;background:red">C</div>
  <!-- 5๏ธโƒฃ -->
  <div style="height:20px;overflow:hidden;background:orange">D</div>
  <!-- 6๏ธโƒฃ -->
  <div style="height:30px;background:black"></div>
  <!-- 7๏ธโƒฃ -->
  <div style="overflow:hidden;background:red">E</div>
  <!-- 8๏ธโƒฃ -->
  <div style="height:30px;background:black"></div>
  <!-- 9๏ธโƒฃ -->
  <div style="height:30px;overflow:hidden;background:orange">F</div>
  <!-- 1๏ธโƒฃ0๏ธโƒฃ -->
  <div style="height:30px;background:black"></div>
</div>
  • 1๏ธโƒฃ overflow:hidden์ด๋ผ ์ƒˆ๋กœ์šด BFC ์˜์—ญ์ด ์ƒ์„ฑ๋˜๊ณ , LINE BOX BOUND๋ฅผ ๊ณ„์‚ฐํ•ด ๊ฒฐ๊ณผ์— ๋ณด์ด๋Š” ๊ฒƒ๊ณผ ๊ฐ™์ด ๊ทธ๋ ค์ง„๋‹ค.
  • 2๏ธโƒฃ 1๋ฒˆ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๊ทธ๋ ค์ง„๋‹ค.
  • 3๏ธโƒฃ ์ด DIV๋Š” OVERFLOW:HIDDEN์ด ์•„๋‹ˆ๋‹ค. ์ด ๋ฐ•์Šค๋Š” 2๋ฒˆ์˜ BFC์— ์†Œ์†๋œ DIV๊ฐ€ ๋˜์„œ ๊ฐ€๋กœ๋ฅผ ๋ชจ๋‘ ์ฐจ์ง€ํ•œ๋‹ค. (2๋ฒˆ์˜ BFC๊ฐ€ ํ™•์žฅ๋˜์—ˆ๋‹ค.)
  • 4๏ธโƒฃ 1,2๋ฒˆ๊ณผ ๊ฐ™์€ ๋ฐฉ์‹์œผ๋กœ ๊ทธ๋ ค์ง„๋‹ค.
  • 5๏ธโƒฃ height๊ฐ€ 20px์ธ๋ฐ ์ด ๋ฐ•์Šค๊ฐ€ ๊ทธ๋ ค์งˆ ๊ณต๊ฐ„์ด ์—†๋‹ค.(๋ถ€๋ชจ width๊ฐ€ 0์ธ ์ƒํƒœ. line bound box๋ฅผ ๊ณ„์‚ฐํ–ˆ์ง€๋งŒ ๊ทธ๋ฆด ์ˆ˜ ์—†๋‹ค๋Š” ๊ฑธ ์•Œ์•˜์Œ) ๋”ฐ๋ผ์„œ ์—†์–ด์ง„๋‹ค. ๊ทธ๋ฆผ์ด ๊ทธ๋ ค์ง€์ง„์•Š์ง€๋งŒ BFC ์˜์—ญ์€ height 20px์— ๋งž์ถฐ ์ƒ์„ฑ๋œ๋‹ค.
  • 6๏ธโƒฃ 5๋ฒˆ ๋‹ค์Œ์— ๊ทธ๋ ค์ง„๋‹ค. (5๋ฒˆ์˜ BFC ์˜์—ญ์ด ํ™•์žฅ๋จ)
  • 7๏ธโƒฃ ๊ทธ๋ฆด๊ณณ์ด ์—†์–ด์„œ ๊ทธ๋ ค์ง€์ง€ ์•Š์Œ(BFC ๊ณต๊ฐ„์€ ์ฐจ์ง€) (left๋ฐ–์— ์—†์œผ๋‹ˆ)
  • 8๏ธโƒฃ 7๋ฒˆ ๋‹ค์Œ์— ๊ทธ๋ ค์ง„๋‹ค.
  • 9๏ธโƒฃ line box ๊ฒฝ๊ณ„๊ฐ€ ๋”์ด์ƒ ์—†์œผ๋‹ˆ ์ผ๋ฐ˜์ ์ธ BFC ์ฒ˜๋Ÿผ ๊ทธ๋ ค์ง„๋‹ค.
  • 1๏ธโƒฃ0๏ธโƒฃ 9๋ฒˆ ๋‹ค์Œ์— ๊ทธ๋ ค์ง„๋‹ค.

์˜ค๋Š˜ ๋ฐฐ์šด ๊ฒƒ

  • float์™€ normal flow์˜ ๊ด€๊ณ„
  • float์™€ overflow:hidden์˜ ๊ด€๊ณ„

์œ„ ๊ฒฐ๊ณผ์—์„œ ์™œ (๋งจ์œ„ ์‚ฌ์ด์— ๊ปด์žˆ๋Š”) ๋นจ๊ฐ„ ๋ฐ•์Šค๊ฐ€ ๋Š˜์–ด๋‚˜์ง€ ์•Š์•˜์„๊นŒ?(ABC8๊ณผ ๋‹ค์Œ ๊ทธ๋ฆผ์ด ๊ฒน์น˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ์Œ)

  • ์ปจํ…์ธ ๊ฐ€ ์ปค์„œ BFC ๋ฐ•์Šค๋ฅผ ๋ฐ€์–ด๋‚ผ ๋•Œ visible ์†์„ฑ์ด๋ฉด ๋Š˜์–ด๋‚œ๋‹ค.
  • ๊ทธ๋Ÿฐ๋ฐ line box ๋•Œ๋ฌธ์— guard๊ฐ€ ์ž‘๋™ํ•˜๋ฉด์„œ inline ์š”์†Œ๊ฐ€ ๋ฐ€๋ฆฐ๊ฑฐ๋ผ๋ฉด ๋Š˜์–ด๋‚˜์ง€ ์•Š๋Š”๋‹ค.
  • ABC8์˜ ๊ฒฝ์šฐ ๊ทธ๋ฆผ์ด ๊ทธ๋ ค์ง„๊ฒƒ ๋ฟ์ด์ง€ geometry ์˜์—ญ์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋Š” ๊ฒŒ ์•„๋‹˜(console-element๋กœ๋„ ํ™•์ธ ๊ฐ€๋Šฅ) ์‹ฌ์ง€์–ด ๋‹ค์Œ div๊ฐ€ ABC8์„ ๋ฎ์ง€๋„ ์•Š์•˜๋‹ค

OVERFLOW-X, Y

OVERFLOW MODULE LEVEL3 DRAFT

VISIBLE | HIDDEN | SCROLL | CLIP | AUTO

OVERFLOW๋ฅผ ํ•œ๊บผ๋ฒˆ์— ๊ด€๋ฆฌํ•˜์ง€ ์•Š๊ณ , OVERFLOW X์ถ•, Y์ถ• ๋”ฐ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ์ŠคํŽ™์ด๋‹ค. RECOMMEND ์˜€๋‹ค๊ฐ€ DRAFT(๊ถŒ๊ณ )๋กœ ๋ณ€๊ฒฝ๋๋‹ค. (why? ์ƒˆ๋กœ์šด CSS ์ŠคํŽ™์ด ๋‚˜์˜ค๋ฉด์„œ ์˜ํ–ฅ์„ ๋ผ์ณค์Œ. ๊ทธ๋ž˜์„œ DRAFT๋กœ ๋‚ด๋ ค๊ฐ)

TEXT-OVERFLOW

CSS2.1 UI MODULE LEVEL3

CLIP | ELLIPSIS

  • ELLIPSIS: TEXT์— ๋Œ€ํ•ด์„œ ... ํ‘œ์‹œํ•ด์คŒ

๋งˆ๋ฌด๋ฆฌ

์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๊ฒƒ์ด ๊ณ ์ „ ๋ ˆ์ด์•„์›ƒ์ด๋‹ค. ๊ฑฐ์˜ ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ œ๊ณตํ•˜๋ฏ€๋กœ ๊ธฐ๋ณธ์ด ๋˜๋Š” ๊ฐœ๋…์ด๋‹ค. ๋งŽ์ด ์—ฐ์Šตํ•  ๊ฒƒ!

Comment

References

ํŒ€์›๋“ค ๊ฒฐ๊ณผ๋ฌผ