CSS(Cascading Style Sheets)를 사용해서 헬프 센터의 디자인을 쉽게 사용자 지정할 수 있습니다. 이 쿡북은 원하는 대로 헬프 센터를 디자인할 수 있도록 도와드리기 위해 마련되었습니다.
Guide에서 CSS에 액세스하고 편집하려면 CSS 또는 JavaScript 사용자 지정하기를 참조하세요.
CSS가 생소하거나 기억을 더듬을 필요가 있다면 다음 튜토리얼을 살펴보시기 바랍니다.
-
CSS 시작하기는 완전 초보자를 대상으로 한 가장 완전한 CSS 튜토리얼로 직접 실행해 볼 수 있는 실용적인 예와 함께 이 언어의 기본적인 기능들을 자세히 안내해 줍니다.
-
CSS 초보자 튜토리얼은 시작하기에 충분한 정보를 제공합니다.
헬프 센터 기본서식 작성 언어 또는 JavaScript를 사용해서 헬프 센터의 디자인을 사용자 지정할 수도 있습니다.
목차
이 쿡북은 헬프 센터의 요소를 망라하는 섹션으로 구성되어 있습니다. 각 섹션은 테마의 스타일시트에 바로 붙여넣을 수 있는 CSS 코드를 포함하고 있습니다. 코드를 있는 그대로 사용하거나 편집하여 사용할 수 있습니다.
이 쿡북에서는 대략적으로 살펴 봅니다. HTML 기본서식과 CSS 스타일시트를 수정하여 할 수 있는 일은 무궁무진합니다.
머리글 및 바닥글
검색
지식창고 문서
머리글 및 바닥글
머리글은 테마와 사용자 역할에 따라 로고 및 기타 구성 요소를 표시합니다. 바닥글을 사용하여 관련 링크, 회사 정보 또는 법적 고지를 표시할 수 있습니다.
목차로 돌아가기
머리글이나 바닥글의 배경 색 변경.
다음 선택기에서 background-color 특성을 변경하거나 추가합니다.
머리글:
.header {
background-color: #666;
}바닥글:
.footer {
background-color: #333;
}머리글이나 바닥글의 높이 변경
다음 선택기에서 height 특성을 변경하거나 추가합니다.
머리글:
.header {
height: 70px;
}바닥글:
.footer {
height: 20px;
}머리글이나 바닥글 위 또는 아래 공백 변경
다음 선택기에서 margin-bottom 및 margin-top 특성을 변경하거나 추가합니다.
머리글:
.header {
margin-bottom: 20px;
}바닥글:
.footer {
margin-top: 10px;
}선택한 언어의 모양 변경
다음 선택기 및 특성을 추가합니다.
.language-selector .dropdown-toggle {
color: green;
}문의 등록 링크의 모양 변경
다음 선택기를 추가하고 텍스트 특성을 추가하거나 수정합니다.
.submit-a-request {
font-size: 14px;
color: green;
}문의 등록 링크 숨기기
다음 선택기를 수정합니다.
.submit-a-request {
display:none;
}로그인 링크의 모양 변경
다음 선택기에서 텍스트 특성을 추가하거나 수정합니다.
.login {
font-size: 14px;
color: green;
}로고 크기 변경
권장 로고 이미지 크기는 200픽셀 x 50픽셀이지만 필요하면 이 기본값을 무시할 수 있습니다.
로고 크기를 변경하려면 다음과 같이 하세요.
- Guide의 사이드바에서 디자인 사용자 지정 아이콘(
)을 클릭합니다. - 테마 편집을 클릭합니다.
- CSS를 클릭하여 CSS 스타일시트를 열고 다음 규칙을 검색합니다.
.logo img { max-height: 37px; }검색하려면 코드 편집기 안쪽을 클릭하고 Control+F(Windows의 경우) 또는 Cmd+F(Mac의 경우) 키를 누릅니다.
- ".logo img" 선택기에서 높이 특성을 이미지 높이에 맞게 고칩니다.
- 저장을 클릭합니다.
검색
검색 상자는 지식창고와 커뮤니티 둘 다에서 콘텐츠를 찾아 결과 페이지에 링크를 표시합니다. 원하는 경우 검색 상자를 제거할 수 있습니다. 자세한 내용은 헬프 센터 기본서식 가이드에서 검색 도우미를 참조하세요.
목차로 돌아가기
검색 필드의 너비 또는 높이 변경
다음 선택기에서 width 또는 height 값을 변경합니다.
큰 검색 상자:
.search input[type=search] {
height: 50px;
width: 90%;
}작은 검색 상자:
.search-small input[type=search] {
height: 50px;
width: 320px;
}검색 필드의 배경 색 변경
다음 선택기에서 background 특성을 변경합니다.
큰 검색 상자:
.search input[type=search] {
background: #999;
}작은 검색 상자:
.search-small input[type=search] {
background: #999;
}검색 텍스트의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
큰 검색 상자:
.search {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}작은 검색 상자:
.search-small {
font-size: 12px;
font-family: Tahoma, Arial, sans-serif;
}결과 페이지 제목의 모양 변경
검색 결과 페이지의 제목은 검색어에 리턴된 결과 수로 구성됩니다. 예: “일련번호”에 대한 9개의 결과
스타일시트에 아직 없는 경우에는 다음 선택기를 추가하고, 텍스트 특성을 변경하거나 추가합니다.
.search-results-heading {
font-size: 36px;
font-family: Tahoma, Arial, sans-serif;
}검색 결과 키워드 강조 표시의 모양 변경
검색 결과 내 강조 표시된 용어는 .search-result-description 컨테이너에서 인라인 요소인 <em>으로 둘러싸여 있습니다. 강조 표시를 노란색 배경으로 굵게 표시하려면 다음과 같이 할 수 있습니다.
.search-result-description em {
font-weight: bold;
background-color: #FFF3CA;
padding: 0px 3px 2px;
border-radius: 3px;
}지식창고 및 커뮤니티 제목의 모양 변경
다음 선택기에서 텍스트 특성을 추가하거나 수정합니다.
.search-results-subheading {
font-size: 24px;
font-family: Tahoma, Arial, sans-serif;
}결과 사이의 간격 변경
다음 선택기에서 margin-bottom 특성을 추가합니다.
.search-result {
margin-bottom: 20px;
}결과 텍스트의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
.search-result {
font-size: 105%;
font-family: Arial, Helvetica, sans-serif;
}결과 링크의 색 변경
다음 선택기에서 color 특성을 추가하거나 수정합니다.
.search-result a {
color: #484;
}이동 경로
이동 경로는 사용자들이 헬프 센터에서 콘텐츠를 찾는 데 도움이 됩니다. 원하는 경우 이동 경로를 제거할 수 있습니다. 자세한 내용은 헬프 센터 기본서식 가이드에서 이동 경로 도우미를 참조하세요.
목차로 돌아가기
이동 경로 위 또는 아래 공백 변경
다음 선택기에서 padding 특성을 추가하거나 수정합니다.
.breadcrumbs {
padding-top; 20px;
padding-bottom: 16px;
}이동 경로 텍스트의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
.breadcrumbs li {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}이동 경로 링크의 색 변경
다음 선택기 및 특성을 추가합니다.
.breadcrumbs li a {
color: #484;
}이동 경로의 포인터 문자(>) 변경
다음 선택기에서 color 및 content 특성을 변경합니다.
.breadcrumbs li + li:before {
color: #158EC2;
content: ">>";
}문서 목록
테마에 따라 홈 페이지, 카테고리 시작 페이지 및 섹션 시작 페이지에 문서 목록이 사용됩니다.
목차로 돌아가기
문서 목록 주위 공백 변경
다음 선택기 및 padding 특성을 추가하거나 수정합니다.
.article-list {
padding-left: 16px;
padding-right; 20px;
}문서 사이의 간격 변경
다음 선택기에서 margin-bottom 특성을 변경합니다.
.article-list > li {
margin-bottom: 10px;
}문서 링크의 모양 변경
다음 선택기에서 텍스트 특성을 변경하거나 추가합니다.
.article-list > li {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}문서 링크의 색 변경
다음 선택기 및 특성을 추가합니다.
.article-list li a {
color: #FFF;
}지식창고 문서
지식창고에서 문서의 디자인을 변경할 수 있습니다.
목차로 돌아가기
문서 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-header h1 {
color: #993;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
}문서 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-body {
color: #666;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}문서 링크의 색 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-body a {
color: #930;
}작성자 이름의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-author a {
color: #669;
font-family: Georgia, Times New Roman, serif;
font-size: 16px;
}마지막 업데이트된 문자열의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-updated {
color: #CCC;
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
}“이 문서가 도움이 되었습니까?"의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-vote-question {
color: #763;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}투표 카운터의 모양 변경
예: “8명 중 6명이 유용하다고 평가했습니다.” 다음 선택기 및 특성을 추가하거나 수정합니다.
.article-vote-count {
font-family: Georgia, Times New Roman, serif;
font-size: 10px;
}"또 다른 질문이 있으십니까? 문의 등록"의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-more-questions {
font-family: Arial, Helvetica, sans-serif;
font-size: 105%;
}댓글 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.article-comments h2 {
color: #666;
font-family: Georgia, Times New Roman, serif;
font-size: 130%;
}댓글 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.comment-body {
color: #666;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}커뮤니티 질문 및 답변
커뮤니티에서 콘텐츠의 디자인을 변경할 수 있습니다.
목차로 돌아가기
질문 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-title {
color: #484;
font-family: Verdana, Geneva, sans-serif;
font-size: 120%;
}질문 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-text {
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
}질문 링크의 색 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-text a {
color: #484;
}질문 작성자 이름의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-author {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}링크 색을 변경하려면 다음 선택기 및 특성을 추가하거나 수정합니다.
.question-author a {
color: #484;
}질문 작성자의 이름, 질문 게시 후 경과 시간 및 공유 링크는 보통 페이지에서 함께 그룹화되어 있으므로 이 3가지 요소를 모두 동일한 모양으로 디자인하는 것이 좋습니다. 다음과 같이 선택기를 결합하여 사용하면 됩니다.
.question-author, .question-published, .question-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}질문 게시 후 경과 시간의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-published {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}질문 공유 링크의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.question-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}답변 제목의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-list-heading {
color: #4CC;
font-family: Verdana, Geneva, sans-serif;
font-size: 105%;
}답변 텍스트의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-text {
color: #333;
font-family: Tahoma, Geneva, sans-serif;
font-size: 105%;
}답변 작성자 이름의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-author {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}링크 색을 변경하려면 다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-author a {
color: #484;
}답변 작성자의 이름, 답변 게시 후 경과 시간 및 공유 링크는 보통 페이지에서 함께 그룹화되어 있으므로 이 3가지 요소를 모두 동일한 모양으로 디자인하는 것이 좋습니다. 다음과 같이 선택기를 결합하여 사용하면 됩니다.
.answer-author, .answer-published, .answer-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}답변 게시 후 경과 시간의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-published {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}답변 공유 링크의 모양 변경
다음 선택기 및 특성을 추가하거나 수정합니다.
.answer-share {
font-family: Georgia, Times New Roman, serif;
font-size: 12px;
}
0 댓글
댓글을 남기려면 로그인하세요.