반응형
문장 앞에 특적한 문구를 반복하고 싶으면 content 속성을 사용합니다.
모든 문장 앞에 Hello를 입력하고 싶다면 아래 코드와 같이 html / css 코드를 구성합니다.
<head>
<style type="text/css">
p:before {
content: "hello";
}
</style>
</head>
<body>
<p> Kim</p>
<p> Brown</p>
<p> Tom</p>
</body>
위 코드 입력 결과는 아래와 같습니다.
See the Pen content_basic by hyunho (@momalcy) on CodePen.
반복되는 문구의 글자 색, 크기 등을 정할 수 있으며, 예시는 코드와 같습니다.
<head>
<style type="text/css">
p:before {
content: "hello";
color: blue;
font-size: 25px;
}
</style>
</head>
<body>
<p> Kim</p>
<p> Brown</p>
<p> Tom</p>
</body>
위 코드 적용 결과는 아래와 같습니다.
See the Pen content_fontstyle by hyunho (@momalcy) on CodePen.
반응형
'html, css, javascript' 카테고리의 다른 글
| javascript 상관계수 예시 numpy corrcoef to javascript (0) | 2023.03.07 |
|---|---|
| [javascript] plotly.js로 차트 그리기 (0) | 2023.02.09 |
| html, css 띄어쓰기 적용 (white-space:pre), 공백 적용 (0) | 2023.02.01 |
| html ul, li 로 세로로 글 나열하기 inline-block (0) | 2023.01.22 |
| html line-height, <li> 간격조절 </li> (0) | 2023.01.22 |
댓글