๊ด€๋ฆฌ ๋ฉ”๋‰ด

C-log

๐Ÿ’…Decorate from CSS : ๋‹ค์–‘ํ•œ ์„ ํƒ์ž๋“ค #7 ๋ณธ๋ฌธ

๐Ÿ’…CSS/โšกver.0

๐Ÿ’…Decorate from CSS : ๋‹ค์–‘ํ•œ ์„ ํƒ์ž๋“ค #7

4:Bee 2024. 2. 13. 18:24
728x90

*ํ•ด๋‹น ํฌ์ŠคํŒ…์€ CSS Diner ๊ฒŒ์ž„์„ ํ†ตํ•ด ๋‹ค์–‘ํ•œ ์„ ํƒ์ž๋“ค์„ ์—ฐ์Šตํ•˜๋Š” ๊ฒŒ์ž„์ด๋‹ค. ๊ฐ•์˜์—์„œ๋„ ํ•ด๋‹น ๊ฒŒ์ž„์„ ํ•ด์„คํ•ด์ฃผ๋‹ˆ ํ•œ๋ฒˆ ํ’€์–ด๋ณด๊ธธ ๊ถŒ์žฅํ•œ๋‹ค.

7๋ฒˆ ๋ฌธ์ œ๊ฐ€ ์ž˜ ํ’€๋ฆฌ์ง€ ์•Š์•˜๋Š”๋‹ค. ์ฝ”๋“œ๋Š” ์•„๋ž˜์™€ ๊ฐ™๋‹ค. 

  <div class="table">
    <apple />
    <apple class="small" />
    <bento>
      <orange class="small" />
    </bento>
    <plate>
      <orange />
    </plate>
    <plate>
      <orange class="small" />
    </plate>
  </div>

ํ•ด๋‹น ์ฝ”๋“œ์—์„œ bento ํƒœ๊ทธ ์•ˆ์— ์žˆ๋Š” orange๋ฅผ ์„ ํƒํ•ด์•ผ ํ•œ๋‹ค. ๊ทธ๋Ÿฌ๊ธฐ ์œ„ํ•ด์„œ class table์ธ div๋กœ ์ง„์ž…ํ•˜๊ณ  bentoํƒœ๊ทธ๋กœ ์ง„์ž… ํ›„ class small์ธ orange์— ์ง„์ž…์„ ํ•ด์•ผํ•œ๋‹ค. ์ž์„ธํžˆ ๋ณด๋ฉด class small์„ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๊ฒƒ์€ orange๋ฟ๋งŒ ์•„๋‹ˆ๋ผ apple๋„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ๋ชจ๋“  orange๋ฅผ ์„ ํƒํ•˜๊ณ  ๊ทธ ์ค‘ .small์„ ์ง€์ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

์ฆ‰, oragne.small ์ด๋ ‡๊ฒŒ ๋ง์ด๋‹ค.

728x90
Comments