728x90
::first-letter
::first-letter은 첫 글자를 선택하는 선택자이다.
<style>
.txt{font-size:30px; margin: 30px; text-align: center; width:100%; color:#444;}
.txt::first-letter{font-size:50px; color:hotpink}
</style>
<body>
<p class="txt">안녕하세요</p>
</body>
이렇게 첫글자만 적용이 되는 모습을 볼 수 있다.
::first-line
::first-line은 첫 줄을 선택하는 선택자이다.
<style>
.txt{font-size:20px; text-align: center; width:100%; color:#444}
.txt::first-line{color:chocolate; font-weight: bold;}
</style>
<body>
<p class="txt">Levup의 티스토리에 오신걸 환영합니다<br>
CSS 선택자에 대하여 공부해보겠습니다<br>
첫 글자 선택자와 첫 줄 선택자에 대한 내용입니다.</p>
</body>
이렇게 첫 줄에 적용된 모습을 볼 수 있다.
728x90
'CSS' 카테고리의 다른 글
| 반응형 웹 디자인의 9가지 기본 원칙 (0) | 2020.11.02 |
|---|---|
| [CSS] 반응형 박스설정을 위한 display : flex (0) | 2020.08.10 |
| [CSS] 반응형을 위한 미디어 쿼리(media query) (0) | 2020.08.07 |
| [CSS] Animation 동작효과 주기 (0) | 2020.08.06 |
| [CSS Selector] ::after ::before 가상요소 선택하기 (0) | 2020.08.05 |
