워드프레스 디자인, CSS로 완벽하게 커스터마이징하자

by

워드프레스 디자인에 CSS가 필요한 이유

워드프레스 디자인하는데, CSS가 왜 필요할까요?

워드프레스는 무료로 고성능의 테마와 플러그인을 디자인을 쉽게 커스터마이징 할 수 있지만, 더 많은 기능을 사용하기 위해서는 유로 버전을 구매해야 합니다. 비용 추가 없이 디자인을 보다 완벽하게 커스터마이징하기 위해서는 CSS(스타일 시트)를 활용하는 것이 필수입니다. CSS는 웹사이트의 디자인 요소를 정의하는 코드로, 레이아웃, 색상, 글꼴, 여백 등을 세부적으로 조정할 수 있습니다. 이 글에서는 초보자도 쉽게 따라 할 수 있는 CSS를 이용한 워드프레스 수정 방법을 설명하고, 디자인을 더욱 개성 있게 만드는 팁을 소개하겠습니다.

1. CSS 기본 이해

CSS는 “Cascading Style Sheets”의 약자로, 웹사이트의 스타일과 레이아웃을 조정하는 역할을 합니다. HTML과 함께 사용되며, HTML 구조를 꾸미는 데 사용됩니다. 워드프레스에서 CSS를 활용하는 방법은 두 가지가 있습니다:

  1. 테마의 style.css 파일을 수정하는 방법
  2. 사용자 정의 CSS(Custom CSS)를 추가하는 방법

테마의 style.css 파일은 워드프레스 테마 폴더 내에서 쉽게 찾을 수 있으며, 이 파일에서 전체 테마의 디자인 요소들을 정의하고 수정할 수 있습니다. 하지만 테마를 업데이트하면 애써 수정한 파일이 손상되기 때문에 직접 테마의 파일을 수정하는 것을 권장하지는 않습니다. 이를 막기 위해 자녀 테마(Child Theme)를 수정하는 방법을 권장하며 이에 대한 더 자세한 사항은 다음의 글을 참고하시면 됩니다.

워드프레스 테마 커스터마이징, 초보부터 시작해 보자

반면, 사용자 정의 CSS는 별도의 플러그인이나 사용자 정의 도구(Customizer)를 통해 추가할 수 있어, 기존 테마 파일을 직접 수정하지 않고도 디자인을 변경할 수 있습니다.

워드프레스 디자인에서 사용자 정의 CSS 추가 예시
사용자 정의 CSS 추가 예시

2. CSS 커스터마이징 기본 구조

CSS를 사용하여 테마를 커스터마이징하려면, 먼저 CSS의 기본 구조를 이해해야 합니다. CSS는 선택자(Selector)와 선언(Declaration)으로 이루어져 있습니다. 예를 들어, 웹페이지의 제목을 파란색으로 만들고 싶다면, 아래와 같은 코드를 사용할 수 있습니다:

h1 {
    color: blue;
    font-size: 25px;
}
CSS

이 코드에서 h1은 선택자로, HTML 문서에서 <h1> 태그로 지정된 제목 요소를 의미합니다. 중괄호 안의 color: blue; 는 선언으로, 해당 선택자의 텍스트 색상을 파란색으로 바꾸겠다는 뜻입니다. 이처럼 CSS는 선택자와 선언의 조합으로 이루어지며, 이를 통해 홈페이지의 스타일을 자유롭게 조정할 수 있습니다.

3. 글꼴 및 텍스트 스타일링

워드프레스에서 텍스트 스타일을 변경하는 것은 웹사이트의 분위기를 결정짓는 중요한 요소입니다. 특정 텍스트 크기나 간격을 조정하거나, 기본 테마의 글꼴이 마음에 들지 않을 때 CSS를 통해 쉽게 수정할 수 있습니다.

예를 들어, 사이트의 본문 텍스트와 제목 스타일을 바꾸고 싶다면, CSS를 다음과 같이 작성해서 적용할 수 있습니다.

body {
    font-family: 'Open sans';
    font-size: 19px;
    line-height: 1.8;
    color: #334;
}

h1, h2, h3 {
    font-family: 'Roboto';
    color: #111;
}
CSS

이 코드에서는 본문에 ‘Open sans’라는 글꼴을 적용하고, 텍스트 크기와 줄 간격을 조정했습니다. 또한, 제목 태그(h1, h2, h3)에 다른 글꼴과 색상을 설정하여 사이트의 시각적인 계층 구조를 강조할 수 있습니다.

4. 색상 및 배경 커스터마이징

워드프레스 테마의 색상과 배경을 조정하는 것도 웹사이트 디자인을 개선하는 중요한 방법입니다. 색상 팔레트를 적절히 조합하면 블로그나 홈페이지의 정체성을 더욱 잘 표현할 수 있습니다.

예를 들어, 사이트의 배경색과 링크 색상을 변경하려면 아래와 같은 코드를 사용할 수 있습니다:

body {
    background-color: #dcdcdc;
}

a {
    color: #FFA01E;
    text-decoration: none;
}

a:hover {
    color: #FF8200;
}
CSS

이 코드에서는 사이트 전체의 배경색을 연한 회색으로 설정하고, 링크의 기본 색상을 주황색(#FFA01E)으로, 마우스를 올렸을 때의 색상은 조금 더 진한 주황색(#FF8200)으로 변경했습니다. 이처럼 CSS를 이용하면 사이트의 각 요소에 대해 색상과 스타일을 좀 더 세부적으로 제어할 수 있습니다.

5. 레이아웃 및 여백 조정

CSS는 워드프레스 페이지의 레이아웃을 설정하는 데에도 큰 역할을 합니다. 각 요소 간의 여백을 조정하고, 페이지 레이아웃을 세부적으로 설계할 수 있습니다. 여백(margin)과 패딩(padding)을 조정하여 요소 간의 공간을 설정할 수 있습니다.

예를 들어, 본문과 사이드바 간의 여백을 설정하려면 다음과 같은 CSS 코드를 삽입할 수 있습니다:

.content {
    width: 80%;
    float: left;
}

.sidebar {
    width: 20%;
    float: right;
    padding: 15px;
}
CSS

이 코드는 본문(content)과 사이드바(sidebar)의 레이아웃을 설정하며, 각각의 너비를 80%, 20%로 나누어 배치합니다. 또한, 사이드바에 패딩을 추가하여 내부 요소들이 적절한 간격을 유지하도록 설정했습니다.

6. 반응형 디자인의 구현

모바일 및 다양한 기기에서 잘 작동하는 웹사이트를 제작하기 위해서는 반응형 디자인을 구현하는 것이 필수입니다. CSS의 미디어 쿼리(Media Queries)를 사용하면 화면 크기에 맞춰 각기 다른 스타일을 적용할 수 있습니다.

예를 들어, 화면 크기가 860px 이하일 때 텍스트 크기를 줄이고, 요소의 너비를 조정하려면 아래와 같은 코드를 적용할 수 있습니다:

@media (max-width: 860px) {
    body {
        font-size: 15px;
    }

    .content, .sidebar {
        width: 100%;
        float: none;
    }
}
CSS

이 코드는 화면 크기가 860px 이하로 줄어들면 본문과 사이드바의 너비를 100%로 설정하여, 모바일 기기에서 한 줄로 배치될 수 있도록 만듭니다. 이렇게 반응형 CSS를 추가하면 다양한 화면 크기에서 웹사이트가 사용자 환경에 적합하게 표시되도록 조정할 수 있습니다.

7. 사용자 정의 CSS 추가하기

워드프레스에서는 크게 두 가지 방법으로 CSS 커스터마이징을 할 수 있습니다. 첫 번째는 자식 테마의 style.css 파일을 수정하는 것이고, 두 번째는 사용자 정의 CSS(Custom CSS)를 쉽게 추가할 수 있습니다. 워드프레스의 대시보드에서 ‘외모 > 사용자 정의 > 추가 CSS’ 메뉴를 통해 CSS 코드를 입력하면, 별도의 플러그인이 없어도 즉시 스타일 변경이 가능합니다.

이 기능을 이용하면 테마 파일을 찾아서 수정하는 번거로운 작업이 없어도 원하는 대로 웹사이트 디자인을 변경할 수 있어, 초보자에게는 특히 유용한 방법입니다.

8. 플러그인을 활용한 CSS 커스터마이징

CSS에 익숙하지 않거나 더 쉽게 스타일을 수정하고 싶다면, CSS 커스터마이징을 도와주는 플러그인을 사용할 수 있습니다. 다음과 같은 플러그인들은 초보자에게 유용합니다:

  • Visual CSS Style Editor: 실시간으로 사이트의 각 요소를 선택하고, 시각적으로 스타일을 변경할 수 있는 플러그인입니다.
  • Simple Custom CSS: 기본적인 CSS 커스터마이징을 도와주는 플러그인으로, 별도의 코드 편집 없이 CSS 코드를 추가할 수 있습니다.
  • CSS Hero: CSS 지식이 없어도 직관적인 인터페이스를 통해 웹사이트의 디자인을 수정할 수 있는 플러그인입니다.

9. 커스터마이징 시 주의할 점

끝으로, CSS를 활용한 워드프레스 커스터마이징을 할 때는 아래와 같은 사항에 유의해야 합니다:

  • 브라우저 호환성: 모든 브라우저에서 항상 동일한 스타일이 적용되지 않을 수 있으므로, 최대한 다양한 브라우저에서 테스트하는 것이 중요합니다.
  • 백업: 수정하기 전에 항상 백업 해야 합니다. 잘못된 코드 수정으로 사이트에 치명적인 오류를 일으켜 복구가 어려울 수 있기 때문입니다. 이러한 이유로 인해 자녀 테마(Child Theme)를 사용하는 것은 필수적입니다. 수정 전에는 wp-content폴더 > theme폴더 > 수정할 테마의 자녀 테마 폴더를 서버에서 다운 받는 방식 등을 이용하여 백업한 후, 수정하실 것을 권장합니다.

지금까지 긴 글을 보시느라 수고하셨습니다. 오늘은 CSS를 활용한 워드프레스 테마 커스터마이징의 기본에 대해서 알아보았습니다. 이제 다양한 스타일을 추가하고, 블로그나 홈페이지를 더 멋지고 개성 넘치도록 만들어보세요!

댓글 남기기