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

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

오늘은 HTML에서 제목이나 본문의 포인트가 되는 단락 등 글자를 강조하는 다양한 방법들을 소개드립니다.

 

 

우리는 하루에도 몇 개 많으면 수 십개 이상의 블로그를 방문하는 블로그와 아주 가깝고도 친밀한 삶을 살고 있습니다.

국내 대표적인 블로그 플랫폼은 네이버와 티스토리가 있습니다.

네이버 블로그와 티스토리 블로그는 각각 고유의 매력적인 특징이 있는데 가끔 블로그 방문하면 글자,텍스트가 꾸며진 형태를 꽤 많이 보게 됩니다.

 

이러한 형태는 블로그 운영자가 직접 HTML로 텍스트를 꾸며준 것인데요. HTML 편집기가 지원되는 블로그에서 가능한 것으로 사용자가 직접 내 블로그를 자유자재로 꾸밀 수 있는 HTML 편집이 가능한 것이 매력인 티스토리 블로그의 주요 특징입니다.

 

다른 블로그를 방문하면서 본문의 소제목에 꾸며진 것을 보면서 '내 블로그에도 저렇게 적용하면 좋을 것 같다.'라는 생각 한 번쯤은 해보셨지만 아무것도 모르는 생초보 상태라면 에디터 모드 변경부터 어떻게 해야할지 막막했을 것 입니다.

하지만 설명만 잘 읽으면 생초보자도 쉽게 따라 할 수 있습니다. 

 

 

1.에디터 HTML 모드로 변경

본문에 열심히 내용을 써줍니다.

예를들어 본문에 "내 블로그에도 이런 글자 효과가 적용된다면?" 텍스트를 꾸며줄 계획이라면

에디터 상단의 우측 [기본모드]에서 [HTML]로 편집기 모드를 바꾸어 줍니다.

 

<p style="color: #000000; border-left: 0.5em solid #688FF4; padding: 0.5em; background: #F9F7F6;">내 블로그에도 이런 글자 효과가 적용된다면?</p>

그러면 새까만 배경에 코드와 내용이 뒤섞인 화면이 보입니다.

그곳에서 내가 꾸며주고 싶은 글자를 찾고, 스타일을 적용해주면 간단하게 끝입니다.

스타일은 태그를 꾸며주는 보조적인 기능이기 때문에 단독으로 쓰일 수 없습니다.

반드시 옷을 입어줄 몸이 필요하므로 위처럼 P태그 안에 스타일을 적용해줘야 합니다. 

 

 

 

2.어디선가 많이 본 듯한 小제목 디자인

2-1.코드적용과 예시

예제와 코드를 올렸으니 1번을 토대로 잘 복붙해서 사용해주면 됩니다.

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

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

 

 

 

 

내 블로그에도 이런 꾸미기가 적용된다면?

 

<span style="background: #F9F7F6; border-left: 0.5em solid #688FF4; padding: 0.5em;">내용</span>

 

 

 

이런 소제목도 간결하고 임팩트 있어요.

 

<p style="border-left: 10px solid #688FF4; padding: 0.5em; border-bottom: 2px solid #688FF4; ">내용</p>

 

 

 

 

글자에 그라데이션 색상이 들어가서 강조된 텍스트

 

<p style="background: linear-gradient(to right, #A7A3FF,#FFA7A3, #671cc4, #5673bd); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">내용</p>

[Css강좌]글자에 그라데이션 만들기와 예제←링크(O) 편에서 자세한 설명을 볼 수 있습니다.

 

 

 

 

 

 모서리가 둥근 배경도 좋은 포인트가 됩니다.

 

<p style="border-radius: 5em; padding: 0.5em; background: #E7B7B7;></p>

 

 

 

 

  적당한 길이로 배경색을 나타내다  

 

<p><span style="border-radius: 5em; padding: 0.5em; background: #dcf1fb">내용</span></p>

 

 

 

 

책갈피 느낌이 나는 스타일 

 

<p><span style="border-radius: 0 15px 15px 0; border-left: inset; padding: 0.6em; background: #EBEEF0;">내용</span></p>

 

 

 

 

 말풍선 스타일 

 

<p><span style="border-radius: 15px 15px 15px 0; border-bottom: 5px solid #B9C4C4; padding: 0.5em; background: #CEDADA;">내용</span></p>

 

 

 

 

 정렬된 느낌의 인덱스 스타일 

 

<p><span style=" border-radius: 15px 15px 0 0; border-bottom: 2px solid #B2E0F7; padding: 0.5em; background: #D8EFFB;">내용</span></p>

 

 

 

 

점선이 있는 심플한 스타일

 

<p><span style="border: 3px dashed #C6C6C6; padding: 0.6em;">내용</span></p>

 

 

 

 

소제목을 눈에 잘 띄게 하려면

 

<p><span style="border: 5px double #DCDCDC; padding: 0.4em;">내용</span></p>

 

 

 

[Html] 블로그의 제목,내용,본문,글자 꾸미는 방법②

 

 

---

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