기본적으로 H 태그는 글자의 굵기를 두껍게 하거나 본문의 글자보다 훨씬 큰 사이즈로 지정합니다. 또 글자색이 모두 검정일 경우 제목 태그를 더 눈에 띄게 하기 위해 본문 글자색과 다른 색상을 지정하거나, 배경색을 추가하여 디자인하기도 합니다. 이 글에서는 H 태그 그라데이션 제목 색상을 적용하는 방법에 대해 알아보겠습니다.
그라데이션 제목 예시
아래 예시와 같이 텍스트에 그라데이션 색상을 지정하여 검정 글자들 사이에서 제목이 더욱 돋보이도록 할 수 있습니다.
위와 같이 소제목을 꾸민다면 가독성을 더욱 높일 수 있을 것입니다.
H 태그 그라데이션 적용 방법
CSS 파일에 아래 코드를 추가하고 저장하면 됩니다.
워드프레스는 디자인 → 사용자 정의하기 → 추가 CSS에 아래 코드를 추가하고 저장합니다.
h2 {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;
background-image: linear-gradient(90deg, #03a9f4 0%, #000 33%);
}Note
그라데이션 색상 변경이나 적용 지점을 변경하고 싶은 경우 아래 내용을 확인해 주세요!
background-image: linear-gradient(90deg, #03a9f4 0%, #000 33%);: 90deg는 그라데이션의 방향을 나타내며, #03a9f4에서 시작하여 #000으로 끝납니다. 0%에서 33% 지점까지 그라데이션이 적용됩니다.
그라데이션 적용 지점을 50%로 변경하였을 경우 아래와 같이 파란색 영역이 늘어납니다.
아래 예시는 #03a9f4 에서 #f764a3 로 색상이 변하고 33% 지점부터 적용되도록 하였습니다. 응용하여 사이트에 어울리는 디자인을 해보세요!
응용
텍스트를 그라데이션으로 꾸미는 방법은 제목뿐만 아니라 링크에 적용해도 예쁘더라고요. 링크에 적용하려면 아래 코드와 같이 선택자만 변경하면 됩니다.
a {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: transparent;
background-image: linear-gradient(90deg, #03a9f4 0%, #000 33%);
}h2 요소가 아닌 a 요소에 적용해 주면 끝!
워드프레스 밑줄 꾸미기 U태그
워드프레스 테이블 가로 스크롤 만들기