커버 글자 꾸미기

저의 블로그는 현재 슬라이더(cover-slider), 섬네일 리스트(cover-thumbnail-list), 벽돌 리스트(cover-masonry), 리스트(cover-list)의 총 4개의 커버로 구성되어 있는데요.

 

아래에 섬네일 리스트(cover-thumbnail-list)의 Design이라는 타이틀 보이시죠? 이 부분의 글자를 편집해보도록 하겠습니다.

 

---

---

CSS 편집창에서 [Ctrl+F]를 누른 뒤, 'h2'를 검색해줍니다.

오른쪽 스크롤 바에 노란색으로 표시되어 있는 부분으로 이동하면, '.cover-thumbnail-list h2 {' 를 찾을 수 있는데요.

color: #000000;	글자색상 (https://www.w3schools.com/colors/colors_picker.asp)
text-align: center;	글자정렬 (https://www.w3schools.com/cssref/pr_text_text-align.asp)
border-style: solid;	테두리 속성 (https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none)
border-radius: 6px;	테두리 둥근모서리
border-width: 0px;	테두리 선 두께
padding: 6px;	마진(Margin)
border-color: none;	테두리 선 색상 (https://www.w3schools.com/colors/colors_picker.asp)
background-color: #ecd9c6;	테두리 내부 색상 (https://www.w3schools.com/colors/colors_picker.asp)

.cover-thumbnail-list h2 {
   margin-bottom: 26px;
   font-size: 1em;

   color: #000000;  
   text-align: center;                      
   border-style: solid;  
   border-radius: 6px; 
   border-width: 0px;

   padding: 6px; 
   border-color: none; 
   background-color: #ecd9c6;

 

이 부분을 추가해 주었습니다.

 

---

아래와 같이 Design의 타이틀에 박스가 생긴 것을 확인하실 수 있습니다.

 

---

.cover-thumbnail-list h2 { 

   color: #000000; 
   text-align: center;
   border-style: solid; 
   border-radius: 6px; 
   border-width: 2px; 
   padding: 6px; 
   border-color: #996633; 
   background-color: #ecd9c6;

 

2개의 부분만 바뀌어 보았는데, 아래와 같이 박스에 테두리 라인이 생겼습니다.

 

---

벽돌 리스트(cover-masonry), 리스트(cover-list)도 동일하게 'h2' 부분을 찾아 전체적인 디자인을 통일 시켜보세요~!

조금이나마 도움이 되셨길 바랍니다 :~>