1. 개발자 도구로 CSS 클래스 또는 ID 확인하기

개발자 도구(DevTools)는 Google Chrome, Firefox, Edge에서 제공하는 강력한 도구입니다. 원하는 디자인 요소의 CSS 코드를 찾을 수 있습니다.

사용 방법:

1. 브라우저에서 웹사이트를 열기
   테마를 적용한 웹사이트를 엽니다. 워드프레스를 사용하는 홈페이지는 테마에 관계없이 모두 동일하게 적용할 수 있습니다. 

2. 개발자 도구 실행하기

   • 수정하기 원하는 요소에 마우스를 올립니다. 상단 이미지의 예시는 “서비스 소개 스타일1″이라는 페이지의 제목영역을 수정하기 위해 마우스를 가져대고 오른쪽키를 눌렀습니다. 
   • “검사”라는 메뉴를 클릭합니다. 
   • Chrome/Edge: Ctrl + Shift + I (Windows) 또는 Cmd + Option + I (Mac)
   • Firefox: Ctrl + Shift + I (Windows) 또는 Cmd + Option + I (Mac)
     
     

3. 요소 선택 도구 사용
   개발자 도구 창이 열리면 좌측 상단의 요소 선택 도구(마우스 아이콘) 를 클릭합니다.
   원하는 변경 대상 위로 마우스를 올려 클릭하면 해당 요소의 HTML 코드와 CSS가 표시됩니다.

   1. 요소의 코드를 확인할 수 있습니다. 코드의 class값이 page-content-title 이라는 클래스와 h2, mb-5 클래스가 같이 있는 것을 확인할 수 있습니다. 
   2. 해당 요소에 적용된 스타일을 볼 수 있습니다. 
   3. 스타일이 적용된 css파일을 볼 수 있습니다. 캐쉬플러그인을 사용하는 경우 정확한 경로가 표시되지 않을 수 있습니다.

4. CSS 클래스/ID 확인
   예를 들어, 버튼의 스타일을 변경하고 싶다면 버튼의 class나 id 값을 확인하세요. 이번 예시에서는 “page-content-title” 가 클래스 이름이 되겠습니다. 

2. 추가 CSS 메뉴에서 스타일 지정하기

케이테마는 워드프레스의 추가 CSS(Custom CSS) 기능을 지원합니다. 확인한 클래스나 ID를 사용해 원하는 디자인을 적용할 수 있습니다.

적용 방법:

1. 워드프레스 관리자 화면에서 “사용자 정의하기”로 이동
   워드프레스 대시보드 → 외모 → 사용자 정의하기 클릭.

2. 추가 CSS 메뉴 열기
   사용자 정의 화면에서 “추가 CSS” 메뉴를 선택합니다.

3. CSS 코드 작성
   확인한 클래스나 ID를 기반으로 스타일을 추가합니다.
   위 1단계에서 확인한 page-content-title 를 이용하여 스타일을 변경합니다. 

4. 저장하여 스타일을 적용합니다.
   .page-content-title{
color:red;
text-decoration:underline;
}

3. 예제: 자주 사용하는 스타일 변경

1) 폰트 크기 변경

사이트의 본문 폰트 크기를 변경하려면 아래와 같이 CSS를 추가하세요:

body {
font-size: 18px; /* 폰트 크기 */
}

2) 버튼 스타일 변경

모든 버튼의 스타일을 동일하게 변경하려면:

button {
background-color: #007BFF; /* 파란색 배경 */
color: white; /* 흰색 글자 */
padding: 10px 20px; /* 버튼 내부 여백 */
border: none; /* 테두리 제거 */
border-radius: 5px; /* 둥근 모서리 */
cursor: pointer; /* 커서 스타일 변경 */
}

3) 페이지 박스 위치 조정

특정 페이지 박스 위치를 이동하려면:

.page-box {
margin-top: 20px; /* 위쪽 간격 */
margin-left: auto; /* 왼쪽 정렬 */
margin-right: auto; /* 오른쪽 정렬 */
}

위 코드는 예시코드이므로 정확한 코드는 운영하고 있는 홈페이지의 요소를 분석하여 입력하시기 바랍니다.

4. 유용한 팁

• CSS 우선순위: 특정 요소에 스타일을 강제로 적용하려면 !important를 사용할 수 있습니다.
  
  .my-button {
color: red !important;
}

• 장 전에 백업: CSS 변경 전, 기존 스타일을 기록해두면 필요 시 복구할 수 있습니다.

• 브라우저 캐시 초기화: 변경 후 적용이 바로 보이지 않으면 브라우저 캐시를 초기화하거나 새로고침(Ctrl + F5)하세요.

The post 사용자 디자인/CSS 스타일 변경 first appeared on 매뉴얼.

• 배경색상
• 텍스트색상
• 선(테두리)색상

The post 테마색상 first appeared on 매뉴얼.

1. 사용자정의 메뉴
2. 사용자정의 기본제공 항목
3. 사용자정의 테마제공 항목

사용자정의 메뉴

관리자 로그인 > 페이지 상단 “사용자정의” 클릭

관리자페이지 > 외모 > 사용자 정의하기

위 두가지 방법으로 사용자정의하기 페이지로 접근할 수 있습니다. 사용자 정의하기 페이지는 아래의 화면과 같이 표시됩니다.

사용자정의 기본제공 항목

사용자정의메뉴에서 기본적으로 제공되는 항목은 다음과 같습니다.

• 메뉴 : 테마에서 사용되는 메뉴를 설정합니다. 메뉴에 관한 상세한 내용은 “메뉴설정” 문서를 확인해보시기 바랍니다.
• 사이드 아이덴티티 : 사이트의 제목과 테그라인을 입력합니다.
• 위젯 : 테마에 표시되는 위젯을 지정할 수 있습니다. 위젯을 지원하지 않는 테마는 이곳에서 지정을 해도 표시되지 않습니다.
• 추가 CSS : 테마에 적용되는 CSS스타일을 이곳에서 직접 입력할 수도 있습니다.

사용자정의 테마제공 항목

사용자정의 메뉴에서 테마별로 지원되는 메뉴도 모두 다릅니다. 케이테마에서 지원되는 메뉴의 상세내역은 “케이테마옵션” 문서를 확인해보시기 바랍니다. 케이테마에서 기본적으로 제공하는 옵션은 아래와 같습니다.

• 테마일반 : 테마의 좌우 너비/구조/로고에 대한 옵션을 제공합니다.
• 테마스타일 : 테마색상, 글자색상, 배경색상 등 색상과 스타일에 대한 부분을 제공합니다.
• 헤더설정 : 테마에서 제공되는 그리고 향후 제공될 예정인 헤더스타일에 대해서 옵션을 제공합니다.
• 메뉴설정 : 테마에서 사용되는 메뉴를 설정합니다. 메뉴에 관한 상세한 내용은 “메뉴설정“문서를 확인해보시기 바랍니다.
• 빵조각메뉴설정 : 테마의 페이지/글/카테고리에서 표시되는 빵조각메뉴에 대해서 옵션을 제공합니다.
• 슬라이더 설정 : 케이테마는 기본적으로 Depicter 슬라이더를 이용하고 있지만 다른 슬라이더의 쇼트코드를 이용할 수 있도록 옵션을 제공하고 있습니다.
• 푸터설정 : 테마의 하단에 표시되는 푸터정보에 대한 옵션을 제공합니다.
• 페이지제목영역 설정 : 페이지/포스트/글 등 상세페이지에서 표시되는 제목영역에 대한 옵션을 제공합니다.

결론

워드프레스는 내장된 사용자 정의 옵션 외에도, 많은 워드프레스 테마는 사용자 정의 CSS 코드를 사용하여 웹사이트의 외관과 스타일을 더욱 구체적으로 사용자 정의할 수 있도록 지원합니다. 그리고 케이테마는 이러한 옵션을 통해 창의적인 디자인을 제공하도록 지원하고 있습니다. 상세설명문서를 통해 자세한 내용을 확인해보시기 바랍니다.

감사합니다.

The post 테마옵션 설정 first appeared on 매뉴얼.