step08. pseudo element
<style>
/* 가상요소 선택자
존재하지 않는데 존재하는 것으로 가정*/
p:first-letter{
font-weight: bold;
color: red;
}
#one:first-line{
background-color: yellow;
}
.quote:before{
content:"'";
color: red;
}
.quote:after{
content:"'";
color: blue;
}
</style>
</head>
<body>
<h1>Pseudo Element (가상요소) 선택자 활용</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At minima, adipisci sed. Quas animi ipsum rem veritatis ea impedit voluptas natus, tempore laborum necessitatibus quo cum. Iure voluptatem, cum sunt.</p>
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim optio illo, dolorum ducimus veniam saepe placeat aliquid temporibus corrupti doloribus quas nobis quo quam incidunt, at amet, harum iusto voluptatem.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis consequatur tempora id suscipit voluptates, culpa perspiciatis voluptatum consectetur soluta. Illo nemo ad cum repellat voluptas maxime alias, incidunt tempore fugit.</p>
<p class="quote">천리길도 한걸음 부터</p>
<p class="quote">열심히 공부하자</p>
<p class="quote">어쩌구.. 저쩌구...</p>
</body>- pseudo class에 이어 pseudo element(가상 요소) 도 있다.
- first-letter : 글자 그대로 첫 글자에 해당하는 css이다.
- first-line : 글자 그대로 첫 줄에 해당하는 css이다.
- before : 해당 객체의 content의 앞 부분에 해당하는 css이다. content를 끼워 넣을 수도 있다.
- after : 해당 객체의 content 뒷 부분에 해당하는 css이다. content를 끼워 넣을 수도 있다.
'뒷북 정리 (국비 교육) > css' 카테고리의 다른 글
| [css] step10. display (0) | 2021.12.13 |
|---|---|
| [css] step09. float (0) | 2021.12.13 |
| [css] step07. position (0) | 2021.12.13 |
| [css] step06. pseudo class (0) | 2021.12.13 |
| [css] step03~05. margin / padding / border (0) | 2021.12.13 |
댓글