H2.H3.H4 제목 소제목 또는 글을 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: black; /* 글자색은 검정 */
          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: #fff; /* 배경색은 흰색 */
          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 내용이 들어가는 제목 스타일입니다

설정 방법 예시