스토리 오디세이 카테고리 글자색, 글자크기, 글자굵기, 폰트 바꾸기

카테고리 글자색 바꾸는 방법입니다.

 

 

 

1. CSS를 클릭해줍니다!

2. CSS에서 ctrl + f 하셔서 link_item을 검색합니다.

3. 그 후

.area-aside .box-category .tt_category .link_tit,
.area-aside .box-category .tt_category .category_list .link_item {
margin-bottom: 11px;
font-size: 14px;
font-weight: 400;
line-height: 1.64;
color: #777;
}
이렇게 나오는 부분을 찾아주세요! (저는 1620줄에 있었습니다.)
그리고 color: #777; 이 파란색 글자 부분을 #777을 지워주시고 원하시는 컬러코드를 입력해주시면 됩니다.
저는 black으로 변경했습니다. → color: black; 이렇게요.

+ 위에서 font-size, font-weight를 이용해 글자크기와 굵기를 바꿀 수 있습니다!
이 내용은 4.번 아래에 추가로 넣음.


4. 그러면 아래와 같이 카테고리 글자색이 변경됩니다. (큰 카테고리만 색이 변경됨)

 

 

 

 

 

+ 글자 크기 바꾸기

위에 바꾸셨던 color: #777; 여기 부분 위에 보시면 font-size: 14px; 이 보이실 겁니다.
font-size: 원하시는 크기px; 를 설정해주시면

이렇게 글자크기가 변하신 것을 확인하실 수 있습니다.

 

 

 

+ 글자 굵기 바꾸기

글자 크기 바꾸는 방법과 마찬가지로 color: #777; 여기 부분 위에 보시면 font-weight: 400; 이 보이실 겁니다.
font-weigth: 원하시는 굵기; 해주시면 (숫자가 커질수록 글자굵기가 두꺼워집니다.)

변경된 모습을 확인하실 수 있습니다.

 

 

 

+ 폰트 바꾸기

폰트를 바꾸기 위해서는 일단 HTML에 폰트를 추가해주셔야 합니다.
폰트를 추가하는 방법은 아래 링크를 통해 확인해주세요!
https://redpeanut4922.tistory.com/25
아까 3. 번에서
.area-aside .box-category .tt_category .link_tit,
.area-aside .box-category .tt_category .category_list .link_item {
margin-bottom: 11px;
font-size: 14px;
font-weight: 400;
line-height: 1.64;
color: #777;
}
이 부분에서 font-family: 'Jua(원하는 폰트 이름)', sans-serif; 를 추가해주시면 됩니다.

이처럼 폰트가 변하신 걸 확인하실 수 있습니다.

---

▶ 큰 카테고리 밑에 소카테고리 색도 바꾸고 싶다면

1. 위와 마찬가지로 CSS를 클릭하여 ctrl + f 하여 link_sub_item 을 검색합니다.

2. 그 후

.area-aside .box-category .tt_category .category_list .link_sub_item {
position: relative;
display: none;
margin-bottom: 5px;
margin-left: 22px;
font-size: 13px;
line-height: normal;
color: #999;
}
이렇게 된 부분을 찾아주세요. (저는 1643줄에 있었습니다.)
+ 글자크기 변경하는 방법은 4. 번 아래에 적혀있습니다.

3. 그리고 여기서도 color: #999; 여기서 #999에 원하시는 색깔 코드를 입력해줍니다.
저는 이 또한 black으로 주었습니다. (color: black;)

4. 그러면

위와 같이 변경된 것을 확인하실 수 있습니다.

 

 

 

+ 글자 크기 바꾸기

color: black; 위에 font-size: 13px; 이 보이실 겁니다.
13 대신 원하는 사이즈로 넣어주시면 크기가 변경된 것을 확인하실 수 있습니다.

 

 

+ 글자 굵기 바꾸기

.area-aside .box-category .tt_category .category_list .link_sub_item {
position: relative;
display: none;
margin-bottom: 5px;
margin-left: 22px;
font-size: 13px;
line-height: normal;
color: #999;
}
이렇게 된 부분에서 font-size: 13px; 아래에 font-weight: 700(원하는 굵기)px; 를 추가해주시면

이렇게 변형된 것을 확인하실 수 있습니다.

 

 

 

+ 폰트 바꾸기

(폰트 추가하는 방법이 설명된 링크는 위에 큰 카테고리 폰트 바꾸는 방법에 적어두었으니 확인 바랍니다.)
바로 위 글자 굵기 바꾸는 방법에서
.area-aside .box-category .tt_category .category_list .link_sub_item {
position: relative;
display: none;
margin-bottom: 5px;
margin-left: 22px;
font-size: 13px;
line-height: normal;
color: #999;
}
에서 font-size: 13px; 아래에 font-family: 'Jua', sans-serif; 를 추가합니다.
(사실 위에 {안에만 font-family가 들어가면 적용됨.})

그러면

이렇게 변한 것을 확인하실 수 있습니다.


티스토리 오디세이 카테고리 글자색, 폰트, 글자크기, 글자 굵기 바꾸는 방법 끝!