๐
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