워드프레스, 구글블로그, 티스토리 스킨 CSS 편집 방법 : 블로그 체류시간

워드프레스, 구글블로그, 티스토리와 같은 블로그를 매끄럽게 운영하려면 필수적으로 HTML과 CSS 두 개의 tool에 대해 조금은 이해하고 있을 필요가 있습니다. 블로그에 딱 들어왔을 때 글자 크기, 폰트 등 스타일이 좋으면 아무래도 블로그 체류시간이 올라갑니다. 이번 포스팅에서는 블로그 체류시간을 올리기 위한 CSS 편집 방법을 알려드리겠습니다.

CSS란? 블로그의 스킨, 글자, 문단 스타일을 정의하는 도구

우리가 웹문서를 검색해서 볼 때 그 안에 들어있는 내용은 HTML을 통해 만들 수 있다고 했었습니다. 문자 크기, 문자의 색, 글의 여백 등 layout에 관련된 부분은 CSS를 통해 만들 수 있습니다. 다시 말해 HTML은 웹문서의 실질적인 내용, CSS는 글의 스타일을 관장합니다.

CSS가 작동하는 방식을 예를 들어 설명해 보겠습니다. 우리가 ‘크롬’을 실행시킨 후에 구글에 접속해서 ‘나비’라고 입력을 하면 구글 서버는 서버에 저장된 ‘나비’와 관련된 HTML 문서를 찾아서 해당 HTML과 관련된 CSS를 HTML 문서와 함께 ‘크롬’으로 송출합니다.

송출받은 크롬 브라우저는 HTML 문서를 CSS에 적힌 스타일을 적용해서 우리 눈에 보기 좋게 출력하는 것입니다. 만약 CSS가 없다면 우리는 그냥 도서관에 있는 백과사전처럼 어떤 글을 검색하더라도 빽빽하게 글자만 나열된 문서를 볼 수밖에 없겠죠?

CSS는 플러그인과 다른 설치파일이 따로 필요하지 않아서 플러그인 없이도 다양한 곳에 구현이 가능합니다. 또 사용법이 매우 간단해서 누구나 쉽게 사용할 수 있다는 장점도 가지고 있습니다.

마지막으로 수많은 HTML을 관리하는 서버라고 하면 CSS를 통해 관리하고 있는 HTML 문서의 스타일을 한 번에 전부 바꿀 수 있어서 서버 관리 측면에서도 효율적입니다.

CSS 기본적인 사용법 : 블로그 체류시간을 올리려면 반드시 알아야!

CSS를 사용하려면 우선 CSS의 속성과 기능에 대해 알아야 합니다. 기본적인 속성과 기능은 아래와 같습니다.

◆ background-color : 문자나 문서의 배경색을 설정.
◆ background-img : 문자나 문서의 배경이미지 설정.
◆ color : 문자 색상 설정.
◆ margin : 콘텐츠 외부의 여백설정.
◆ padding : 콘텐츠 내부의 여백설정.
◆ font : 문자의 크기, 글자체 등을 설정.
◆ border : 박스의 경계선, 선의 굵기, 색상 설정.
◆ text-align : 문자의 정렬 설정.
◆ test-decoration : 문자의 효과를 설정.
◆ width, height : 박스 등의 크기를 설정.

기본적인 문법에 대해서도 알아보도록 해요. CSS의 문법은 정말 간단합니다.

요소타입 { 속성 : 값 ;}

예제1. h1 { color : blue ;}
이렇게 CSS에 입력을 하면 모든 <h1>의 글자색이 파란색으로 표현됩니다.

예제2. h1 {text-align : center;}
이렇게 CSS에 입력을 하면 모든 <h1>의 문자 정렬이 가운데로 정렬됩니다.

티스토리 CSS 편집 사용법 : 본문 서식 변경, 워드프레스, 구글블로그

실질적으로 티스토리에서 CSS를 편집하는 방법을 알려드리겠습니다. 가장 많이 쓰는 항목인 본문 글자 서식 변경하는 방법입니다.

티스토리 CSS 편집 화면
티스토리 CSS 편집 화면

티스토리의 본문 글자 서식은 CSS 편집화면에서 Ctrl+F로 ‘.article-view p’를 검색하시면 나옵니다. 기본적으로 font-size: 16px; line-height: 26px; color: #555로 설정되어 있습니다.

여기서 px 단위는 절대적인 크기의 단위이기 때문에, 컴퓨터, 모바일, 태블릿 등 여러가지 기기를 사용하는 요즘에는 상대적인 단위인 em으로 변경해주면 조금 더 가독성이 좋아질 수 있습니다. 저는 font-size를 16px에서 1.1em으로 변경하고, line-height는 26px에서 1.7em으로 변경해서 PC 환경에서 비슷한 크기로 만들었습니다.

아래 @media screen and…나오는 것은 모바일에서 볼 때의 글자 서식이니 해당 서식을 바꾸면 모바일에서 볼 때 글자 크기와 줄 간격이 바뀌겠죠~?

또한 본문 제목 태그인 <h2>,<h3>,<h4>의 글자 서식도 같은 방법으로 ‘.article-view h1’, ‘.article-view h2’, ‘.article-view h3’, ‘.article-view h4’ 이렇게 CSS에서 찾아서 바꾸면 됩니다.

워드프레스와 구글블로그도 CSS 편집 방법은 크게 다르지 않으니 CSS 편집창에 가셔서 제가 알려드린 방법을 사용해 보시기 바랍니다.


이제 워드프레스, 구글블로그, 티스토리에서 CSS 편집을 어떻게 하셨는지 아셨나요? 이 글이 도움이 되셨으면 좋겠습니다.

Related Posts