콘텐츠 구성 요소 content-components

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

{width="300"}

1. 스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.

2. 토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.

   • 테두리 색상​을 설정하려면 확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

   {width="300"}

   • 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

   • 테두리 스타일​을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.

   • 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.

   {width="250"}

3. 테두리 반지름​의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

   값이 0(기본값)이면 사각형 모서리가 생성됩니다.

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

• 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.

• 너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.

  • 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.

    {width="250"}

  • 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.

    {width="250"}

스타일 탭이 선택된 오른쪽 패널에서 여백 섹션을 확장하고 구조적 구성 요소 내에서 여백 간격에 대한 옵션을 설정합니다. 이 스타일은 CSS margin 매개 변수를 복제합니다. 이 매개 변수는 다른 구성 요소와 구분하여 구성 요소 테두리 외부의 공간으로 제어합니다. 구성 요소 주위에 간격을 만들어 위치 및 주변 컨텐츠 레이아웃에 영향을 줍니다.

디자인 요구에 따라 여백 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 여백을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

스타일 탭을 선택한 오른쪽 패널에서 패딩 섹션을 확장하고 구조적 구성 요소 내에서 패딩에 대한 옵션을 설정합니다. 이 스타일은 구성 요소의 콘텐츠와 테두리 사이의 공간인 CSS padding 매개 변수를 복제합니다. 패딩은 내용과 구성 요소 테두리 사이의 거리를 제어하는 데 사용할 수 있는 내부 공간을 제공합니다.

디자인 요구에 따라 패딩 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 패딩을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

{width="300"}

스타일 탭을 선택한 오른쪽 패널에서 텍스트 섹션을 확장하고 구성 요소 텍스트 스타일에 대한 옵션을 설정합니다.

• 글꼴 모음 - 아래쪽 화살표 아이콘을 클릭하여 구성 요소에서 텍스트에 사용할 글꼴 모음을 선택합니다.

• 글꼴 크기 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 글꼴 크기를 늘리거나 줄이거나 값을 입력합니다. 입력한 값의 경우 소수를 사용할 수 있습니다.

• 선 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 선 높이를 늘리거나 줄이거나 값을 입력합니다. 입력한 값의 경우 소수를 사용할 수 있습니다.

  {width="250"}

• 텍스트 스타일 - 텍스트 스타일의 아이콘을 선택합니다. 굵게, 기울임꼴, 밑줄 또는 취소선.

• 텍스트 맞춤 - 가로 텍스트 맞춤 아이콘을 선택합니다. 왼쪽, 가운데, 오른쪽 또는 양쪽 맞춤.

• 글꼴 색상 - 선택기에서 글꼴 색상을 선택하려면 색상 사각형을 클릭합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

  {width="300"}

1. 스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.

2. 토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.

   • 테두리 색상​을 설정하려면 확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

   {width="300"}

   • 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

   • 테두리 스타일​을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.

   • 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.

   {width="250"}

3. 테두리 반지름​의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

   값이 0(기본값)이면 사각형 모서리가 생성됩니다.

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

• 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.

• 너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.

  • 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.

    {width="250"}

  • 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.

    {width="250"}

스타일 탭이 선택된 오른쪽 패널에서 여백 섹션을 확장하고 구조적 구성 요소 내에서 여백 간격에 대한 옵션을 설정합니다. 이 스타일은 CSS margin 매개 변수를 복제합니다. 이 매개 변수는 다른 구성 요소와 구분하여 구성 요소 테두리 외부의 공간으로 제어합니다. 구성 요소 주위에 간격을 만들어 위치 및 주변 컨텐츠 레이아웃에 영향을 줍니다.

디자인 요구에 따라 여백 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 여백을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

스타일 탭을 선택한 오른쪽 패널에서 패딩 섹션을 확장하고 구조적 구성 요소 내에서 패딩에 대한 옵션을 설정합니다. 이 스타일은 구성 요소의 콘텐츠와 테두리 사이의 공간인 CSS padding 매개 변수를 복제합니다. 패딩은 내용과 구성 요소 테두리 사이의 거리를 제어하는 데 사용할 수 있는 내부 공간을 제공합니다.

디자인 요구에 따라 패딩 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 패딩을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

값이 있는 추가 CSS 호환 특성을 적용하려면 고급 스타일 설정을 사용하십시오. 기존 속성의 값을 변경하거나 새 값을 추가할 수 있습니다. 스타일이 상위-하위 구성 요소(요소)에 대한 CSS 상속 모델을 사용하여 구성 요소에 적용됩니다.

표시된 속성은 구성 요소에 대해 현재 정의된 스타일을 반영합니다. CSS 정의에 따라 값을 변경할 수 있습니다. 추가(+) 아이콘을 클릭하여 구성 요소에 대한 새 스타일 특성을 추가합니다.

{width="250"}

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

{width="300"}

이 스타일은 전체 텍스트 블록에 적용됩니다. 선택한 텍스트 문자열에 인라인 스타일을 적용할 수 있습니다.

스타일 탭을 선택한 오른쪽 패널에서 텍스트 섹션을 확장하고 구성 요소 텍스트 스타일에 대한 옵션을 설정합니다.

• 글꼴 모음 - 아래쪽 화살표 아이콘을 클릭하여 구성 요소에서 텍스트에 사용할 글꼴 모음을 선택합니다.

• 글꼴 크기 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 글꼴 크기를 늘리거나 줄이거나 값을 입력합니다. 입력한 값의 경우 소수를 사용할 수 있습니다.

• 선 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 선 높이를 늘리거나 줄이거나 값을 입력합니다. 입력한 값의 경우 소수를 사용할 수 있습니다.

  {width="250"}

• 텍스트 스타일 - 텍스트 스타일의 아이콘을 선택합니다. 굵게, 기울임꼴, 밑줄 또는 취소선.

• 텍스트 맞춤 - 가로 텍스트 맞춤 아이콘을 선택합니다. 왼쪽, 가운데, 오른쪽 또는 양쪽 맞춤.

• 글꼴 색상 - 선택기에서 글꼴 색상을 선택하려면 색상 사각형을 클릭합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

  {width="300"}

1. 스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.

2. 토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.

   • 테두리 색상​을 설정하려면 확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

   {width="300"}

   • 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

   • 테두리 스타일​을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.

   • 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.

   {width="250"}

3. 테두리 반지름​의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

   값이 0(기본값)이면 사각형 모서리가 생성됩니다.

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

• 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.

• 너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.

  • 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.

    {width="250"}

  • 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.

    {width="250"}

스타일 탭이 선택된 오른쪽 패널에서 여백 섹션을 확장하고 구조적 구성 요소 내에서 여백 간격에 대한 옵션을 설정합니다. 이 스타일은 CSS margin 매개 변수를 복제합니다. 이 매개 변수는 다른 구성 요소와 구분하여 구성 요소 테두리 외부의 공간으로 제어합니다. 구성 요소 주위에 간격을 만들어 위치 및 주변 컨텐츠 레이아웃에 영향을 줍니다.

디자인 요구에 따라 여백 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 여백을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

스타일 탭을 선택한 오른쪽 패널에서 패딩 섹션을 확장하고 구조적 구성 요소 내에서 패딩에 대한 옵션을 설정합니다. 이 스타일은 구성 요소의 콘텐츠와 테두리 사이의 공간인 CSS padding 매개 변수를 복제합니다. 패딩은 내용과 구성 요소 테두리 사이의 거리를 제어하는 데 사용할 수 있는 내부 공간을 제공합니다.

디자인 요구에 따라 패딩 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 패딩을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

값이 있는 추가 CSS 호환 특성을 적용하려면 고급 스타일 설정을 사용하십시오. 기존 속성의 값을 변경하거나 새 값을 추가할 수 있습니다. 스타일이 상위-하위 구성 요소(요소)에 대한 CSS 상속 모델을 사용하여 구성 요소에 적용됩니다.

표시된 속성은 구성 요소에 대해 현재 정의된 스타일을 반영합니다. CSS 정의에 따라 값을 변경할 수 있습니다. 추가(+) 아이콘을 클릭하여 구성 요소에 대한 새 스타일 특성을 추가합니다.

{width="250"}

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

{width="300"}

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

• 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.

• 너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.

  • 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.

    {width="250"}

  • 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.

    {width="250"}

맞춤 섹션을 확장하고 사용할 가로 맞춤(왼쪽, 가운데 또는 오른쪽)을 선택합니다. 이 스타일은 표준 text-align CSS 스타일로 변환되며 구성 요소가 포함된 구성 요소 내에 배치되는 방식에 영향을 줍니다.

{width="250"}

스타일 탭이 선택된 오른쪽 패널에서 여백 섹션을 확장하고 구조적 구성 요소 내에서 여백 간격에 대한 옵션을 설정합니다. 이 스타일은 CSS margin 매개 변수를 복제합니다. 이 매개 변수는 다른 구성 요소와 구분하여 구성 요소 테두리 외부의 공간으로 제어합니다. 구성 요소 주위에 간격을 만들어 위치 및 주변 컨텐츠 레이아웃에 영향을 줍니다.

디자인 요구에 따라 여백 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 여백을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

스타일 탭을 선택한 오른쪽 패널에서 패딩 섹션을 확장하고 구조적 구성 요소 내에서 패딩에 대한 옵션을 설정합니다. 이 스타일은 구성 요소의 콘텐츠와 테두리 사이의 공간인 CSS padding 매개 변수를 복제합니다. 패딩은 내용과 구성 요소 테두리 사이의 거리를 제어하는 데 사용할 수 있는 내부 공간을 제공합니다.

디자인 요구에 따라 패딩 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 패딩을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

값이 있는 추가 CSS 호환 특성을 적용하려면 고급 스타일 설정을 사용하십시오. 기존 속성의 값을 변경하거나 새 값을 추가할 수 있습니다. 스타일이 상위-하위 구성 요소(요소)에 대한 CSS 상속 모델을 사용하여 구성 요소에 적용됩니다.

표시된 속성은 구성 요소에 대해 현재 정의된 스타일을 반영합니다. CSS 정의에 따라 값을 변경할 수 있습니다. 추가(+) 아이콘을 클릭하여 구성 요소에 대한 새 스타일 특성을 추가합니다.

{width="250"}

오른쪽 패널에서 스타일 탭을 선택한 상태에서 배경 섹션을 사용하여 구성 요소의 배경색을 정의합니다.

확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

{width="300"}

1. 스타일 탭을 선택한 오른쪽 패널에서 테두리 섹션을 확장하고 구성 요소의 테두리를 표시하는 옵션을 설정합니다.

2. 토글을 오른쪽으로 이동하여 테두리 표시 옵션을 활성화하고 디자인 기준에 따라 설정합니다.

   • 테두리 색상​을 설정하려면 확인란을 선택하고 색상 사각형을 클릭하여 선택기에서 색상을 선택합니다. 알려진 RGB, HSL, HSB 또는 16진수 값을 입력하여 색상을 선택할 수 있습니다. 또는 색상 슬라이더와 색상 필드를 사용하여 색상을 선택할 수 있습니다.

   {width="300"}

   • 테두리 크기(선 폭)을 설정하려면 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

   • 테두리 스타일​을(를) 설정하려면 표준 CSS border-style 값 목록에서 값을 선택하십시오.

   • 테두리가 표시되는 위치를 확인하려면 각 테두리 위치 확인란을 선택하십시오.

   {width="250"}

3. 테두리 반지름​의 경우 모퉁이에 대해 원하는 곡선에 따라 숫자 값을 설정하십시오.

   값이 0(기본값)이면 사각형 모서리가 생성됩니다.

스타일 탭을 선택한 오른쪽 패널에서 크기 섹션을 확장하고 구성 요소 높이 및 너비에 대한 옵션을 설정합니다.

• 높이 - 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 빈 값(자동)은 기본값이며 내용에 따라 요소의 높이 크기를 조정합니다.

• 너비 - 픽셀이나 백분율로 너비를 설정하려면 토글을 사용합니다.

  • 백분율 너비의 경우 슬라이더를 사용하여 백분율 값을 설정합니다. 백분율은 포함 블록의 콘텐츠 상자를 기반으로 요소 크기를 결정합니다. 이 콘텐츠 상자에서는 패딩과 테두리가 제외됩니다. 예를 들어 값 50은 요소 너비를 포함된 블록 콘텐츠 너비의 50%로 설정합니다.

    {width="250"}

  • 픽셀 기반 너비의 경우 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다. 비어 있는 값(자동)은 기본값이며 내용에 따라 요소의 너비를 조정합니다.

    {width="250"}

맞춤 섹션을 확장하고 사용할 가로 및 세로 맞춤을 선택합니다. 정렬 스타일은 HTML 구성 요소가 포함된 구성 요소(구조적 또는 컨테이너) 내에 배치되는 방식에 영향을 줍니다.

가로 맞춤은 표준 text-align CSS 스타일로 변환되며 왼쪽, 가운데 또는 오른쪽에서 선택할 수 있습니다. 세로 맞춤은 표준 vertical-align CSS 스타일로 변환되며 위쪽, 중간 또는 아래쪽에서 선택할 수 있습니다.

{width="300"}

스타일 탭이 선택된 오른쪽 패널에서 여백 섹션을 확장하고 구조적 구성 요소 내에서 여백 간격에 대한 옵션을 설정합니다. 이 스타일은 CSS margin 매개 변수를 복제합니다. 이 매개 변수는 다른 구성 요소와 구분하여 구성 요소 테두리 외부의 공간으로 제어합니다. 구성 요소 주위에 간격을 만들어 위치 및 주변 컨텐츠 레이아웃에 영향을 줍니다.

디자인 요구에 따라 여백 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 여백을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 여백 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 여백을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 여백을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 여백을 독립 값으로 설정하려면 잠금 해제됨 아이콘을 위쪽 및 아래쪽 설정 사이, 왼쪽 및 오른쪽 사이로 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

스타일 탭을 선택한 오른쪽 패널에서 패딩 섹션을 확장하고 구조적 구성 요소 내에서 패딩에 대한 옵션을 설정합니다. 이 스타일은 구성 요소의 콘텐츠와 테두리 사이의 공간인 CSS padding 매개 변수를 복제합니다. 패딩은 내용과 구성 요소 테두리 사이의 거리를 제어하는 데 사용할 수 있는 내부 공간을 제공합니다.

디자인 요구에 따라 패딩 값을 픽셀 단위로 설정합니다. 구성 요소의 모든 면, 상단, 왼쪽-오른쪽 또는 각 면에 대한 패딩을 독립적으로 설정할 수 있습니다.

• 모든 면 - 모든 면에 적용할 하나의 값을 설정하려면 각 면에 대해 다른 패딩 확인란의 선택을 취소하십시오. 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 위쪽-아래쪽 - 위쪽 및 아래쪽 패딩을 같은 값으로 설정하려면 위쪽 및 아래쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

• 왼쪽-오른쪽 - 왼쪽 및 오른쪽 패딩을 같은 값으로 설정하려면 왼쪽 및 오른쪽 설정 사이에 잠김 아이콘을 설정합니다. 에 대한 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

• 독립 - 각 면에 대한 패딩을 독립 값으로 설정하려면 Unlocked 아이콘을 위쪽 및 아래쪽 설정 사이 및 왼쪽 및 오른쪽 사이에 설정합니다. 각 설정에 대해 의 위쪽 및 아래쪽 화살표 아이콘을 클릭하여 픽셀 수를 늘리거나 줄입니다.

  {width="250"}

값이 있는 추가 CSS 호환 특성을 적용하려면 고급 스타일 설정을 사용하십시오. 기존 속성의 값을 변경하거나 새 값을 추가할 수 있습니다. 스타일이 상위-하위 구성 요소(요소)에 대한 CSS 상속 모델을 사용하여 구성 요소에 적용됩니다.

표시된 속성은 구성 요소에 대해 현재 정의된 스타일을 반영합니다. CSS 정의에 따라 값을 변경할 수 있습니다. 추가(+) 아이콘을 클릭하여 구성 요소에 대한 새 스타일 특성을 추가합니다.

{width="250"}