hi098123 Tistory Tip

간단하고 깔끔한 제목 CSS로 꾸미기

제목을 간단하고 깔끔하게 꾸며보고자 합니다.

여러 디자인이 있겠지만 아래와 비슷한 느낌으로 꾸며보고자 합니다.

제목

 

CSS 코드

  • border-left 값으로 왼쪽 엣지를 꾸밀것이고
  • background-color로 배경색상을 줄것이고
  • padding으로 내부 여백을 줄것입니다.

 

border-left

저는 PC, Mobile 모두 5px이 깔끔해보여서 5px으로 설정해보았습니다.

border-left: 5px solid #FF9800;

 

background-color

원하는 색상을 입력하시면 됩니다.

background-color: #FFF3E0;

 

padding

내부 여백입니다. 저는 10px이 깔끔한것 같아 10px으로 설정하였습니다.

padding: 10px;

 

 

 

미리보기

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #F44336;
    background-color: #FFEBEE;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #9c27b0;
    background-color: #F3E5F5;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #673AB7;
    background-color: #EDE7F6;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #3f51b5;
    background-color: #e8eaf6;
}

 

 

제목 미리보기

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

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #009688;
    background-color: #e0f2f1;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #4caf50;
    background-color: #e8f5e9;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #8BC34A;
    background-color: #f1f8e9;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #FFEB3B;
    background-color: #fffde7;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #ffc107;
    background-color: #fff8e1;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #ff9800;
    background-color: #fff3e0;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #ff5722;
    background-color: #FBE9E7;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #795548;
    background-color: #EFEBE9;
}

 

 

제목 미리보기

h2{
	padding: 10px;
    border-left: 5px solid #607D8B;
    background-color: #ECEFF1;
}

 

 

 

안내사항

  • 다양한 색상 조합을 예시로 들었는데 이런 조합외에도 어울릴만한 색상이 있을것이니 찾아서 적용하시면됩니다.
  • h2 부분은 CSS Selector 부분으로 CSS Selector 문법으로 원하는 태그를 지정하시면 됩니다.

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 한 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.

링크 공유는 가능합니다. 만약, 본문 공유 시 링크 공유를 해주세요

댓글 3개


  • / J라이프 2022.01.12 06:35 신고

    안녕하세요 혹시 본문에 표시된 V표시로 제목을 꾸미고싶은데 CSS알려주실수 있으신가요!?

    답글 쓰기
    • / hi098123 2022.01.12 07:14 신고

      이 블로그에 폰트형 아이콘(검색, 댓글의 펜, 휴지통 등)은 https://xpressengine.github.io/XEIcon/started.html 가 적용되어있습니다.

      스타일에서 해당 아이콘을 이용하여 적용되어있습니다.
      #contents h2:before {
      color: #2196F3;
      font-family: 'xeicon';
      content: '\e928\20';
      }

    • / J라이프 2022.01.15 01:56 신고

      감사합니다 잘 적용했어요^^