워드프레스 커스터마이징, CSS와 HTML로 바꿔보자

by

워드프레스 커스터마이징할 때 HTML과 CSS를 이용하는 이유?

워드프레스는 그 자체로 매우 강력한 CMS(콘텐츠 관리 시스템)이지만, 웹사이트를 더 개성 있게 꾸미고 독창적으로 만들기 위해서는 기본 테마와 플러그인 만으로는 한계가 있습니다. 이때 HTML과 CSS를 이용하면, 구조를 마음대로 수정하고 디자인을 자유롭게 변경할 수 있습니다. HTML은 콘텐츠의 구조를 정의하고, CSS는 그 콘텐츠를 시각적으로 스타일링하는 역할을 합니다. 이 글에서는 HTML과 CSS를 사용하여 웹사이트를 수정하는 방법을 설명하고, 이를 통해 웹사이트를 기능적이면서도 아름답게 만드는 방법을 알아보겠습니다.

1. HTML과 CSS의 기본 이해

HTML(하이퍼텍스트 마크업 언어)은 홈페이지의 뼈대를 만드는 데 사용되는 언어입니다. 각 콘텐츠 요소는 HTML 태그로 감싸지며, 페이지, 게시물, 글, 위젯 등이 HTML 구조로 구성됩니다. CSS(Cascading Style Sheets)는 HTML로 구성된 콘텐츠를 꾸미는 데 사용됩니다. CSS를 이용하면 텍스트 크기, 색상, 배경, 레이아웃 등을 자유로우면서도 매우 세부적으로 조정할 수 있습니다.

테마와 플러그인은 HTML과 CSS를 코드 수정 없이 간단하게 변경할 수 있게 해주지만, 특정 요소를 수정하거나 테마나 플러그인에 없는 새로운 스타일을 추가하려면 직접 HTML과 CSS 코드를 수정해야 할 때가 있습니다. 워드프레스에서는 사용자 정의 CSS를 추가하거나, 테마의 템플릿 파일을 편집하여 HTML 구조를 수정하는 것이 가능합니다.

2. 자녀 테마(Child Theme)를 사용한 HTML 커스터마이징

제공되는 테마는 업데이트될 때마다 변경된 사항이 초기화될 수 있습니다. 이러한 문제를 피하기 위해 자녀 테마(Child Theme)를 사용하는 것이 좋습니다. 자녀 테마는 부모 테마의 기능을 그대로 상속받으며, 자녀 테마에서 수정한 사항만 적용되기 때문에 부모 테마의 업데이트에도 영향을 받지 않습니다.

자녀 테마를 만드는 방법에 대한 보다 자세한 사항은 다음의 글을 참고하시면 좋습니다.

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

자녀 테마에서 HTML을 수정하려면, 템플릿 파일을 수정해야 합니다. 템플릿 파일은 각 페이지나 포스트 유형에 대한 HTML 구조를 정의하며, header.php, footer.php, single.php 등 다양한 파일로 구성됩니다. 원하는 페이지의 구조를 변경하려면 해당 템플릿 파일을 자녀 테마에 복사한 뒤, 필요한 HTML 코드를 추가하거나 수정하면 됩니다.

3. CSS를 활용한 스타일 변경

HTML이 웹사이트의 구조를 정의한다면, CSS는 그 구조를 꾸미는 역할을 합니다. 테마의 디자인을 바꾸고 싶을 때, CSS를 통해 원하는 스타일을 추가할 수 있습니다. 텍스트의 색상, 크기, 간격 등을 변경하거나, 웹사이트 전체의 레이아웃을 조정할 수 있습니다.

CSS를 수정하는 방법은 여러 가지가 있는데, 그 중 가장 간단한 방법은 대시보드에서 제공하는 ‘추가 CSS’ 기능을 활용하는 것입니다. 관리자 페이지에서 외모 > 사용자 정의 > 추가 CSS 메뉴를 선택하면, 테마 파일을 수정하지 않고도 CSS 코드를 추가할 수 있습니다.

워드프레스 추가 CSS 예제
추가 CSS 사용 예제

예를 들어, 웹사이트의 제목 색상을 빨간색으로 변경하려면, 다음과 같은 코드를 추가할 수 있습니다:

h1 {
    color: red;
}
CSS

웹사이트의 본문 폰트 크기를 19px로 조정하고 싶다면, 아래 코드를 추가하면 됩니다:

body {
    font-size: 19px;
}
CSS

이처럼 CSS는 워드프레스 테마의 스타일을 자유롭게 수정할 수 있는 강력한 도구이며, HTML 구조를 유지하면서 디자인을 독창적으로 만들 수 있습니다.

4. 템플릿 태그를 사용한 HTML 커스터마이징

템플릿 태그는 자주 사용하는 HTML 요소를 쉽게 삽입할 수 있게 도와주는 함수입니다. 이를 사용하면, 복잡한 PHP 코드를 작성하지 않고도 웹사이트의 콘텐츠를 동적으로 생성할 수 있습니다. 예를 들어, 현재 게시물의 제목을 출력하려면 다음과 같은 템플릿 태그를 사용할 수 있습니다.

<?php the_title( '<h3>', '</h3>' ); ?>
PHP

이 코드는 현재 게시물의 제목을 HTML의 h3태그로 출력해줍니다. 비슷한 방식으로, the_author(), the_content() 등의 템플릿 태그를 사용하여 게시물의 작성자나 본문을 출력할 수 있습니다.

템플릿 태그를 활용하면, HTML 구조 안에 워드프레스 콘텐츠를 동적으로 삽입할 수 있으며, 이를 통해 더욱 유연하고 동적인 웹사이트를 구축할 수 있습니다.

5. 커스텀 페이지 템플릿 만들기

제공되는 기본 페이지 템플릿으로는 웹사이트의 다양한 요구를 모두 충족할 수 없는 경우가 많습니다. 이때는 커스텀 페이지 템플릿을 만들면 HTML 구조를 원하는 대로 수정할 수 있습니다.

예를 들어, 특정 페이지에서만 전혀 다른 레이아웃을 적용하고 싶다면, 새 템플릿 파일을 생성하여 해당 페이지에만 적용할 수 있습니다. 이를 위해서는 테마 디렉토리 안에 .php 파일을 하나 생성하고, 해당 파일 상단에 다음과 같은 주석을 추가합니다:

<?php
/*
Template Name: Custom Template
*/
?>
PHP

그 후, 이 템플릿 파일에 HTML과 CSS 코드를 원하는 방식으로 작성하여, 맞춤형 페이지 레이아웃을 만들 수 있습니다. 이렇게 만든 템플릿은 페이지 작성시 템플릿 선택 옵션에서 선택할 수 있으며, 특정 페이지에만 적용할 수 있습니다.

6. 반응형 디자인 구현

모바일 기기 사용이 늘면서 웹사이트의 반응형 디자인(Responsive Design)은 필수 요소가 되었습니다. 반응형 디자인을 구현하면 다양한 화면 크기에서 웹사이트가 제대로 표시되며, 사용자 경험을 크게 개선할 수 있습니다. CSS의 미디어 쿼리(Media Queries) 기능을 사용하면 화면 크기에 맞는 다양한 스타일을 적용할 수 있습니다.

예를 들어, 화면 너비가 778px 이하인 경우에만 글꼴 크기를 줄이려면 다음과 같은 미디어 쿼리를 사용할 수 있습니다:

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

이 코드는 화면 크기가 778px 이하일 때 본문 글꼴 크기를 15px로 줄이는 기능을 합니다. 이처럼 미디어 쿼리를 사용하면 다양한 기기에서 최적화된 레이아웃을 제공할 수 있습니다.

7. 커스텀 CSS 클래스와 ID 사용

HTML의 클래스와 ID는 특정 요소에 CSS 스타일을 적용하는 데 사용됩니다. HTML 코드를 커스터마이징할 때는, 필요한 요소에 커스텀 클래스나 ID를 부여하여 CSS를 통해 해당 요소의 스타일을 제어할 수 있습니다.

예를 들어, 특정 버튼에 고유한 스타일을 적용하려면 해당 버튼에 클래스를 추가한 뒤, CSS에서 그 클래스를 참조하여 스타일을 정의할 수 있습니다:

<button class="custom-button">확인</button>
HTML
.custom-button {
    background-color: #ff6600;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
CSS

이 코드를 통해 “확인”이라는 버튼에 사용자가 임의로 스타일을 적용할 수 있습니다. 커스텀 클래스와 ID를 적절히 사용하면, 여러가지 요소에 요소마다 개별적인 디자인을 적용하여 사이트를 차별화할 수 있습니다.

8. 마지막으로

HTML과 CSS를 사용한 커스터마이징은 여러분의 블로그나 홈페이지를 더욱 독창적이고 기능적으로 만들 수 있는 강력한 방법입니다. HTML을 통해 콘텐츠 구조를 정의하고, CSS를 통해 시각적으로 매력적인 스타일을 추가하면, 사용자 경험을 크게 향상 시킬 수 있습니다. 이 글을 통해 HTML과 CSS의 기본 개념을 이해하고, 워드프레스에서 이를 실용적으로 적용하는 방법을 알아보았습니다. 이러한 방법들을 통해 여러분의 사이트를 더욱 개성 있게 만들어보세요.

댓글 남기기