사용자 정의 CSS 추가

대부분의 변경 사항은 워드프레스 편집기의 설정을 통해 수행할 수 있지만 CSS 코드를 작성하는 경험이 있으면 CSS를 사용하여 사이트를 사용자 정의하는 것이 좋습니다. 이 가이드에서는 CSS로 웹사이트를 편집하는 방법을 보여드립니다.

이 기능은 워드프레스닷컴 프리미엄, 비즈니스, 상거래 요금제 및 기존 프로 요금제를 이용하는 사이트에서 사용할 수 있습니다. 무료 및 개인 요금제를 사용하는 사이트의 경우 요금제를 업그레이드하여 이 기능에 접근하세요.

CSS는 Cascading Style Sheet의 두문자어입니다. 웹 페이지에서 HTML 요소의 디자인을 제어하는 마크업 언어입니다. 워드프레스닷컴에는 고유한 CSS 스타일을 추가하여 테마의 기본 스타일을 재정의할 수 있는 CSS 편집기가 있습니다.

CSS를 사용하여 웹사이트 디자인을 수정할 수 있는 작업은 거의 무한합니다. 그러나 CSS와 HTML의 작동 방식에 대한 지식(아니면 최소한 배우고자 하는 의지)이 필요합니다. MDN 웹 문서의 CSS 가이드는 CSS를 배우기 시작하기에 훌륭한 장소입니다.

CSS 학습에 관심이 없으면 사이트에서 블록 테마를 선택하세요. 이러한 테마는 컴퓨터 코드에 대한 지식이 없어도 웹사이트 디자인의 모든 측면을 사용자 정의할 수 있는 가장 유연한 옵션을 제공합니다.

사이트의 CSS 편집기에 접근하는 방법은 테마에 따라 두 가지입니다. 아래에 각 방법을 설명하겠습니다.

사이트에서 사이트 편집기가 지원되는 테마를 사용하는 경우 이 방법을 사용하여 사이트를 CSS로 사용자 정의할 수 있습니다. 사이트가 사이트 편집기를 사용하는지 알아보는 빠른 방법은 알림판의 디자인에서 확인하는 것입니다. 여기에 편집기가 표시되면 다음 단계에 따라 CSS 편집기에 접근할 수 있습니다.

1. 사이트의 알림판을 방문합니다.
2. 디자인 → 편집기로 이동합니다.
3. 왼쪽의 디자인 메뉴에서 스타일을 클릭합니다.
   • 테마에 스타일 변형이 포함된 경우 연필 아이콘을 클릭하여 스타일 옵션을 열어야 합니다.

4. “스타일” 헤딩 오른쪽의 점 3개를 클릭하고 “추가 CSS“를 선택합니다.

5. 제공되는 텍스트 상자에 CSS를 입력하거나 붙여넣습니다.
6. 화면 오른쪽 상단의 “저장” 버튼을 클릭하여 CSS를 사이트에 저장합니다.

스타일북을 로드하여 CSS 변경 사항이 블록 유형에 미치는 영향을 미리 볼 수 있습니다. 눈 아이콘을 클릭하여 스타일북을 엽니다.

사이트 편집기 테마에서는 아래 단계에 따라 사이트 전체의 특정 블록에 CSS 코드를 적용할 수 있습니다.

1. 사이트의 알림판을 방문합니다.
2. 디자인 → 편집기로 이동합니다.
3. 왼쪽의 디자인 메뉴에서 스타일을 클릭합니다.
   • 테마에 스타일 변형이 포함된 경우 연필 아이콘을 클릭하여 스타일 옵션을 열어야 합니다.
4. 이번에는 “블록” 섹션을 선택하여 사이트 전체의 특정 블록 디자인을 사용자 정의하는 설정에 접근합니다.
5. CSS를 추가할 블록 이름을 클릭합니다. 검색 상자를 사용하여 원하는 블록 유형을 찾을 수도 있습니다.
6. 하단으로 스크롤하여 고급을 클릭합니다.
7. “추가 CSS“라고 표시된 상자에 해당 블록 유형의 모든 인스턴스에 적용되는 CSS를 입력합니다. 블록별 CSS를 추가할 때 CSS 선택기를 포함할 필요가 없습니다. 속성과 값만 추가하세요. 예는 위의 비디오에 포함되어 있습니다.
8. 화면 오른쪽 상단의 “저장” 버튼을 클릭하여 CSS를 사이트에 저장합니다.

클래식 테마 및 많은 서드파티 테마를 포함하여 사이트 편집기를 사용하지 않는 테마의 경우 다음 단계에 따라 CSS를 추가할 수 있습니다.

1. 사이트의 알림판을 방문합니다.
2. 디자인 → 사용자 정의 → 추가 CSS로 이동합니다.
3. 제공되는 텍스트 상자에 CSS를 입력하거나 붙여넣습니다. 오른쪽의 미리보기 창에 변경 사항이 반영됩니다.
4. “변경 사항 저장” 버튼을 클릭하여 사이트에 CSS를 저장합니다.

CSS 편집의 최신 리비전 25개가 저장되며 CSS 하단의 “전체 내용 보기“를 클릭하여 해당 리비전에 접근할 수 있습니다. 여기서 CSS의 이전 버전을 복원할 수 있습니다.

옵션이 표시되지 않으면 복원할 CSS 기록이 없다는 의미입니다.

사용자 정의 CSS를 사용하여 기본 콘텐츠 영역의 폭을 수정한 경우 “미디어 폭” 옵션을 사용해야 합니다. “미디어 폭” 설정은 전체 크기 이미지를 블로그에 삽입할 때 기본 크기로 사용됩니다.

이 크기는 삽입 방법에 따라 설정을 변경하기 전에 추가한 일부 이미지의 크기에는 영향을 주지 않으므로 설정을 변경한 후에 일부 이미지를 다시 삽입해야 할 수도 있습니다.

기본적으로 CSS 편집기에 추가한 사용자 정의 CSS는 테마의 원래 CSS 뒤에 로드됩니다. 즉, 규칙이 우선하며 테마 스타일을 재정의할 수 있습니다.

내 사이트 → 사용자 정의 → CSS 패널에서 “테마의 원래 CSS를 사용하지 않기” 체크박스를 클릭하여 테마의 원래 CSS를 완전히 끌 수 있습니다. 이 경우 CSS로 디자인하기 위해 워드프레스닷컴 테마를 빈 캔버스로 사용할 수 있습니다. 이 옵션은 고급 옵션이므로 처음부터 테마에 대한 CSS를 시작하고 디자인하려는 경우에만 사용해야 합니다.

기존 CSS 규칙을 기반으로 하여 구축하려는 경우(가장 일반적이고 권장되는 접근 방법) 이 옵션을 비활성화된 상태로 둘 수 있습니다.

워드프레스닷컴은 CSS 프리프로세서 LESS 및 Sass(SCSS 구문)를 사용합니다. 변수 및 mixin과 같은 CSS 확장을 이용하려는 사용자를 위한 고급 옵션입니다. 자세한 내용은 LESS 및 Sass 웹사이트를 참조하세요.

푸터 크레딧은 CSS로 수정하면 안 됩니다. 사이트에서 사용하는 테마 유형에 따라 설정을 통해 푸터 크레딧을 제거하거나 수정할 수 있습니다.

• 사이트에서 블록 테마를 사용하는 경우 사이트 편집기를 사용하여 푸터 크레딧을 편집하거나 제거할 수 있으며 CSS는 필요하지 않습니다.
• 사이트에서 클래식 테마를 사용하는 경우 푸터 크레딧을 미니멀한 워드프레스 로고로 변경할 수 있습니다. 사이트에 비즈니스 요금제 또는 상거래 요금제 구독이 있으면 크레딧을 숨길 수 있습니다.

예. 플러그인이 활성화된 사이트에만 해당합니다.

테마의 옵션을 사용하여 웹사이트 글꼴을 선택할 수 있습니다. CSS로 작업할 때는 전면에 있는 두 개의 웹 글꼴로 제한됩니다. 그러나 서드파티 글꼴 플러그인을 사용하여 추가 글꼴을 추가할 수 있습니다.

예. 미디어 라이브러리에 이미지를 업로드한 다음 CSS 스타일시트 내에서 직접 URL로 참조할 수 있습니다. 다음은 스타일시트에서 배경 이미지를 사용하는 방법에 대한 예입니다.

 div#content { background-image: url('http://example.files.wordpress.com/1999/09/example.jpg'); } 

위의 가이드에서 설명한 대로 CSS 편집기를 사용하여 CSS를 편집하는 것이 좋습니다. 이 방법을 사용하여 CSS를 추가하면 테마의 스타일시트에서 CSS 규칙이 재정의됩니다. 이 방법은 CSS 충돌을 디버깅하고 추가한 CSS의 이전 버전을 더 쉽게 복원할 수 있는 안전한 방법입니다.

테마 파일을 직접 편집하는 데 능숙하다면 SFTP를 통하거나 하위 테마를 만들어 편집할 수 있습니다. 변경 사항을 라이브 사이트에 적용하기 전에 스테이징 사이트에서 테스트하는 것이 좋습니다.

워드프레스닷컴의 모든 업그레이드는 매년 갱신됩니다. 구독을 해지하면 사용자 정의 CSS는 계속 저장되지만 더 이상 다른 사용자가 볼 수 있도록 사이트에 적용되지 않습니다. 사이트에 다시 적용하려면 요금제를 다시 구매할 수 있으며 테마를 변경하지 않은 경우 스타일이 자동으로 다시 적용됩니다. 테마를 변경한 경우 CSS 수정 링크에서 이전 CSS를 찾을 수 있습니다.