[Html] 제목을 강조하는 꾸미기 방법2

 

 

 

안녕하세요. 키미추입니다.

이번 HTML강좌에서는 저번 [제목을 강조하는 꾸미기①]편에 이어 더욱 다양한 디자인 소스들을 준비했습니다.

 

 

1-1.HTML 에디터 모드 변경 방법을 모른다면?

[Html강좌] 제목을 강조하는 꾸미기① ←여기에 자세한 설명과 방법이 있습니다.

 

1-2.코드 삽입은 어떻게 하는가?

마찬가지로 [Html강좌] 제목을 강조하는 꾸미기①(링크O)에서 설명과 방법을 알 수 있습니다.

 

 

---

 

2.다양한 小제목 디자인

2-1.코드적용과 예시

색상 코드는 원하는 색깔로 변경 사용이 편하도록 보기 좋게 따로 표시해두었습니다.

구글에서 HTML Hex Color <<링크 를 검색하면 색상표를 볼 수 있습니다.

 

 

 

 

 

 

 

눈에 잘띄는 제목 글자 내용

 

<p style="font-size: 23px; font-weight: bold; color: indianred; text-shadow: 1px 1px 1.2px midnightblue;">내용</p>

 

 

 

심플하고 간결하지만 단락 구분이 잘되는

 

<p style="border: 1px solid #C9C9C9; padding: 0.3em 1em;border-radius: 2px;">내용</p>

 

 

 

심플하고 간결하지만 단락 구분이 잘되는 Ⅱ 본문 꾸미기

 

<p style="border: 5px solid #C9C9C9; padding: 0.3em 1em;border-radius: 2px;">내용</p>

 

 

 

#3 그라데이션 배경색을 넣어 포인트 주는 방법

 

<p><span style="background: linear-gradient(to right, #ffa7a3, #5673bd); padding: 0.43em 1em; font-size: 19px; border-radius: 3px; color: #ffffff;">내용</span></p>

 

 

 

밑줄이 너비에 꽉 차서 단락 나누기에 좋아요

 

<p style="border-bottom: 1px solid #688FF4; padding: 0.1em;"><b>내용</b></p>

 

 

 

 

 

 

 

 

적당한 길이로 포인트를 주다     

 

<p><span style="border-bottom: 12px solid #dcf1fb; padding: 0 0 0 0.2em;">내용</span></p>

 

 

 

모서리를 깎아 부드러운 느낌

 

<p><span style="border-radius: 5px;padding: 0.6em 1em;background: #F1F1F3;">내용</span></p>

 

 

 

주황색 테두리 말풍선 스타일

 

<p><span style="border-radius: 15px 15px 15px 0; border: 3px solid #FFAD5B; padding: 0.5em 0.6em; color: #FF8000;">내용</span></p>

 

 

 

버튼(Button) 스타일

 

<p><span style="border-radius: 5em; padding: 0.6em 1em; background: #F9F9F9; box-shadow: 1px 2px 10px rgba(0,0,0,0.2);  margin-left: 5px;">내용</span></p>

 

 

 

[Html] 블로그의 제목,글자를 강조하는 꾸미기 방법①

 

 

 

 

 

 

---

자세한 문의는 댓글 남겨주세요.