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

 

오늘은 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 수정 방법을 들고 오겠습니다.

 

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

 

  1. 뚱땅이 2019.07.16 10:03

    보기만해도 어려운데 쉽게 잘 풀어주셨네요!

 

 

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

블로그를 운영하면서 HTML을 수정할 일이 있는데요.

어렵게 느껴지지만, 간단한 예제를 통하여 쉽게 알려드리려고 합니다~

저는 댓글 창의 크기를 바꾸고 싶었는데요, 구성의 크기를 변경하는 방법 보시죠.

 

  블로그 스킨 편집 HTML 수정

 

우선 수정하고 싶은 위치를 알아야 합니다. 블로그에 들어가서 수정하고자 하는 위치에 가서

마우스 오른쪽 버튼 검사를 클릭해주세요.

검사를 누르시면 아주 복잡한 HTML 창이 나타나게 됩니다.

벌써부터 모르겠는 창 말이죠.

여기서 중요한 것은 수정하고자 하는 위치를 찾아야 하는데 마우스 커서를 통하여

왼쪽 화면에서 움직이다 보면은 수정하고자 하는 위치가 활성화가 되는데, 그 해당 수정코드가

우측에 표시되게 됩니다.

 

이 하단 영역을 보시면 됩니다~! 다 왔어요. 잘 안보이실 테니 확대해서 보여드릴게요.

저기 있는 저 코드가 우리가 찾아가서 수정해야 될 핵심코드의 시작이라고 볼 수 있어요.

#communicate. communicateWrite. textarea textarea 

이 녀석을 복사하기 하여서 놓은 상태로 다음 단계로 가야 합니다.

 

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

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

 

다들 이 창까지 따라오신 거 맞죠~?

 

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

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

 

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

#communicate. communicateWrite. textarea textarea 이 친구를 붙여 넣어요.

그럼 컴퓨터가 자동으로 해당되는 곳을 찾아줍니다.

 

밑에 보이네요. #communicate. communicateWrite. textarea textarea 

뒤에 넓이, 높이를 수정할 수 있는 곳이 나옵니다. 지금 높이는 200PX로 저는 75PX로 바꾸고 싶어요.

그렇다면 높이 HEIGHT 뒤에 있는 숫자를 75로 바꾸면 돼요. 

 

 

 

#communicate. communicateWrite. textarea textarea 

{ padding: 10px; width: 100%; height: 200px; line-height: 160%; border: 1px solid #ddd; }

 

이 부분에서 height: 200px를 75px로 수정하면 됩니다. 

 

#communicate. communicateWrite. textarea textarea 

{ padding: 10px; width: 100%; height: 75px; line-height: 160%; border: 1px solid #ddd; }

 

이렇게요.

 

적용하기 전에 옆에 페이지의 새로고침을 누르면

아까 댓글창보다 작게 편집이 된 것을 확인할 수 있습니다. 이 사이즈가 마음에 드신다면

적용을 누르시면 끄읏!

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

  1. 후티 2019.07.15 17:27 신고

    스킨 편집하시는 분들 대단하신거 같아요. 전 엄두도.

  2. styleforce 2019.07.16 09:46 신고

    감사합니당!

  3. 뚱땅이 2019.07.16 10:03

    고맙습니다. 잘 따라해볼게용

+ Recent posts