목차
이번 글에서는 워드프레스 추가 CSS를 활용하여 글을 더 보기 좋게 꾸미는 방법에 대해 이야기합니다.
블록 디자인은 글의 가독성 개선에 중요한 부분임에도, 초보들에게는 이를 개선하는 방법이 마땅치 않습니다.
반면, CSS 편집을 공부하고자 해도 생각보다 적당한 수준의 자료가 부족한 편입니다.
저 또한 초보로써 html에 대한 장황한 설명 없이 최대한 블록 편집에 필요한 부분만을 설명해 보도록 하겠습니다.
CSS는 무엇이고, 또 어떻게 활용되는가?
CSS는 홈페이지의 외관을 구성하는 html 언어 중 스타일을 정의하는 언어라고 볼 수 있습니다.
건축에 비유하면 html은 건물의 골격이고, CSS는 인테리어입니다.
CSS는 여러분이 사용 중인 테마에 따라 이미 정의되어 있습니다.
“외모-테마 파일 편집기”에 보시면 다음과 아래와 같이 나타납니다.
보시다시피 저는 Generate Press를 쓰고 있으며, 제 버전 기준 265~281행에는 h1~h3 블록의 스타일에 관해 규정되어 있는 걸 볼 수 있습니다.
해당 페이지를 편집하는 방법으로도 홈페이지 디자인을 바꿔볼 수 있습니다.
다만, 해당 내용을 자칫 잘못 편집하면 홈페이지 전체 디자인을 망칠 수 있기에 CSS에 밝은 분이 아니라면 추천해 드리지 않습니다.
우리가 원하는 건 CSS의 전문가가 되어 홈페이지 디자인을 마음대로 주무르는 것이 아니라, 고작 글의 가독성을 좀 더 개선해 보겠다는 겁니다.
그렇다면 어떤 방식으로 CSS를 편집하고 적용할 수 있을까요?
추가 CSS 활용하기
디자인 개선, 가독성 개선에 관심이 있는 분들이라면 당연히 블록 에디터를 만져보셨을 겁니다.
아무리 텍스트 크기, 색상을 바꿔보아도 고수분들의 페이지와는 매우 다르죠.
답답한 마음에 고급 탭을 열어도 보지만, 빈칸만 두 개가 보일 뿐입니다.
바로 이 쓸모 없어 보이는 빈칸 중 아래의 추가 CSS 클래스 부분이 우리가 사용해 볼 부분입니다.
이 공백에는 미리 정의해놓은 CSS 클래스가 들어가야 합니다.
본문에 쓰고 싶은 디자인을 미리 정의해서 이름을 기록해 두었다가
상황에 맞는 클래스를 빈칸에 입력하는 방법으로 디자인을 구현하는 방식입니다.
그리고 그 클래스는 “외모-사용자 정의하기→추가 CSS“에서 작성할 수 있습니다.
추가 CSS 버튼을 누르면 아래와 같이 편집 창이 나타납니다.
CSS 작성하기
간단한 실습을 해보겠습니다.
연습 삼아 저의 바로 직전 글에서 작성했던 링크를 조금이나마 보기 좋게 바꾸어 보려고 합니다.
원본 블록은 그저 볼드 처리가 된 텍스트입니다.
글씨체만 조금 굵게 표시될 뿐, 원문이나 소제목들과 딱히 구분되지 않습니다.
아직 작성하진 않았지만 일단 추가 CSS 클래스를 넣어 봅니다.
저는 편의상 “blockquote1″이라고 넣었습니다. (원하시는 구분 명으로 달아도 무방합니다.)
당연히 아무 일도 일어나지 않습니다.
디자인은 바뀌지 않았지만, 업데이트를 누르고 페이지에 어떤 일이 일어났는지 한번 확인해 봅니다.
추가 CSS를 넣은 페이지에 들어가서 해당 블록에서 마우스 우클릭을 누르고 검사를 클릭합니다.
우측의 검사 화면을 보면 위와 같은 부분을 찾을 수 있습니다.
“Microsoft Visual C++ 재배포 가능 패키지” 문구 위쪽으로 p class=”blockquote1″이라고 쓰여있는 게 보입니다.
“p class=”blockquote1″” 부터 “/p” 로 끝나는 부분까지가 선택한 블록을 구분하는 부분입니다.
위의 내용을 대략 직역하면 다음과 같습니다.
“p 태그로 묶여있고, 문자열과 링크가 담겨있는 블록을 “blockquote1″이라는 클래스에 정의된 대로 불러와 줘.”
참고로 위의 이미지 시작과 끝에 쓰인 p는 선택자, 혹은 태그라고 불립니다.
워드프레스에서 p 태그는 주로 본문 블록에 쓰입니다.
위의 내용이 이해가 잘 안 가도 상관없습니다.
어쨌거나, 우리가 추가 CSS에 입력한 내용이 페이지에 적용이 잘 되어 있습니다.
이제 이름만 달아놓은 “blockquote1″에 내용을 담아보겠습니다.
다시 “외모-사용자 정의하기→추가 CSS“로 돌아가서 내용을 작성해 보겠습니다.
p. 으로 시작하여 본인이 추가했던 CSS 명을 넣고 괄호 안에 내용을 작성하면 합니다.
저는 위와 같이 “blockquote1″을 정의해보았습니다.
우측의 미리 보기 창에서 “blockquote1″이 적용된 글을 띄워 해당 블록의 위치로 가보면,
제가 의도한 대로 디자인이 변경되어 나타납니다.
padding도 원하는 대로 들어갔고, border-left에 정의한 회색의 막대바도 잘 들어갔습니다.
font-style에 정의 된 대로 이탤릭체도 잘 반영되어 있습니다.
블록 편집기에서 CSS를 미리 추가했던 이유가 여기에 있습니다.
혹시나 의도한 대로 변경되지 않아도 바로 확인하고 변경할 수 있습니다.
추가 CSS는 글 작성 이후에 반영됩니다. 따라서, 블록 편집기에서 작성한 내용과 추가 CSS에서 정의한 내용이 충돌하면, 추가 CSS에 작성된 내용을 따라서 보입니다.
예를 들어, 블록 편집기에서 “패키지”라는 단어에 언더바를 넣고, 게시된 글을 확인해 보면 위의 디자인에 언더바가 더해져서 나타날 것입니다.
그러나, 블록 편집기에서 “패키지”라는 단어를 빨간색으로 변경했다고 해도 추가 CSS에서 정의한 blockquote1에서 글의 색상은 검은색으로 이미 규정했기 때문에 (color : #000000), 빨간색으로의 변경은 무시되고 최종적으로는 검은색으로 나타납니다.
CSS 참조하기
갑자기 설명이 불성실한 가요? 네, 맞습니다. 다만, 이유가 있습니다.
실은 추가CSS를 삽입하는 방법 만으로도, 저 보다 훨씬 더 훌륭한 페이지의 디자인을 참고 할 수 있습니다.
예시 블록
다시 한번, 위의 블록을 우클릭 하여 검사를 실행해보겠습니다.
검사 창 우측의 Styles 부분을 보면, 이제는 익숙한 단어들이 보입니다.
padding, margin, font-size, 뿐만 아니라, 위 블록의 색상인 회색과 파란색의 무언가도 보입니다.
맞습니다. 추가 CSS에서 활용 가능한 속성들입니다.
이러한 방법으로 우리는 다양한 페이지의 디자인 구성을 확인 할 수 있고, 추가 CSS에 넣어보고, 변형하는 방법으로 자신의 페이지에 맞는 디자인을 적용해 볼 수 있습니다.
당연히 모든 페이지가 이렇게 깔끔하고 보기 좋게 정답을 알려주지는 않습니다.
다만, 워드프레스는 대체로 비슷한 구조를 가지고 있습니다.
따라서 워드프레스 블로그를 중심으로 점차 공부의 범위를 넓혀나가는 방법이 도움이 됩니다.