주 콘텐츠로 건너뛰기
Deutsch English (US) Español Français Italiano 日本語 Polski Português do Brasil Русский 简体中文 繁體中文

CSS를 사용한 브랜드 가이드 사용자 지정

  • 업데이트 시간
새로운 브랜드가이드 경험에 오신 것을 환영합니다! 이 문서와 브랜드가이드 시작하기 및 브랜드가이드 구축 및 스타일링 에서는 콘텐츠를 새 환경으로 마이그레이션하는 방법을 안내합니다. 기존 브랜드가이드의 편집 기능은 2023년 9월 1일에 사라집니다. 2023년 12월 1일부로 기존 브랜드가이드 편집기는 더 이상 사용할 수 없습니다. 
 
CSS 또는 '캐스케이딩 스타일 시트'는 웹 개발자가 웹사이트의 여러 페이지에 걸쳐 균일하고 시각적으로 보기 좋은 모양을 만들기 위해 사용하는 디자인 언어입니다. HTML은 주로 텍스트 콘텐츠를 결정하지만 CSS는 웹사이트의 시각적 구조, 레이아웃 및 미학을 결정합니다.

CSS 구문

CSS 구문은 일련의 규칙으로 구성됩니다. 이러한 규칙은 선택자, 속성, 값의 세 부분으로 구성됩니다. 
Selector {
property: value;
}
선택기는 스타일을 지정하려는 HTML 요소를 나타냅니다. 속성은 색상, 글꼴 패밀리 또는 여백과 같은 HTML 요소의 특정 측면을 나타냅니다. CSS에서 사용되는 모든 속성에는 허용되는 값 집합(예: 16진수 코드 또는 픽셀 값)이 있습니다.
선택기에는 세미콜론으로 구분된 여러 속성 및 값 쌍이 있을 수 있습니다. 예를 들어 다음은 지정된 속성 값을 모든 h1 태그에 적용합니다:
h1 {
font-family: comic sans;
font-size: 12px;
color: blue;
}

일반적인 CSS 선택기

CSS 유형 선택기

CSS 유형 선택기는 웹 페이지 내에서 특정 유형의 모든 요소를 선택합니다.
다음은 일반적인 유형 선택기의 몇 가지 예입니다:
  • p: 모든 단락 태그를 선택합니다.
  • a: 모든 하이퍼링크를 선택합니다.
  • h1: 모든 h1 헤더 태그를 선택합니다.
  • span: 모든 span 태그를 선택합니다.
  • body: 웹페이지 body 내의 모든 요소를 선택합니다.
  • button: 웹 페이지의 모든 버튼을 선택합니다.
  • li: 모든 목록 항목을 선택합니다.

CSS 클래스 선택기

CSS 클래스는 HTML 요소 그룹을 정의하는 데 사용되는 속성입니다. 이렇게 하면 단일 선택기를 사용하여 여러 요소를 사용자 지정할 수 있습니다. CSS에서 클래스 이름 앞에 마침표(.) 문자를 입력하면 이 작업을 수행할 수 있습니다. 예를 들어 샘플 헤더와 아래 단락의 글꼴을 변경하려면 다음과 같이 하세요:
 <h1 class="i-am-a-class">header</p>
<p class="i-am-a-class">paragraph</p>
다음 CSS를 사용하여 클래스가 i-am-a-class인 모든 요소를 타깃팅합니다:
.i-am-a-class {
font-family: helvetica;
}

CSS ID 선택기

CSS ID는 웹페이지에서 단일 고유 요소를 정의하는 데 사용되는 속성입니다. 특정 ID를 가진 요소를 선택하려면 ID 앞에 해시(#) 기호를 입력합니다. 예를 들어 아래 단락의 글꼴을 변경하려면 다음과 같이 하세요:
 <p id="i-am-an-id">paragraph</p>
다음 CSS를 사용하여 id가 i-am-an-id인 요소만 타깃팅할 수 있습니다:
#i-am-an-id {
font-family: helvetica;
}

CSS 속성

텍스트 속성

  • font-family: 텍스트 글꼴을 설정합니다(예: "Arial" 또는 "Times")
  • font-size: 글꼴 크기를 설정합니다(예: 5px 또는 1em).
  • font-weight: 글꼴 굵기 또는 굵게 설정합니다(예: "bold" 또는 200).
  • color: 텍스트의 색상을 설정합니다(예: blue, #add8e6 또는 rgb(135,206,250)).
  • line-height: 줄 사이의 세로 간격 예: 5px 또는 1em
  • letter-spacing: 문자 사이의 간격 예: 5px 또는 1em
  • word-spacing: 단어 사이의 간격 예: 5px 또는 1em

배경 속성

  • background-color: 요소의 배경색을 설정합니다(예: blue, #add8e6 또는 rgb(135,206,250)).
  • background-image: URL을 기반으로 배경 이미지를 설정합니다. 예: url('sample-image.jpg')
  • background-position: 배경 이미지의 시작 위치(예: center 또는 50%)를 설정합니다.

간격 속성

다음 프로퍼티는 자동, 상속, % 또는 모든 CSS 길이 단위를 허용합니다. 
  • height: 요소의 높이를 설정합니다. 
  • width: 요소의 너비를 설정합니다. 
  • padding: 요소의 패딩 공간을 설정합니다.
  • margin: 요소의 여백 공간을 설정합니다. 

길이 및 단위

  • px: 픽셀( 1px = 1인치의 1/96)
  • em: 요소의 글꼴 크기 기준(3em = 현재 글꼴 크기의 3배)
  • vw: 뷰포트 너비의 1%를 기준으로 합니다.
  • vh: 뷰포트 높이의 1%를 기준으로 합니다.
  • %: 상위 요소에 대한 상대적 기준

Chrome DevTools를 사용하여 요소 찾기

Chrome DevTools는 Google Chrome 브라우저에 직접 내장된 웹 개발자 도구 세트입니다. 이러한 도구를 사용하여 모든 웹 사이트에서 HTML 요소와 기존 CSS 스타일을 빠르게 찾을 수 있습니다. 
1. DevTools 도구에 액세스하려면 페이지를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택하거나 Command+Option+C(Mac) 또는 Control+Shift+C(Windows, Linux, Chrome OS)와 같은 단축키를 사용할 수 있습니다.
 
 
2. DevTools 패널이 열리면 페이지 상단의 검사 도구를 선택합니다.
 
 
3. 그런 다음 페이지에서 스타일을 지정하려는 요소를 클릭하면 됩니다. 이 요소를 사용자 지정하는 데 사용할 수 있는 선택기가 요소 탭 아래에 강조 표시됩니다. 그 아래의 스타일 탭에는 현재 해당 요소에 적용된 CSS 스타일 규칙이 표시됩니다.
 
 
4. 이 예제에서는 DevTools 인스펙터를 사용하여 찾은 "nav-link;클래스를 활용하여 탐색 링크 색상을 #6b646b로 변경하겠습니다. 또한 선언 끝에 &"!important&" 속성을 추가하여 요소에서 해당 속성에 대한 이전의 모든 스타일을 재정의합니다.
 
 
5. CSS가 업데이트되고 변경 사항이 저장되면 탐색 텍스트의 색상이 #6b646b로 변경된 것을 확인할 수 있습니다:
 

타사 글꼴 추가하기

@font-face는 브랜드가이드에서 타사 글꼴을 가져와 활용할 수 있는 기능을 제공하는 CSS 규칙입니다. 블록 수준이 아닌 글로벌 설정 수준에서 CSS를 통해 글꼴을 추가하는 것이 좋습니다.

두 가지 방법으로 타사 글꼴을 추가할 수 있습니다.

URL 복사 및 붙여넣기

첫 번째 옵션은 선택한 글꼴 라이브러리로 이동하여 브랜드가이드에 추가할 글꼴을 선택한 후 URL을 복사하여 붙여넣는 것입니다. 이 프로세스는 아래에 설명되어 있습니다. 

브랜드가이드 탐색

아래 구문을 복사하여 Brandguide의 사용자 정의 CSS 섹션에 추가할 수 있습니다. 글꼴을 가져오는 데 필요한 유일한 CSS입니다. 다른 글꼴을 가져오려면 글꼴 패밀리, 소스 URL 및 형식을 선택한 글꼴의 형식으로 변경하면 됩니다.
@font-face {
font-family: 'Satisfy';
src: url(https://fonts.gstatic.com/s/satisfy/v11/rP2Hp2yn6lkG50LoCZOIHTWEBlw.woff2) format('woff2');
}

글꼴 URL 및 형식 찾기:

1. 원하는 글꼴 라이브러리로 이동하여 브랜드가이드에 추가할 글꼴을 선택합니다. 이 경우 Google 글꼴에서 " Satisfy" 를 선택하겠습니다.
 
2. 선택이 완료되면 @import URL을 복사하여 새 브라우저 탭에 붙여넣어야 합니다. 
 
 
3. 그러면 브랜드가이드에 글꼴을 가져오는 데 필요한 URL과 형식이 포함된 페이지로 이동합니다.
4. src URL을 복사하여 @fontface 코드에 font-family와 함께 붙여넣습니다. 그런 다음 코드를 CSS 상자에 붙여넣습니다. 변경 사항이 자동으로 업데이트됩니다. 
 
Update CSS를 선택하여 변경 사항을 저장합니다. 
 
 
새로 가져온 글꼴은 전역 설정 플라이아웃의 기본 서체 드롭다운에 채워집니다.
 

글꼴을 WOFF 또는 WOFF2 형식으로 변환하기

두 번째 사용자 지정 서체 옵션은 글꼴을 woff 또는 woff2 형식으로 변환하는 것입니다. 웹 글꼴 형식은 ttf/otf 텍스트 파일 형식보다 브라우저에 더 잘 호환되는 형식입니다. 이 프로세스는 아래에 설명되어 있습니다.  

독점 글꼴 

1. 글꼴을 woff 또는 woff2 형식으로 변환합니다. 웹 글꼴 형식은 ttf/otf 텍스트 파일 형식보다 브라우저에 더 잘 호환되는 형식입니다. 
 
2. 라이브러리 내 파일 섹션에 글꼴을 업로드합니다. 
 
3. 에셋을 열고 임베드 탭으로 이동한 다음 링크 복사를 선택합니다. 
 
 
4. 글로벌 설정 플라이아웃으로 이동합니다. 아래 구문을 복사하여 글로벌 설정 플라이아웃의 CSS 섹션에 추가할 수 있습니다. 글꼴을 가져오는 데 필요한 유일한 CSS입니다. 다른 글꼴을 가져오려면 글꼴 패밀리, 소스 URL 및 형식을 선택한 글꼴의 형식으로 변경하면 됩니다. 구문을 입력하면 변경 내용이 저장됩니다.  
@font-face {
font-family: 'boldweb';
src:
url('https://cdn.bfldr.com/DS3EWKOJ/at/6nvjf5wcs45qgj2v2wbz3pcx/BlenderPro-BoldWeb.woff?auto=webp&format=woff;
}
5. 이 방법으로 가져온 글꼴은 기본 서체 드롭다운에 글꼴이 표시되지 않습니다. 대신 CSS 섹션 내에서 글꼴을 수동으로 적용해야 합니다. 아래는 가져온 단락 태그에 굵은 웹 글꼴을 적용한 예입니다. 
p {
font-family: 'boldweb';
color: #333;
}

비디오 추가

다음 단계에 따라 브랜드가이드에 동영상을 추가할 수 있습니다: 
 
  1. 동영상의 에셋 모달을 엽니다.
  2. Embed tab으로 이동합니다. 
  3. 동영상 임베드 코드를 찾아 Copy Link를 선택합니다. 
  4. 코드를 HTML 블록에 붙여넣습니다.

관련 문서