<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test014.html</title>
<style type="text/css">
/* p에속한 전체문단 */
p {font-size: 9pt; color: red;}
/* 첫째줄.. first-line → 브라우저 기준.. */
p:first-line {font-size: 25px; color: blue;}
</style>
</head>
<body>
<div>
<h1>가상 요소 적용 실습</h1>
<hr>
</div>
<p>문단 태그를 활용하여 내용을 작성하고 있다.
이 태그 내부에 기술된 내용은 엘리먼트 선택자의 영향을 받고 있는 상황이다.
하지만, 이 영역 안에도 상황에 따른 스타일 적용이 가능하다.
첫라인의 텍스트는 글자색이 파란색이고 글꼴 크기는 25pt이다.
둘째 라인의 텍스트부터는 글자색이 빨간색이고, 글꼴 크기는 9pt가 된다...</p>
</body>
</html>첫째 라인의 텍스트를 꾸며주는
『p:first-line style』 을 적용시켜보았어요 ㅎㅎ
728x90
'WEB Archive' 카테고리의 다른 글
| [HTML] CSS - 동적 선택자 적용실습(hover, active) (0) | 2024.08.20 |
|---|---|
| [HTML] CSS - 한 화면에 두 가지 형태의 링크 설정해보기 (0) | 2024.08.20 |
| [HTML] CSS - 기타 다른 속성들 (0) | 2024.08.20 |
| [HTML] CSS - 글자 간격 지정 (0) | 2024.08.20 |
| [HTML] CSS - 수직 정렬 : vertical-align (0) | 2024.08.20 |
댓글