블로그 디자인을 고쳐야 할 때 테마와 스킨에서 옵션으로 제공하지 않는다면 직접 CSS를 입력해서 해결해야 한다. 물론 블로그 운영에서 가장 중요한 건 글 콘텐츠 발행이겠지만, 꼭 필요한 디자인 설정을 해두면 방문자에게도 쾌적한 외관을 제공할 수 있다.
* 네이버 블로그는 HTML과 CSS 편집 기능을 지원하지 않습니다.
블로그나 사이트에는 헤더, 본문, 사이드바, 푸터 등의 큰 영역이 있고 각 영역 안에 다시 작은 요소들이 모여 구성되어 있다. 예를 들어 위 사진 속 본문 안에는 브레드 크럼, 제목, 작성자, 날짜, 글, TOC 박스의 요소를 찾을 수 있다.
각 요소의 글자 크기부터 간격, 여백, 색깔 등을 변경해야 한다면 인터넷 창의 개발자 검사 창을 먼저 실행해야 한다.
개발자도구 창 여는 방법
– 크롬(Chrome) : 키보드의 F12 키 – 화면 오른쪽 위의 작은 화살표 모양 클릭
– 엣지(edge) : 창 오른쪽 위 점 세 개 – More Tools – Developer Tools 클릭
개발자 창이 열리면 블로그 화면 내 원하는 요소에 마우스를 가져가면 위처럼 영역이 활성화 된다. 이때 클래스 이름은 블로그 화면 내 h2.gb-headline..처럼 나오거나 개발자 창 가운데 h2처럼 표시된다.
테마에 따라 같은 요소도 클래스 이름이 여러 개 나올 수 있다. 그래서 각 이름에 font-size, color 같은 속성을 추가해보고 적용되는 이름을 사용하면 된다. 참고로 블로그 화면에 마우스 아래 나오는 이름은 복사가 되지 않는데 기억하거나 스크린샷을 찍은 다음 보면서 이름을 적으면 된다.
새로운 코드 적용은 블로그 CSS 창에 넣어도 되지만, 위처럼 개발자 창에 넣으면 실시간으로 속성 적용 모습을 볼 수 있어 유용하다. 클래스 이름 아래 빈 곳에 엔터 키나 마우스 클릭을 하면 새로운 여백이 생기는데 원하는 속성을 추가하면 된다.
만약 개발자 검사 후 원하는 이름이 없으면 위처럼 개발자 창 오른쪽 아래 + 아이콘을 클릭하면 바로 아래로 새로운 여백이 나타난다.
개발자 검사 창은 일종의 미리보기 화면으로 보면 된다. 그래서 필요한 요소에 원하는 속성이 적용된 모습을 확인했다면 코드를 복사해서 블로그 CSS 창에 붙여 넣고 저장 버튼까지 눌러야 한다.
그리고 개발자 도구 창 위쪽을 보면 검사를 마친 요소의 콘텐츠 내용이 그대로 나온다. (… 아이콘 클릭 시 펼쳐짐) 해당 콘텐츠란에 원하는 문구나 숫자를 넣으면 블로그 화면의 내용도 변하는데 당연히 실제로 적용된 CSS가 아니라 일종의 미리보기와 같다.
하지만 콘텐츠를 바꾼 화면을 스크린샷으로 찍으면 처음 보는 사람으로서는 진짜라는 생각이 들 수 있다. 만약 누군가 자신의 애드센스 수익 화면의 숫자를 이런 식으로 9999$로 바꾼다고 하면 어떤 느낌일까.
이미 몇 년 전부터 부업 수단으로 블로그를 하는 사람이 적지 않은데 인터넷에 노하우를 알려주는 유료 블로그 강의 역시 많다. 그런데 강사라는 사람이 자신의 블로그는 공개하지 않으면서 오직 높은 숫자가 찍힌 애드센스 화면 스크린샷만 보여준다면 일단 의심하는 것이 좋겠다.
관련 글
워드프레스 블로그가 어려운 이유 (구글 샌드박스)
블로그로 월 100만 원 버는 게 정말 쉬울까?
블로그 애드센스 승인이 계속 거절되는 이유는 뭘까
