WordPress에서 CSS를 편집하는 방법(사이트 모양 편집, 추가 및 사용자 정의)

WordPress CSS를 편집하고 싶지만 어디서부터 시작해야 할지 모르십니까? CSS 스타일을 사용하면 사이트의 모양을 전역적으로 또는 특정 페이지에서 편집할 수 있습니다. 색상을 추가하고, 특정 요소에 간격을 두고, 레이아웃을 디자인하고, 기본적으로 WordPress 테마의 모든 항목이 어떻게 보이는지 정확하게 변경합니다.

WordPress의 개발 환경에 더 익숙해지고 싶거나 웹사이트의 모양을 더 세밀하게 제어하고 싶다면 WordPress에 CSS를 추가하는 방법과 이미 있는 것을 변경하는 방법을 알아야 합니다.

테마를 편집하고 추가 CSS를 포함하여 사이트의 모든 시각적 요소를 최적화할 수 있습니다. 오늘은 이에 대해 자세히 살펴보도록 하겠습니다.

시작할 준비가 되셨습니까? 해보자!

비디오 버전을 보고 싶으십니까?

CSS 편집이란 무엇입니까?

CSS는 Cascading Style Sheets의 약자로 HTML 외에 가장 많이 사용되는 웹 언어입니다. CSS가 HTML 요소의 스타일을 지정하는 데 사용되기 때문에 두 가지가 함께 사용됩니다. HTML은 웹사이트 모양의 토대를 마련하고 CSS는 스타일을 추가하는 데 사용됩니다.

CSS는 웹사이트를 반응형으로 만들고, 색상을 추가하고, 글꼴을 변경하고, 레이아웃을 수정하고, 일반적으로 웹사이트의 시각적 표현을 미세 조정할 수 있는 기능을 제공합니다. HTML 및 JavaScript와 마찬가지로 CSS는 프론트엔드 클라이언트 측 언어입니다. 즉, 백엔드 서버가 아닌 사용자 측에서 실행됩니다.

WordPress 개발에 뛰어들 때 HTML, CSS, JavaScript 및 PHP는 알아야 할 언어입니다. 이것이 핵심 CMS와 많은 테마 및 플러그인이 내장된 것입니다.

그러나 웹 디자이너나 개발자가 아니더라도 약간의 CSS를 선택하는 것이 좋습니다. CSS를 사용하여 웹사이트에서 요소를 이동하거나 스타일을 지정하거나 테마에 약간의 미적 변화를 주어 자신에게 더 잘 맞도록 할 수 있습니다.

워드프레스와 CSS

WordPress 내에서 CSS는 약간 다릅니다. 템플릿 파일, 템플릿 태그, 그리고 물론 CSS 스타일시트로 구성된 테마에 의해 제어됩니다. 귀하의 테마에 의해 생성되었지만 이 모든 것은 귀하가 편집할 수 있습니다.

템플릿 파일은 웹사이트의 일부를 섹션(예: header.php 또는 archive.php)으로 분할하고 템플릿 태그는 데이터베이스의 파일 및 기타 콘텐츠를 호출하는 데 사용됩니다. 이러한 파일은 실제로 대부분 PHP와 HTML로 구성되어 있지만 필요한 경우 CSS를 추가할 수 있습니다.

당신이 정말로 찾고 있는 것은 스타일시트 또는 style.css입니다. 웹사이트의 모양을 변경하려면 이 파일에서 코드를 추가하고 편집하는 방법을 배워야 합니다.

CSS로 WordPress 테마를 사용자 정의하는 방법

테마를 사용자 정의하고 CSS를 사용하여 사이트의 모양을 변경하려면 고유한 코드를 추가하거나 이미 있는 것을 편집해야 합니다. 테마 파일을 건드릴 필요 없이 CSS를 추가하는 방법이 있지만 기존 테마 코드를 변경하려면 사이트의 스타일시트에 액세스해야 합니다.

이러한 변경을 수행할 때 한 가지 알아야 할 사항이 있습니다. 테마가 업데이트되면 style.css , functions.php 또는 기타 테마 템플릿 파일에 대한 모든 편집 내용이 지워집니다. 일반적으로 자식 테마를 사용하지 않고 편집기에서 웹사이트를 직접 변경해서는 안 됩니다.

스타일시트는 웹사이트의 "지침 목록"과 같으며 스타일 지정 방식과 CSS 코드 처리 방식을 정확하게 설정합니다. 여기에서 대부분의 편집 작업을 수행하지만 header.php 및 footer.php와 같은 다른 테마 템플릿 파일에 액세스하는 방법도 보여줍니다.

WordPress 대시보드 또는 FTP 클라이언트를 통해 WordPress 웹사이트의 스타일시트에 액세스하는 두 가지 방법이 있습니다. 우리는 둘 다 다룰 것입니다.

직접 하는 것이 편하지 않습니까? 해당 단계를 처리할 WordPress 개발자를 고용하는 것이 좋습니다.

대시보드에서 WordPress CSS 편집

CSS 스타일시트에 액세스하는 가장 쉽고 편리한 방법은 바로 WordPress 대시보드에 있습니다. FTP 프로그램이나 코드 편집기를 설치할 필요가 없습니다. 구문 강조 표시 및 기능 설명서가 내장되어 있는 모든 파일을 직접 편집할 수 있습니다.

핵심 파일을 크게 편집하기 전에 항상 WordPress 사이트를 백업해야 합니다. CSS를 처음 접하는 경우 실수로 실수를 하여 사이트 모양이 손상되기 쉽고 변경 사항을 되돌리는 방법을 파악하기 어려울 수 있습니다.

백업 및 하위 테마를 만든 후에는 백엔드에 로그인합니다. 메뉴로 이동하여 모양 > 테마 편집기 를 클릭하여 편집기를 찾을 수 있습니다.

이러한 파일을 직접 편집하지 말라는 경고 팝업이 표시되어야 합니다. 걱정하지 마십시오. "이해합니다"를 클릭하십시오. 중요한 변경을 하기 전에 하위 테마를 사용하고 웹사이트를 백업하라는 경고일 뿐입니다. 이 단계를 따르면 안전하게 편집할 수 있습니다.

이제 들어왔습니다! 기본적으로 스타일시트에 있어야 하지만 그렇지 않은 경우 테마 파일을 보려면 오른쪽 메뉴를 확인하세요.

style.css 외에도 functions.php, header.php 및 single.php와 같은 템플릿 파일에 액세스할 수 있습니다. 이 모든 것은 사이트의 특정 페이지가 작동하는 방식에 영향을 미칩니다.

그러나 이러한 특정 파일을 살펴보기 전에 PHP에 익숙해져야 합니다.

여기에서 변경한 대부분의 CSS 변경 사항은 전역적임을 기억하십시오. 예를 들어 H1 헤더를 특정 글꼴로 변경하면 사이트의 모든 단일 페이지에 적용됩니다. 특정 페이지의 스타일을 사용자 지정하려면 특수 구문을 사용해야 합니다.

테마 파일을 직접 편집

테마 편집기에 액세스할 수 없거나 FTP를 통해 작업을 수행하려는 경우 어떻게 합니까? 백엔드 편집기를 사용하는 것이 더 쉽지만 일부 테마 또는 플러그인이 이를 비활성화할 수 있습니다. 이 경우 FTP를 통해 웹사이트에 연결해야 합니다.

FTP 또는 파일 전송 프로토콜을 사용하면 웹 사이트의 파일에 원격으로 액세스하고 수정할 수 있습니다. 가장 먼저 해야 할 일은 FileZilla 또는 다른 FTP 클라이언트를 다운로드하는 것입니다.

다음으로 호스트에게 연락하여 FTP 자격 증명(해당되는 경우 호스트, 포트 및 사용자 이름/비밀번호)을 요청해야 합니다. 호스트에 대시보드가 ​​있는 경우 로그인하여 대시보드를 찾을 수 있습니다.

Kinsta 사용자의 자격 증명은 사이트 > SFTP/SSH 아래의 MyKinsta 대시보드에 있습니다.

일단 가지고 있으면 FTP 클라이언트를 시작하고 해당 정보를 입력하십시오. 작동하지 않으면 호스트 섹션의 URL 앞에 "sftp://"를 넣어 보십시오.

들어가면 style.css 파일을 찾을 수 있습니다. wp-content 폴더를 클릭하여 연 다음 테마 폴더(예: T goy Twenty 테마)를 클릭한 다음 style.css가 표시될 때까지 스크롤합니다.

두 번 클릭하여 열고(또는 마우스 오른쪽 버튼을 클릭하고 보기/편집 선택) 수정합니다. 저장하고 서버에 다시 업로드하는 것을 잊지 마십시오.

home.php, single.php, archive.php와 같은 다른 템플릿 파일을 편집해야 하는 경우 style.css와 동일한 폴더에서 찾을 수 있습니다.

FTP를 통해서든 대시보드를 통해서든 테마 파일을 편집하는 것이 항상 필요한 것은 아닙니다. 사실, 추가 코드를 추가하는 경우에는 이 작업을 수행하지 않는 것이 좋습니다.

작은 추가의 경우 WordPress 사이트에 CSS를 추가하는 가장 좋은 방법은 다음과 같습니다.

WordPress에 사용자 정의 CSS를 추가하는 방법

기존 CSS 코드를 편집하지 않고 대신 고유한 스타일을 추가하려는 경우 다음 방법 중 하나를 사용하는 것이 좋습니다. WordPress 사용자 지정 도구 또는 전용 플러그인 사용.

하나는 이러한 방법 중 하나를 통해 추가된 CSS 코드가 훨씬 더 쉽게 액세스하고 사용할 수 있다는 것입니다. 나중에 수정하려는 경우 새 CSS를 잘못된 위치에 넣거나 추가한 위치를 잊어버리는 것에 대해 걱정할 필요가 없습니다.

뉴스레터 신청

트래픽을 1000% 이상 증가시킨 방법을 알고 싶으십니까?

WordPress 내부자 팁이 포함된 주간 뉴스레터를 받는 20,000명 이상의 다른 사람들과 함께하십시오!

지금 구독

또한 이러한 방법 중 하나를 통해 추가한 CSS는 테마가 업데이트될 때 손실되지 않습니다(테마를 변경하면 여전히 사라질 수 있음).

즉, 자식 테마를 사용할 필요가 없으며 문제가 발생하면 방금 추가한 CSS를 제거하기만 하면 됩니다.

일부 사람들은 주요 업데이트 중에 CSS가 가끔 손실된다고 보고했으므로 웹사이트의 백업을 계속 유지해야 합니다. 그래도 이 방법은 테마 파일을 직접 편집하는 것보다 훨씬 안정적입니다.

style.css에 코드를 추가하고 하루라고 부를 수 있지만, 하위 테마를 만들고 싶지 않고 테마의 기존 CSS를 크게 편집하고 잠재적으로 모든 작업이 지워지게 하는 것이 가장 좋습니다. WordPress 사용자 정의 도구에서 추가 CSS 옵션을 사용하거나 플러그인을 설치합니다.

1. 워드프레스 커스터마이저를 통한 CSS 편집

테마 편집기를 사용하는 대신 이것을 시도하십시오. WordPress 백엔드에 로그인하고 모양 > 사용자 정의 를 클릭하여 테마 사용자 정의 화면을 엽니다. 색상, 메뉴 또는 기타 위젯과 같은 요소를 사용자화할 수 있는 옵션이 왼쪽에 있는 웹사이트의 실시간 미리보기가 표시됩니다.

이 메뉴의 맨 아래에 추가 CSS 상자가 있습니다.

클릭하여 엽니다. 코드 입력 상자와 몇 가지 지침이 있는 새 화면으로 이동합니다. 추가 CSS 화면에는 테마 편집기와 마찬가지로 구문 강조 표시와 함께 코드가 잘못되었는지 알려주는 유효성 검사가 포함되어 있습니다.

작성하는 모든 코드는 오류가 없는 한 자동으로 오른쪽의 미리보기 영역에 나타납니다(어쨌든 게시하도록 선택할 수 있음).

작업을 마치면 코드를 게시하거나, 언제 적용되는지 예약하거나, 나중에 작업할 수 있도록 초안으로 저장할 수 있습니다. 다른 사람과 공유할 미리보기 링크를 얻을 수도 있습니다.

보시다시피 추가 CSS 페이지는 테마 편집기보다 여러 면에서 더 강력하고 핵심 파일을 엉망으로 만드는 것보다 코드를 추가하는 데 훨씬 더 적합합니다.

여기에 작성하는 CSS 코드는 테마의 기본 스타일을 덮어쓰며 테마가 업데이트될 때 사라지지 않습니다. 미리보기에서 "라이브"로 표시되지 않으면 CSS 코드에서 올바른 선택기를 사용하고 있는지 다시 확인하십시오.

테마 편집기와 마찬가지로 CSS는 기본적으로 전역적이지만 특정 페이지를 대상으로 하는 코드를 작성할 수 있습니다.

한 가지 단점은 테마를 전환하면 작성한 모든 내용이 지워진다는 것입니다. 새 테마로 이동하기 전에 CSS를 백업해야 합니다. 그렇지 않으면 많은 작업을 잃게 될 수 있습니다.

이 옵션을 사용하는 데 어려움을 겪고 있거나 여러 테마에서 작동하고 특정 페이지를 보다 쉽게 ​​대상으로 지정할 수 있는 솔루션을 원하면 대신 플러그인을 사용해 보세요.

2. 플러그인을 사용하여 WordPress에 사용자 정의 CSS 추가

플러그인을 사용하여 WordPress에 CSS를 추가하려는 몇 가지 이유가 있습니다. 기능은 추가 CSS 메뉴와 유사하지만 일반적으로 테마를 전환/업데이트하더라도 스타일이 유지됩니다.

UI를 더 즐기거나 자동 완성과 같은 추가 기능을 좋아할 수도 있습니다. 일부 플러그인을 사용하면 직접 작성하지 않고 드롭다운 메뉴를 통해 CSS를 빌드할 수도 있습니다.

간단한 사용자 정의 CSS

Simple Custom CSS는 사용 편의성, 최소한의 인터페이스 및 가벼운 백엔드로 인해 가장 인기 있는 CSS 편집기 플러그인입니다. 요컨대, 큰 펀치를 포장하는 매우 작은 WordPress 플러그인입니다.

설정은 간단하며 성능에 부정적인 영향을 미치지 않습니다. 모든 테마에서 작동하며 구문 강조 표시 및 오류 검사가 포함됩니다.

간단한 사용자 정의 CSS 및 JS

Simple Custom CSS와 JS는 좋은 대안입니다. 또한 머리글, 바닥글, 프런트엔드 또는 관리 백엔드를 대상으로 지정할 수 있습니다.

SiteOrigin CSS

SiteOrigin CSS는 기존 CSS 편집기도 포함하는 또 다른 옵션입니다. 언제든지 Visual Editor와 Visual Editor 간에 전환할 수 있습니다.

WP 사용자 정의 CSS 추가

특정 페이지에 CSS를 추가하는 데 어려움을 겪고 있다면 WP 사용자 정의 CSS 추가는 편집 화면에 사용자 정의 CSS 상자를 추가하고 글로벌 스타일도 함께 제공됩니다.

CSS 영웅

시각적 CSS 편집기를 사용해 볼 수도 있습니다. 이것들은 모든 복잡한 코딩을 취하여 모든 프로그래밍을 처리하는 일련의 사용하기 쉬운 입력 필드 및 드롭다운 메뉴로 전환합니다.

CSS Hero는 몇 가지 매우 강력한 기능(애니메이션, 장치별 편집, 비파괴 편집 등)이 포함된 프리미엄 시각적 편집 플러그인입니다.

CSS를 배울 수 있는 곳

CSS에 뛰어들 준비가 되셨습니까? 이 초보자 자습서는 기본 사항을 설정하고 고유한 기능적 CSS 코드를 작성하기 위해 알아야 할 구문을 알려줍니다.

벅찰 수 있지만 정말 고급스러운 작업을 시도하지 않는 한 CSS는 그리 어렵지 않습니다! 배경색을 변경하거나 글꼴 스타일을 설정하는 것과 같은 간단한 작업은 매우 쉽고 온라인에 많은 예제가 있습니다.

(추천 자료: WordPress 웹사이트에서 사용할 수 있는 50개 이상의 최신 글꼴)

인터넷에서 찾을 수 있는 대부분의 프로그래밍 자습서도 완전 무료입니다. 저렴한 비용으로 많은 정보가 있습니다.

다음은 초보자를 위한 최고의 CSS 자습서를 다루는 몇 가지 예입니다.

• W3Schools CSS 자습서: 여기에는 작업할 수 있는 심층 자습서, 예제 및 참조와 같이 절대적으로 많은 정보가 있습니다. W3Schools의 튜토리얼은 최대한 간단하고 따라하기 쉽기 때문에 초보자라도 시작하기에 좋은 곳입니다.
• Codeacademy Learn CSS: 6개의 무료 실습 수업을 통해 CSS의 기초를 배우게 됩니다. 이것은 단순한 비디오 자습서가 아니라 실제 코드로 작업할 수 있는 대화형 수업입니다. Pro 버전을 사용하면 작업할 퀴즈와 자유 형식 프로젝트도 얻을 수 있습니다.
• 한 시간 만에 CSS 배우기: 많은 사람들이 새로운 프로그래밍 언어를 배우고 싶어하지만 시간을 할애할 시간이 없습니다. 하지만 한 시간만 투자할 수 있다면 20개 파트로 구성된 이 무료 과정을 통해 CSS를 배울 수 있습니다. 끝까지 마스터가 아니더라도 기본은 잘 알고 있어야 합니다.
• WordPress 사용자를 위한 기본 HTML 및 CSS 소개: WordPress에 특정한 것을 찾고 계십니까? HTML과 CSS를 작성하는 데 항상 어려움을 겪고 있다면 이 과정이 적합합니다. 유료지만 52개의 강의와 5시간 분량의 동영상이 함께 제공됩니다.

요약

WordPress 사용자로서 CSS에 뛰어드는 것은 처음에는 혼란스러울 수 있습니다. 그러나 테마 파일을 편집하는 방법과 스타일을 추가할 위치를 알고 나면 더 이상 문제가 없습니다.

테마 파일은 백엔드에서 또는 FTP를 통해 편집하여 사이트의 모양을 변경할 수 있지만 기존 코드를 편집해야 하는 경우가 아니면 일반적으로 피해야 합니다.

나만의 CSS를 추가하려는 경우 모양 > 사용자 정의 아래의 추가 CSS 페이지를 사용하거나 더 강력한 것이 필요한 경우 플러그인을 사용해 보세요.

하위 테마를 사용하지 않는 한 테마 업데이트 시 스타일시트에 대한 편집 내용이 손실됩니다. 추가 CSS의 경우에도 마찬가지입니다. 코드는 업데이트로부터 안전하지만 잊지 마세요. 테마를 변경할 때 플러그인만 CSS를 유지합니다.

어떤 방법을 선택하든 항상 스타일시트와 추가한 사용자 정의 코드를 포함하여 웹사이트를 정기적으로 백업해야 합니다. 이제 우리가 제공한 리소스를 사용하여 CSS 기본 사항을 다듬을 때입니다.

행복한 스타일링!

추천 자료: 온라인 최고의 웹 디자인 과정