CSS 복붙으로 제목 꾸미기

수정
CSS 제목 꾸미기

글·단락의 제목을 CSS 복붙으로 누구나 쉽게 꾸밀 수 있습니다. 글(웹 페이지의 글)에 좋은 내용을 담는 것이 중요하지만 적당히 꾸미는 것도 필요하겠죠?

글을 작성하다 보면 여러 개의 단락으로 나누어지는데, 각 단락에 대한 제목을 만들어야 할 때 어떻게 하세요?

그냥 글자 크기를 크게 한다구요? 그렇게 해도 되지만...

올바른 방법은 HTML의 <h1>~<h6> 요소를 사용하는 것입니다.

HTML 코딩을 하지 않고 글 작성 도구를 사용하고 있다면, 그 도구에 제목을 만드는 기능이 꼭 있을 겁니다. 그 기능을 사용하면 <h1>~<h6> 요소가 만들어집니다. 한번 HTML 모드로 전환해서 확인해 보세요.

이 글에서는 <h1>~<h6> 요소를 꾸밀 수 있는 CSS 코드를 소개합니다. 이 CSS 코드를 글의 제목 또는 각 단락의 제목에 적용하면 글을 더욱 돋보이게 하는데 작은 도움이 될 거라 생각합니다.

대표적으로 '<h2>제목 꾸미기 샘플</h2>'에 대한 CSS 코드이므로, 필요에 따라 h2를 h1, h3 등으로 바꿔 사용하면 됩니다.


제목 꾸미기 샘플 1

CSS 코드

h2 {
  padding: 0.7rem;
  border-left: 5px solid #2196f3;
  background: #e3f2fd;
}



제목 꾸미기 샘플 2

CSS 코드

h2 {
  padding: 0.7rem;
  border-left: 5px solid #e91e63;
  background: #fce4ec;
}



제목 꾸미기 샘플 3

CSS 코드

h2 {
  padding: 0.7rem;
  border-bottom: 3px solid #00bcd4;
  background: #e0f7fa;
}



제목 꾸미기 샘플 4

CSS 코드

h2 {
  position: relative;
  padding: 1rem 0.5rem;
}
h2::after {
  position: absolute;
  bottom: 0px;
  left: 0px;
  content: '';
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(right, #00b0ff 0%, #00e676 100%);
  background-image: linear-gradient(to left, #00b0ff 0%, #00e676 100%);
}



제목 꾸미기 샘플 5

CSS 코드

h2 {
  color: #fff;
  padding: 0.7rem 0.7rem 0.7rem 2rem;
  border-radius: 10px;
  background: linear-gradient(45deg, rgb(254, 107, 139) 30%, rgb(255, 142, 83) 90%);
  box-shadow: rgba(255, 105, 135, 0.3) 0px 3px 5px 2px;
}



제목 꾸미기 샘플 6

CSS 코드

h2 {
  color: #fff;
  padding: 0.7rem 0.7rem 0.7rem 2rem;
  border-radius: 100vh;
  background-image: -webkit-linear-gradient(right, #f4ff81 0%, #00e676 100%);
  background-image: linear-gradient(to left, #f4ff81 0%, #00e676 100%);
}



제목 꾸미기 샘플 7

CSS 코드

h2 {
  color: #fff;
  padding: 0.7rem 0.7rem 0.7rem 2rem;
  background-image: -webkit-linear-gradient(left, #7c4dff 0%, #a7ffeb 100%);
  background-image: linear-gradient(to right, #7c4dff 0%, #a7ffeb 100%);
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
}



제목 꾸미기 샘플 8

CSS 코드

h2 {
  position: relative;
  display: inline-block;
  padding: 0 4rem;
}
h2::before, h2::after {
  position: absolute;
  top: 50%;
  display: inline-block;
  content: '';
  width: 50px;
  height: 1px;
  background: #212121;
}
h2::before {
  left: 0px;
}
h2::after {
  right: 0px;
}



제목 꾸미기 샘플 9

CSS 코드

h2 {
  border-bottom: 5px double #b388ff;
}



제목 꾸미기 샘플 10

CSS 코드

h2 {
  color: #2979ff;
  border-bottom: 2px dashed #2979ff;
}



제목 꾸미기 샘플 11

CSS 코드

h2 {
  position: relative;
}
h2::after {
  position: absolute;
  bottom: -7px;
  left: 0px;
  content: '';
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #ffeb3b, #ffeb3b 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #ffeb3b, #ffeb3b 2px, #fff 2px, #fff 4px);
}



제목 꾸미기 샘플 12

CSS 코드

h2 {
  position: relative;
  display: inline-block;
  padding: 0.7rem 1rem;
}
h2::before, h2::after { 
  position: absolute;
  display: inline-block;
  content: '';
  width: 20px;
  height: 30px;
}
h2::before {
  top: 0px;
  left: 0px;
  border-top: 2px solid #f44336;
  border-left: 2px solid #f44336;
}
h2::after {
  right: 0px;
  bottom: 0px;
  border-right: 2px solid #f44336;
  border-bottom: 2px solid #f44336;
}



제목 꾸미기 샘플 13

CSS 코드

h2 {
  color: #00c853;
  padding: 0.7rem 0;
  border-top: 3px solid #00c853;
  border-bottom: 3px solid #00c853;
}



제목 꾸미기 샘플 14

CSS 코드

h2 {
  padding: 0.5rem;
  border: 1px dashed #03a9f4;
  background: #e1f5fe;
  box-shadow: 0px 0px 0px 5px #e1f5fe;
}



제목 꾸미기 샘플 15

CSS 코드

h2 {
  position: relative;
  padding: 0.5rem;
  border: 2px dashed #fff;
  background: #e1f5fe;
  box-shadow: 0px 0px 0px 5px #e1f5fe;
}
h2::after {
  position: absolute;
  top: -7px;
  left: -7px;
  content: '';
  border-width: 0 0 15px 15px;
  border-style: solid;
  border-color: #fff #fff #81d4fa;
  box-shadow: 1px 1px 1px #e0e0e0;
}



제목 꾸미기 샘플 16

CSS 코드

h2 {
  padding: 1rem;
  background-color: #e1f5fe;
  background-size: 35px 35px;
  background-image: linear-gradient(90deg, rgba(179,229,252,0.4) 50%, transparent 50%),
    linear-gradient(rgba(179,229,252,0.4) 50%, transparent 50%);
}


제목 꾸미기 샘플 17

CSS 코드

h2 {
  color: #fff;
  padding: 1rem;
  background-color: #ff4081;
  background-size: 50px 50px;
  background-position: 0px 0px, 25px 25px;
  background-image: radial-gradient(rgba(252,228,236,0.3) 13%, transparent 13%),
    radial-gradient(rgba(252,228,236,0.3) 13%, transparent 13%);
}



제목 꾸미기 샘플 18

CSS 코드

h2 {
  color: #03a9f4;
  padding: 0.7rem;
  background: -webkit-repeating-linear-gradient(-45deg, #b3e5fc, #b3e5fc 3px, #e1f5fe 3px, #e1f5fe 7px);
  background: repeating-linear-gradient(-45deg, #b3e5fc, #b3e5fc 3px, #e1f5fe 3px, #e1f5fe 7px);
}



제목 꾸미기 샘플 19

CSS 코드

h2 {
  color: #03a9f4;
  padding-bottom: 1px;
  -webkit-box-reflect: below -10px -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0) 10%, rgba(0,0,0,0.7));
  line-height: normal;
}



제목 꾸미기 샘플 20

CSS 코드

h2 {
  position: relative;
  z-index: 0;
}
h2::before {
  position: absolute;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #b2ebf2;
}



제목 꾸미기 샘플 21

CSS 코드

h2 {
  position: relative;
  z-index: 0;
  border-radius: 10px;
  background: #e0f7fa;
}
h2::before {
  position: absolute;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
  content: '';
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #b2ebf2;
}



제목 꾸미기 샘플 22

CSS 코드

h2 {
  color: #fff;
  padding: 0.7rem 1rem;
  background: #00c853;
  -webkit-box-shadow: 5px 5px 0 #1b5e20;
  box-shadow: 5px 5px 0 #1b5e20;
}



제목 꾸미기 샘플 23

CSS 코드

h2 {
  position: relative;
  margin: 1rem -10px;
  padding: 0.7rem 0.7rem 0.7rem 2rem;
  background: #ffeb3b;
}
h2::before, h2::after {
  position: absolute;
  content: '';
}
h2::before {
  bottom: -10px;
  left: 0px;
  width: 0px;
  height: 0px;
  border-top: 10px solid #e9c70a;
  border-left: 10px solid transparent;
}
h2::after {
  right: 0px;
  bottom: -10px;
  width: 0px;
  height: 0px;
  border-top: 10px solid #e9c70a;
  border-right: 10px solid transparent;
}
#구글 블로그 꾸미기
다른 글

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.

댓글

  1. 고급정보2022년 10월 24일 오후 9:02

    정보감사합니다. 샘플20번 적용해보았는데, 글 중간 왼쪽 끝과 사이드바 광고 영역에도 동그라미가 나타나던데, 어떻게 수정해야 할까요? 코드는 수정한거 없이 그대로 붙여넣기 했어요

    답글삭제

댓글 쓰기