안녕하세요. 쉽게 지저귀는 짹짹이입니다.

 

오늘은 HTML, CSS 수정으로 제목 크기를 바꿔보는 작업으로 스킨 편집을 해볼까 합니다.

스킨을 원하는 대로 편집할 줄 알아야 블로그의 가독성도 좋아지고

광고의 배치도 최적으로 할 수 있다고 생각하는 만큼 블로그를 조금씩 바꿔보는 시도를 해봅시다!

 

 

  스킨편집 HTML, CSS 수정으로 제목 크기를 바꿔보자

 

1단계. 해당코드 찾기

 

저는 글의 제목크기 너무 작은 것 같았습니다.

그리하여서 글의 제목크기를 키우고, 굵게 만들어보는 작업을 해보겠습니다.

우선 저번과 같이 수정하고자 하는 곳이 어디인지 찾아보아야 합니다.

수정하고자 하는 곳에 마우스 커서를 놓고, 마우스 오른쪽 버튼- 검사를 클릭하면 됩니다.

 

 

검사를 누르면 HTML과 복잡한 창이 나오게 됩니다.

HTML 창에도 블록이 생기고 제가 수정하고자 하는 곳의 제목도 블록으로 활성화가 됩니다.

 

 

그러면 밑에 화면과 같이 오른쪽 하단 부분에 이러한 창이 있을 겁니다.

Styles라는 곳에 해당되는 '스킨 편집 HTML 수정하기'라는 제목의 폰트, 크기 등등 속성을 볼 수 있는 곳인데요.

저희가 관심 있는 것은 바로 제가 블록 쳐놓은 head h2 a <- 이 부분입니다.

이 부분을 복사를 하였다면, 1단계는 끝났습니다.

 

2단계. 해당 코드 수정하기

블로그 관리- 꾸미기 - 스킨 편집창으로 들어가 주세요~!

이 정도는 기본으로 하실 거라 믿고, 못 찾으신다면 댓글 달아주세요.

 

그렇다면은 다 왔습니다. 오른쪽 상단에 HTML 편집을 눌러주세요.

그다음 상단에 CSS로 들어가 주세요.  크기 편집은 여기서 이루어집니다.

 

 

CTRL + F(찾기) 단축키를 누르시고, 아까 찾아서 복사했던 

 head h2 a 이 친구를 붙여 넣어요. 그럼 컴퓨터가 자동으로 해당되는 곳을 찾아줍니다.

 



해당되는 코드를 찾았는데요. 저기서 font-size 35px을 원하시는 크기로 수정하시면 됩니다.

제가 전후로 비교해드릴게요. 이 값은 변경해보면서 옆의 미리 보기 창을 통해서 수정해주시면 돼요.

font-size 35px를 70px로 변경, 비교해 보았습니다.

 

글씨 크기의 차이는 이 정도로 체감하실 수 있습니다. 

폰트 크기 말고도 여러 가지를 변경할 수도 있는데요. 대표로 굵기입니다.

굵기를 변경하는 방법은 font-weight를 변경하시면 됩니다. 이것도 비교해드릴게요.

font-weight를 500에서 1000으로 변경, 비교해 보았는데요. 

너무 두꺼워서 750 정도로 해야겠네요!

 

 

이밖에도 밑줄, 색상 등등도 다양하게 변경 가능합니다!

오늘은 여기까지 포스팅하고 다음에는 또 다른 CSS 수정 방법을 들고 오겠습니다.

 

구독과 공감은 큰 힘이 됩니다~♥

 

+ Recent posts