아래 텍스트를 css로 코딩정의할려면 어떻게해야할지 감이 안오네요.;;
아래보다시피 검정색 글자로 시작해서 중간에 빨간색글 2개 들어가고 마지막 단어는 좀더 큰글자와 파란색 계열 글자색인데요.
고수님들 가르쳐주세요..
답변 3개
채택된 답변
+20 포인트
herojdhttps://jsfiddle.net/pxn3rnha/7/
이런식으로 가능 합니다.
2018-02-19 (월) 09:53:53
Copy
<strong>
<span style="font-size:20pt">
<span style="font-family:맑은 고딕">알면
<span style="color:#e74c3c">받고</span>
모르면
<span style="color:#e74c3c">못받는</span>
</span>
</span>
<span style="color:#3498db">
<span style="font-size:24pt">
<span style="font-family:맑은 고딕">"격락손해"</span>
</span>
</span>
</strong>알면 받고 모르면 못받는 "격락손해"
위 내용은 에디터에 입력하고
소스보기에서 긁은경우입니다.
글씨의 컬러는 각각 다르기때문에
css로 규칙을 만드시기보단 각각 적용하는게 나을수도 있습니다.
Copy
<style>
.f {font-size:20pt;font-wieght:bold}
.r_font { color:red}
.b_font {color:blue;font-size:24pt}
</style>
<span class="f">
알면
<span class="r_font">받고</span>
모르면
<span class="r_font">못받는</span>
<span class="b_font">"격락손해"</span>
</span>와 같이 하셔도 됩니다.
2018-02-19 (월) 09:50:23
간단하게 구현해봤습니다.
Copy
<style>
.content {font-size:20px; font-weight:bold}
.content > span:nth-child(2n) {color:red;}
.content > span:nth-child(5) {color:blue; font-size:26px}
</style>
<p class="content">
<span>알면</span> <span>받고</span> <span>모르면</span> <span>못받는</span> <span>"격락손해"</span>
</p>답변을 작성하려면 로그인이 필요합니다.