블로그 꾸미기 제목에 색 넣고 글을 CSS로 개성적있게 글 꾸미기

CSS로 블로그 글의 가독성을 높이는 블로그 꾸미기

블로그 꾸미기

블로그는 개인의 생각과 아이디어를 표현하는 공간입니다. 이 공간을 잘 꾸미는 것은 단순히 디자인적 요소를 넘어, 독자가 내용을 쉽게 이해하고 흥미를 느끼게 하는 데 중요한 역할을 합니다. [ 블로그 꾸미기 ]는 글의 전반적인 품질을 높일 수 있는 효과적인 방법입니다.

이를 통해 독자에게 매력적인 시각적 효과를 제공할 수 있으며, 정보 전달의 명확성을 높이는 데 효과가 있습니다.

제목 꾸미기

H2 제목을 활용하면 글의 주제를 간결하게 전달할 수 있습니다. H3, H4 소제목은 세부 내용을 체계적으로 정리하여 독자가 필요로 하는 정보를 빠르게 찾을 수 있도록 도와줍니다.

그러나 소제목의 크기나 스타일이 시각적으로 구분되지 않을 경우, 전체 글의 가독성이 떨어질 수 있습니다.

따라서, 각 소제목에 대한 시각적 차별화가 필수적입니다.

글자에 이미지 요소를 추가하게 되면 글을 읽는 사용자는 글자의 디자인만으로도 글이 어떤 목적과 의도인지를 쉽게 파악할 수 있습니다. 정보를 좀 더 쉽고 간단하게 전달하기 위해 글자에 이미지 효과를 주게 되면 좀 더 간결하고 명확하게 글의 내용을 전달하는 데 도움을 줄 수 있습니다.

또한 제목을 입력후 줄바꿈을 잘못해서 이중으로 제목이 들어가는 보이지 않는 코드로 쉽게 찾아 수정할수 있는 장점도 있습니다.

글을 작성할 때 자신만의 개성을 살려 좀 더 가시성을 높이기 위해 H2, H3, H4 소제목과 제목 또는 글자를 CSS를 통해 꾸미는 방법입니다. 각각의 요소에 CSS 값을 원하는 값으로 변경해서 적용하게 되면 쉽게 자신만의 글을 꾸밀 수 있습니다.

설정 요소

제목H2.H3.H4 본문의 글의 각각의 요소에 설정해 주시면됩니다.

#tt-body-page h2[data-ke-size]  제목 H2
#tt-body-page h3[data-ke-size]  제목 H3
#tt-body-page h4[data-ke-size]  제목 H4

#tt-body-page p[data-ke-size='size18'] 본문 1
#tt-body-page p[data-ke-size='size16'] 본문 2
#tt-body-page p[data-ke-size='size14'] 본문 3

CSS 코드

아래는 주로 많이 사용하고 있는 CSS설정 값입니다. 이값은 글의 특성에 맞게 수정해서 적용하시면 됩니다.

A 내용이 들어가는 제목입니다

A 항목
               display: inline-block; 
               border-radius: 15px 15px 15px 0; /* 좌상, 우상, 우하 모서리는 15px, 좌하는 0px (직각) */
               border: 3px solid #000000; /* 검정색 외곽선 두께 3px */
               padding: 0.5em 0.6em; /* 상하 0.5em, 좌우 0.6em의 내부 여백 */
               color: #ff0000; /* 글자색은 빨강 */
               background-color: #ffffff; /* 배경색은 흰색 */

B 내용이 들어가는 제목입니다

B 항목 
               display: inline-block; 
               border-radius: 5px; /* 모든 모서리에 5px의 라운드 처리 */
               padding: 0.6em 1em; /* 상하 0.6em, 좌우 1em의 내부 여백 */
               background: #F1F1F3; /* 배경색은 연한 회색 */
               color: #333333; /* 글자색은 짙은 회색 */

C 내용이 들어가는 제목입니다

C 항목
               display: inline-block; 
               padding: 0.43em 1em; /* 상하 0.43em, 좌우 1em의 내부 여백 */
               font-size: 19px; /* 글자 크기 19px */
               border-radius: 3px; /* 모든 모서리에 3px의 라운드 처리 */
               color: #ffffff; /* 글자색은 흰색 */
               background: linear-gradient(to right, #bf7673, #7a5c8c); 
               /* 왼쪽에서 오른쪽으로 진한 그러데이션 배경색 */

D 내용이 들어가는 제목입니다

D 항목

               display: inline-block; 
               border: 5px solid #C9C9C9; /* 회색 외곽선 두께 5px */
               padding: 0.3em 1em; /* 상하 0.3em, 좌우 1em의 내부 여백 */
               border-radius: 2px; /* 모든 모서리에 2px의 라운드 처리 */
               color: #333333; /* 글자색은 짙은 회색 */
               background-color: #ffffff; /* 배경색은 흰색 */

E 내용이 들어가는 제목입니다

E 항목
          text-align: center; /* 가운데 정렬 */
          margin: 10px 0; /* 상하 10px, 좌우는 없음 */
          font-size: 23px; /* 글자 크기 23px */
          font-weight: bold; /* 글자 굵게 */
          color: white; /* 글자색은 검정 */
          text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); /* 그림자 설정 */

F 내용이 들어가는 제목입니다

F 항목
          border-style: solid; /* 실선 테두리 */
          border-width: 0px 0px 1px 10px; 
          /* 상우하좌 방향의 테두리 두께 (상 0px, 우 0px, 하 1px, 좌 10px) */
          border-color: #2c6ed5; /* 테두리 색은 진한 파랑 */
          background-color: #000; /* 배경색은 검정색 */
          padding: 10px; /* 내부 여백 10px */
          margin: 0.5em 0; /* 상하 0.5em, 좌우는 없음 */

G 내용이 들어가는 제목입니다

G 항목
            margin: 0.5em 0em; /* 상하 0.5em, 좌우 없음 */
            padding: 15px 20px; /* 내부 여백 상하 15px, 좌우 20px */
            background-color: #70829a; /* 배경색은 회색 */
            border-radius: 25px 2px 25px 2px; 
            /* 라운드 처리 (좌상 25px, 우상 2px, 우하 25px, 좌하 2px) */
            background: linear-gradient(to right, #18408a, #800080);
            /* 그러데이션 배경 (왼쪽에서 오른쪽으로 #18408a에서 #800080으로) */
            color: #ffffff; /* 글자색은 흰색 */

✔ 예시

#tt-body-page h2[data-ke-size] 제목 H2에 F 내용이 들어가는 제목 스타일입니다

글을 CSS로 개성적있게 꾸미기