간단하고 깔끔한 제목 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 문법으로 원하는 태그를 지정하시면 됩니다.