워드프레스에서 CSS 추가하기

22

워드프레스 커스터마이징에서 가장 중요한 부분 중 하나가 CSS입니다. CSS를 통해 레이아웃을 완전히 다르게 바꿀 수 있습니다. 하지만 “이 CSS 코드를 워드프레스 시타일시트에 추가하세요”라고 하면 “어떻게 CSS 코드를 추가하나요?“하고 묻는 분들이 간혹 있습니다. 처음 워드프레스를 접하면 생소한 스타일과 용어 때문에 사용이 생각보다 쉽지 않을 수 있습니다. 워드프레스에서 CSS 코드를 추가하는 방법은 다양합니다. 자신에게 편한 방법을 사용하시면 되겠습니다.

2018_0131 추가: 아래에 다양한 방법을 설명하고 있는데요, 이 중에서 자식 테마를 만들고 FTP를 통해 자식 테마 내의 스타일시트 파일에 추가하는 방법을 권장합니다. 테마 편집기를 이용한 방법은 특히 권장하지 않습니다. 보안을 위해 wp-config.php 파일에 define(‘DISALLOW_FILE_EDIT’, true);를 추가하여 테마 편집기를 비활성화하는 것이 좋습니다(“워드프레스 보안 강화하기” 참고).

사용자 정의하기 내의 추가 CSS 사용하기

워드프레스 4.7에서는 사용자 정의하기 내에서 커스텀 CSS를 추가할 수 있는 옵션이 새롭게 추가되었습니다. 이제 실시간으로 CSS가 반영되는 것을 확인하면서 CSS를 쉽게 추가할 수 있게 되었습니다.

테마 디자인 > 사용자 정의하기 > 추가 CSS (Additional CSS)를 클릭하여 사용자 CSS를 추가할 수 있습니다. (워드프레스 버전 5 미만에서는 외모 > 사용자 정의하기 > 추가 CSS 메뉴에서 추가할 수 있습니다.)

실제 UI는 사용 중인 워드프레스 테마에 따라 조금 다를 수 있습니다. 특정 테마 내에서 CSS를 추가하는 경우에는 이 방법을 사용하면 될 것 같습니다.

알림판에서 직접 CSS 편집하기

알림판에서 테마 디자인 > 테마편집기(버전에 따라 외모 > 테마편집기)를 눌러 스타일시트 파일을 선택하여 편집하는 방법입니다.
Edit CSS through Dashboard이 방법을 통해 테마의 다른 파일(header.php, functions.php 등)도 수정이 가능합니다. css를 수정하거나 추가하려면 스타일시트(style.css)를 선택하면 됩니다.
style.css주의: 자식 테마를 만들지 않고 원 테마의 스타일시트 파일을 직접 수정할 경우 테마가 업데이트되면 수정 사항이나 추가 사항이 사라집니다. 자식 테마(차일드 테마, 하위 테마)를 사용하거나 아래에 나와 있는 다른 방법을 사용하기 바랍니다. 자식 테마에 대한 내용은 이 글을 참고해보세요.

테마 내의 CSS 편집 기능

간혹 테마에서 CSS 편집 기능을 제공하는 경우가 있습니다. (하지만 무료 테마에는 이 기능을 제공하지 않는 테마가 많습니다.)
Theme Options Edit CSS실제 화면은 테마마다 다릅니다.

참고로 가장 있기 있는 유료 테마인 아바다(AVADA)의 경우  AVADA > 테마 옵션(Theme Options) > 사용자 정의 CSS(Custom CSS)를 선택하면 사용자 지정 CSS를 추가할 수 있는 화면이 표시됩니다.

AVADA Custom CSS - 워드프레스 아바다 사용자 정의 CSS(참고: 한글 언어 파일(PO)을 적용하면 Custom CSS가 “사용자 정의 CSS“로 표시됩니다.)

Salient Custom CSS Code

위의 그림은 AVADA와 비슷한 다목적 테마 중 하나인 Salient 테마의 Custom CSS Code(사용자 CSS 코드) 섹션입니다. 검은색으로 된 텍스트 입력란에 CSS 코드를 추가하면 됩니다.

젯팩(JetPack)에서 제공하는 “CSS 편집”

JetPack을 설치하여 활성화하면 CSS 편집 기능을 사용할 수 있습니다. 외모 > CSS 편집을 선택하여 사용자 CSS를 추가할 수 있습니다.
Edit CSS provided by Jetpack
위 메뉴가 없다면 젯팩 > 설정에서 사용자 정의 CSS를 활성화해주시기 바랍니다.Enable Custom CSS in JetPack
젯팩의 경우 테마가 바뀌면 CSS가 사라질 수 있으므로 항상 백업해주는 것이 좋을 것 같습니다.

플러그인 사용

사용자 CSS를 추가할 수 있는 플러그인이 있습니다. Custom CSS라고 플러그인에서 검색해 보면 여러 가지가 검색됩니다. Simple Custom CSS라는 플러그인을 사용하여 CSS를 추가할 수 있습니다.

워드프레스 커스텀 CSS 플러그인
Simple Custom CSS의 경우 테마가 바뀌더라도 추가된 CSS가 변경되지 않네요.

FTP를 사용하여 CSS 파일 편집

이 방법은 ftp를 사용할 수 있어야 합니다. FTP에 접속하여 편집하는 방법은 조금 번거로울 수 있지만 위의 방법들보다 저장하여 적용하는 시간이 빠르다는 장점이 있습니다. 위의 방법들은 대부분 css를 편집하고 저장하면 약간 딜레이가 발생합니다(물론 대수롭지는 않지만요). 그리고 영문 WordPress보다 한글 WordPress에서 딜레이가 심하네요. 그리고 ftp 사용하면 본인에게 익숙한 편집기를 사용할 수 있습니다(아래 파일질라 참조). 많은 편집기는 CSS에 오류가 있을 경우 오류를 표시해주는 기능이 있기 때문에 고급 사용자에게 권장됩니다.

파일질라 사용법: 파일질라를 사용하여 워드프레스 스타일시트 파일 편집하기

FTP(File Transfer Protocol)는 파일 전송을 위한 규약으로서 FileZilla와 같은 FTP  클라이언트를 사용하여 FTP에 접속할 수 있습니다.

FileZilla를 설치했다면 파일 > 사이트 관리자에서

FTP-information - 파일질라 사용하기

  • (1) 새 사이트를 누릅니다.
  • (2) 접속할 사이트의 이름을 적당히 입력합니다.
  • (3)(4) FTP  사이트 접속을 위해서는 호스트, 사용자 이름, 비밀번호 정보가 필요합니다. 호스트는 보통 사이트 주소입니다. 이 정보는 보통 웹호스팅 서비스에 가입할 때 설정합니다. 잘 모를 경우 호스팅 업체에 문의하시기 바랍니다. 잘 접속이 안 되면 해당 호스팅 업체에서 제공하는 FTP 설정 방법을 참고하시기 바랍니다. (간혹 위의 그림과 약간 다르게 설정하는 경우도 있습니다.)

이제 위의 그림에서 “접속”을 눌러 FTP에 접속할 수 있습니다.

FilieZilla - 워드프레스에서 FTP 접속하기

파일질라에서 FTP에 접속했다면, 위의 그림과 같이 수정할 파일을 선택한 후에 마우스 오른쪽 버튼을 누르고 “보기/편집“을 선택하여 파일을 수정할 수 있습니다. 그러면 텍스트 편집기 프로그램에서 편집할 파일이 열립니다. 스타일시트 파일(style.css 파일)은 /wp-content/themes/테마폴더/ 아래에 보통 위치해 있습니다. 파일을 편집한 후에 저장하고 파일질라를 선택하면 파일을 업로드할 것인지를 묻습니다. “예”를 선택하면 수정된 파일이 업로드되어 반영됩니다.

파일질라에서는 기본적으로 Windows의 메모장을 사용하여 파일을 편집하며, 파일 편집에 사용할 수 있는 텍스트 에디터(AcroEdit, EditPlus, EmEditor, UltraEdit 등)를 변경할 수 있습니다.

FileZilla-Editor-Change - 파일질라 사용하기

편집 > 설정 > “파일 편집”에서 기본 편집기로 “사용자 편집기 사용“을 선택하고 사용하고자 하는 편집기를 찾아서 선택하면 됩니다.

마치며

이상과 같이 다양한 방법을 통해 CSS를 추가할 수 있습니다. 본인에게 적합한 방법을 선택하여 이용하시면 되겠습니다. 참고로 어떤 이유로 인해 워드프레스 관리자 페이지(대시보드)에 접근할 수 없는 경우에는 FTP를 사용하여 파일을 편집할 수 있습니다. 따라서 기본적인 FTP 사용법을 익혀주면 언제가 유용하게 이용할 수 있습니다.

참고:

*일부 글에 제휴링크가 포함될 수 있습니다.기부를 통해 블로그 운영을 후원하실 수 있습니다.

Related Posts

댓글 22건
  1. Design

    안녕하세요 궁금했는데 잘보고 갑니다. 워드프레스를 알면서 한가지 궁금한게 있어 문의합니다.기존 수작업 홈페이지는 웹상에 Html 파일이 존재해서 그부분에 맞게 수정및 레이아웃과 스타일을 적용하면서 작업을 했었는데 워드프레스는 PHP언어로 된파일밖엔 없더군여. 페이지를 수정하고 레이아웃을 바꿔야하는데 어떻게 해야할지가 막막해서 문의 드립니다.정리하면 Html파일은 따로 없고 모듈을 호출하는 방식으로만 써야 하는지…Html파일이 있다면 어느 위치에서 확인하고 수정을 해야 되는지 궁금하내요. 감사합니다

    1. wordcracker

      안녕하세요?
      제 블로그를 방문해주셔서 감사합니다^^
      우선 http://www.thewordcracker.com/basic/the-anatomy-of-a-wordpress-posts-request/ 글을 한번 참고해보시기 바랍니다.

      그리고 가급적 테마 소스 파일을 수정하지 않는 것이 좋을 것 같고요, 수정해야 한다면 차일드 테마를 만들어서 하시기 바랍니다. 특히 플러그인이나 워드프레스 코어 파일은 수정하지 않는 것이 좋습니다(수정할 경우 업데이트할 때마다 문제가 될 것입니다).

      수정은 가능하면 액션/필터(후크)를 확인하여 액션/필터를 통해 조정해보시기 바랍니다.

      그럼, 수고하세요.

  2. 거북

    궁금한 것을 모두 해결했습니다. 자세한 설명에 감사드립니다..^^

    1. wordcracker

      감사합니다^^ 즐거운 하루되세요.

  3. 초보

    css 코드를 어디에 넣는줄 몰라서 헤맸었는데, 덕분에잘 해결되었습니다. 감사합니다.

  4. 하람

    안녕하세요..여기보니 친절하게 잘 설명해주셔서 정말 감사드립니다. 저도 워드프레스깔고 무료테마 설치해서 만들고 있는중인데요..배경색과 글자크기조정은 스타일시트에서 조정했는데..게시글박스에서 테두리선 없애는것과 게시글날짜와 이름같은걸 다 지우고 싶은데..뭘 고쳐야할지 전혀 모르겠더라구요..어떤분이 Simple Custom CSS 플러그인을 깔라고 조언주셨는데..첨 들어보는건데 그거 ftp 접속후 어디에 깔아야되며? 그다음어떻게 수정하는지 잘 모르겠습니다..여기서 설명해주시기 어려운건가요?? 조금이라도 조언부탁드립니다..ㅜ

    1. wordcracker

      관리자 페이지(대시보드)에서 플러그인 > 플러그인 추가하기를 선택하고 “Simple Custom CSS”를 검색하여 설치하시면 됩니다. 이 블로그에 플러그인 설치하는 방법에 대해 설명한 글이 있을 것입니다. 한번 검색해보시기 바랍니다.

  5. 황태현

    잘 봤습니다.FTP를 이용한 css 수정을 할 때 parents theme이 업그레이드되면 수정 사항들도 모두 사라지지 않을까요? 

    1. wordcracker

      안녕하세요?

      Parent Theme 내의 CSS 파일에서 수정할 경우 테마가 업데이트되면 수정 사항이 사라집니다.
      자식 테마를 이용해보시기 바랍니다. 아니면 플러그인을 사용하셔도 되고요.

      자식 테마 만드는 방법은 http://www.thewordcracker.com/basic/should-we-create-a-child-theme-and-how-to-do/ 글을 참고해보세요.

      만약 CSS만 수정되는 경우에는 굳이 Child Theme을 만들지 말고 Simple Custom CSS와 같은 플러그인으로도 적당할 것 같습니다.

      수고하세요.

  6. 제이제이

    기본 스타일시트 파일이 아닌 별도의 css 파일을 만들어 거기에 css 코드를 넣고 싶은데요. 어떻게 하면 되나요?

    1. wordcracker

      안녕하세요? 블로그를 방문해주셔서 감사합니다. 간단하게

      @import url("../mycustomstyle.css");

      위와 같은 코드를 추가하면 될 것 같습니다.

      이보다는 http://www.thewordcracker.com/intermediate/add-a-second-style-sheet-to-wordpress-theme/ 글에 소개된 방법을 참고해보시기 바랍니다.

      1. 제이제이

        조언 감사합니다. 알려주신 방법으로 한번 시도해보겠습니다.

  7. 제이제이

    잘 읽었습니다. 텍스트 편집기로 엠에디터를 사용하시네요. 저도 사용하는데 반갑네요. 괜찮은 프로그램이죠.

  8. 최춘식

    좋은 글이네요~

  9. 나그네

    CSS 코드를 워드프레스에서 어떻게 넣어야 할지 막막했는데… 감사합니다.

  10. 오성

    안녕하세요?

    Ftp를 사용하면 좋다고 하는데 ftp 사용이 쉽나요?
    1. wordcracker

      안녕하세요? 워드프레스 사이트를 운영하시려면 아무래도 ftp를 알고 있으면 좋을 것 같습니다.
      ftp는 별 것 없지만 컴퓨터에 익숙하지 않는 분들에게는 약간 어려울 수도 있겠다는 생각이 드네요.
      인터넷에 Filezilla 사용법이라고 검색하여 참고해보시기 바랍니다.
      그럼, 즐거운 주말되세요.

  11. 왕초보

    잘 보고 갑니다

  12. 김기수

    이 글 덕분에 궁금증이 풀렸습니다.

    css를 배워보고 싶은데 책을 사봐야 할까요?
    1. wordcracker

      안녕하세요?
      책을 사서 보셔도 되고요, https://opentutorials.org/course/4 페이지의 강좌를 들어보셔도 좋습니다.
      책은 한 권쯤 있어도 괜찮을 것 같습니다. 저는 처음 CSS를 접할 때 개념 잡는 것을 책으로 시작했고, 이후부터는 주로 인터넷을 참고했습니다.

      1. 김기수

        답변 감사합니다. CSS 책을 산다면 어떤 책이 좋을까요?

  13. 강미디어

    덕분에 쉽게 css 코드를 넣었습니다. 꾸벅