๋ฐ์ํ
์ธ๋ผ์ธ ์์์ ๊ฒฝ์ฐ, ๋ธ๋ก ์์์ ์์ฑ ๊ฐ์ ์ ์ฉํ ์ ์๊ธฐ ๋๋ฌธ์,
์ธ๋ผ์ธ ์์๋ฅผ ๋ธ๋ก ์์์ฒ๋ผ ์ฌ์ฉํ๊ณ ์ถ์ ๊ฒฝ์ฐ๊ฐ ์กด์ฌํ ์ ์๋ค
์ฐธ๊ณ ๋ก css ์ ํ์์์
.box::before {
content : "";
display : block;
width : 30px;
background-color: royalblue;
}
๊ฐ์ ๊ฒฝ์ฐ์๋
::after, ::before ๋ ์ธ๋ผ์ธ ์์์ด๊ธฐ์ display ์์ฑ ๊ฐ์ block ์ผ๋ก ์ค๋ค๋ฉด ๋ธ๋ก ์์์ฒ๋ผ ์ฌ์ฉํ ์ ์๋ค
๊ฒฐ๋ก ,
css ์์๋ inline ์์์ block ๊ตฌ์กฐ์ ๋ํ ํน์ง์ ์ ์๊ณ ์์ด์ผ ํ๋ค
๋ํ์ ์ธ inline ์์๋ span , a ํ๊ทธ์ด๋ฉฐ
block ์ ๋ํ์ ์ธ ์์๋ div
ํ๊ทธ๋ฅผ ์์ง๋ง์
๋ฐ์ํ
'๐๏ธ์ํํธ์จ์ด > ๐ฌHTML & CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[css3] text-overflow - ๋์น๋ ํ ์คํธ ๋ธ๋ฌ ์ฒ๋ฆฌํ๊ธฐ (0) | 2023.01.26 |
---|---|
์์, ํ์, ์ธ์ ํ์ , ์ผ๋ฐ ํ์ ์ ํ์ (0) | 2022.10.03 |
ํฌ๋กฌ๋ธ๋ผ์ฐ์ ์์ ์ ๊ณตํ๋ ๊ธฐ๋ณธ ์ฌ๋ฐฑ ์ ๊ฑฐํ๊ธฐ (0) | 2022.10.02 |
์จ๋ ์์ธก ํ์ด์ง ๋ง๋ค๊ธฐ(๊ณต๊ณต API ํ์ฉ,json) (0) | 2022.09.29 |
[html/css] ์คํ๋ฅดํ์ฝ๋ฉ 1์ฃผ์ฐจ:์น๊ฐ๋ฐ (0) | 2022.09.20 |