스타일 패널 개요

Designer 도구 내에 있는 스타일 패널은 웹 사이트의 모든 구성 요소를 개인화할 수 있는 다양한 스타일 컨트롤을 제공합니다. 스타일 패널에서 제공되는 포괄적인 컨트롤 세트를 사용하여 요소의 레이아웃, 배경색 또는 서체를 유연하게 수정할 수 있습니다.

개별 요소 스타일 지정 외에도 스타일을 클래스로 저장하는 옵션이 있으므로 웹 사이트 전체의 요소에 일관된 스타일 세트를 적용할 수 있습니다. 또한 스타일 패널에서 미디어 쿼리라고도 하는 중단점을 활용하여 다양한 장치 크기에 맞게 레이아웃을 조정할 수 있습니다.

이 가이드에서는 스타일 패널의 다양한 구성 요소에 대해 설명합니다.

1. 클래스
2. 선택기 필드
3. 상태 메뉴
4. 스타일 섹션
5. 상속 및 적용된 스타일 표시기

클래스

스타일 패널을 사용하여 웹 사이트의 각 요소에 개별적으로 스타일을 지정할 수 있지만 요소를 수동으로 조정하는 것은 힘들고 시간이 많이 걸릴 수 있습니다. 이것은 수업이 유용한 곳입니다.

클래스는 웹 사이트 전체의 다양한 요소에 적용할 수 있는 스타일 정보를 저장합니다. 스타일 패널에서 요소 스타일 지정을 시작하자마자 클래스가 자동으로 생성되어 선택한 요소에 할당됩니다. 또한 클래스를 수동으로 생성하고 이름을 바꿀 수 있는 옵션도 있습니다.

원본 클래스의 스타일 값과 해당 콤보 클래스에 구현하는 추가 스타일을 상속하는 콤보 클래스를 만들 수도 있습니다. 클래스 및 콤보 클래스에 대해 자세히 알아보세요.

선택기 필드

스타일 패널 상단에 있는 요소 유형은 현재 스타일을 지정하고 있는 요소(예: 이미지, div 블록, 양식 등)를 나타냅니다. 요소 유형 아래에는 선택기 필드, 해당 요소에 적용된 모든 태그, 클래스 및 콤보 클래스를 표시합니다. 기존 클래스의 이름을 바꾸고 새 클래스 또는 콤보 클래스를 설정하는 작업은 이 필드에서 직접 수행할 수 있습니다.

선택기 필드에서 클래스 생성 및 이름 바꾸기

요소에 대한 스타일 지정을 시작하면 요소 유형에 따라 클래스 이름이 자동으로 할당됩니다. 예를 들어 클래스를 수동으로 생성하지 않고 단락 요소에 스타일을 적용하면 "Paragraph"라는 클래스가 자동으로 할당됩니다. 클래스 이름을 두 번 클릭하면 선택기 필드, 클래스 이름을 바꾸거나 새 클래스를 만들 수 있습니다.

새 클래스를 소개하려면 원하는 클래스 이름을 입력란에 입력하세요. 선택기 필드.

수업 삭제

요소에서 클래스를 제거할 수 있는 옵션이 있습니다. 선택기 필드. 이 클래스는 언제든지 다른 요소의 스타일을 지정하는 데 재사용될 수 있지만 스타일 선택기 패널 또는 귀하의 웹사이트. 귀하의 웹사이트에서 수업을 완전히 삭제하는 것은 다음에서만 가능합니다. 스타일 선택기 패널 더 이상 어떤 요소와도 연결되지 않을 때.

상태 메뉴

특정 요소의 모양과 동작을 변경하려면 상태, 와 같은 호버링 또는 집중된, 다음에서 상태를 선택할 수 있습니다. 선택기 필드 > 상태 드롭 다운 메뉴. 스타일 지정 상태에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

상속 메뉴

그만큼 계승 메뉴는 약간 위쪽에 위치 선택기 필드. 이를 클릭하면 선택한 요소의 상위 요소와 상위 요소가 표시되며 전역 태그까지 거슬러 올라갑니다(예: 본문(모든 페이지) 태그). 상속 메뉴에서 클래스의 스타일을 선택하고 업데이트할 수도 있습니다.

상속 메뉴에는 콤보 클래스의 기본 클래스도 표시됩니다. 상태를 선택하면 메뉴에 스타일이 적용된 상태가 표시됩니다. 상속 및 적용된 스타일 표시기에 대해 자세히 알아보세요.

영향을 받는 요소

그만큼 영향을 받는 요소 표시기는 선택기 필드 바로 아래에 표시되며 선택기 필드의 클래스 또는 태그가 현재 페이지와 웹 사이트 전체에서 활용된 횟수를 나타냅니다. 텍스트를 클릭하면 해당 클래스나 태그를 공유하는 모든 요소 주위의 윤곽선을 전환할 수 있습니다.

스타일 섹션

스타일 패널의 각 섹션은 고유한 CSS 속성(예: 스타일) 세트를 관리합니다. 다음 섹션 내에서 다양한 스타일을 자유롭게 조정하고 캔버스에서 수정 사항을 미리 볼 수 있습니다.

• 공들여 나열한 것
• 간격
• 크기
• 위치
• 타이포그래피
• 배경
• 테두리
• 효과
• 사용자 정의 속성

섹션을 개별적으로 또는 한꺼번에 확장, 축소 또는 전환할 수 있습니다. 초점 모드. 

집중 모드를 활성화하려면: 

1. “를 클릭하세요.세 개의 점” 아이콘이 상단에 표시됩니다. 스타일 패널
2. 을 체크 해봐 초점 모드 옵션
3. 섹션에서 섹션을 선택하세요. 스타일 패널 확장하다(예: 간격, 배경 등)

집중 모드를 비활성화하려면: 

1. “를 클릭하세요.세 개의 점” 아이콘이 상단에 표시됩니다. 스타일 패널
2. 선택을 취소 초점 모드 옵션

전문가 팁: 사용 대체/옵션 + 에스 키보드에서 모두 확장하거나 축소하려면 스타일 패널 속성 섹션. 누르다 대체/옵션 + 옮기다 + 에스 전환하다 초점 모드 켜짐 및 꺼짐. 

집중 모드의 선택 또는 선택 취소는 세션 내내 유지됩니다. 예를 들어 포커스 모드를 활성화하고 디자이너 도구를 새로 고치거나 다른 브라우저나 탭에서 액세스하면 포커스 모드가 유지됩니다. 그러나 집중 모드 설정은 다른 웹사이트로 이전되지 않습니다. 한 사이트에서 집중 모드를 활성화하고 Designer 도구에서 다른 사이트로 전환하면 새 사이트에서는 집중 모드가 비활성화됩니다.

공들여 나열한 것

캔버스에 요소를 추가하면 기본 표시 옵션이 모양에 영향을 줍니다. 그만큼 공들여 나열한 것 섹션에서는 다음과 같은 기본 표시 옵션을 제공합니다. 차단하다, 몸을 풀다, 그리드, 또는 없음. "를 클릭하면화살” 아이콘을 클릭하면 디스플레이 옵션 다음과 같은 대안이 포함된 드롭다운 인라인 블록, 인라인 플렉스, 인라인 그리드, 그리고 인라인. 이 섹션에서 디스플레이 설정에 대해 자세히 알아보세요.

간격

간격을 사용하면 요소 경계 외부 또는 내부의 호흡 공간을 나타내는 요소 간격을 정의할 수 있습니다. 하는 동안 여백 요소 테두리 외부의 공간을 결정하고, 심 요소 내부, 콘텐츠와 테두리 사이의 공간을 정의합니다. 

지정할 수 있습니다 간격 요소의 위쪽, 아래쪽, 왼쪽 및 오른쪽에 대해 간격 부분. 그만큼 간격 값은 한 면, 두 개의 보완적인 면 또는 네 면 모두에 개별적으로 적용될 수 있습니다. 간격에 대한 추가 정보는 여기에서 확인할 수 있습니다.

크기

기본적으로 요소는 상위 요소의 너비에 맞게 늘어나거나 그 안에 있는 콘텐츠의 크기에 맞춰 조정됩니다. 그만큼 크기 섹션에서는 다음에 대한 사용자 정의 옵션을 제공합니다. 너비, 키, 측면비율, 과다, 그리고 맞다 설정.

메모: 확실한 크기 컨테이너 요소에 대한 옵션이 제한될 수 있습니다. 

자세한 내용은 이 섹션에서 사용할 수 있는 다양한 크기 설정을 살펴보세요.

위치

에서 위치 섹션에서 요소를 구성할 수 있습니다. 위치 (예: 정적, 상대, 절대, 고정 또는 고정) 뜨다 그리고 분명한 설정. 이 섹션에서는 위치, 부동 및 지우기 설정에 대해 더 깊이 이해합니다.

타이포그래피

내 타이포그래피 섹션에서는 웹페이지의 텍스트 표시를 명령하기 위해 모양과 스타일을 제어하는 설정을 찾을 수 있습니다.

조금이라도 수정하면 타이포그래피 요소에 디자인을 적용하면 해당 요소와 그 하위 요소 내의 모든 텍스트 요소에 조정 사항이 적용됩니다. 타이포그래피 구성 및 권장 방법에 대해 자세히 알아보세요.

형세

내 형세 category를 사용하면 배경 이미지, 그라데이션 또는 색상을 모든 요소(미디어 요소 제외)에 통합하고 수정할 수 있습니다. 깎는 재산. 또한 치수, 놓기, 그리고 무늬 배경 이미지를 표시합니다. 백그라운드 구성에 대해 자세히 알아보세요.

가장자리

모서리는 요소 경계의 곡률을 설정하거나 요소 둘레의 한 면 또는 여러 면에 윤곽선을 설정합니다. 에서 가장자리 category, 당신은 설정할 수 있습니다 곡률 정도, 패션, 두께, 그리고 그늘 요소 가장자리의 경우. 에지 구성에 대해 자세히 알아보세요.

영향

내 영향 섹션에서는 요소에 다양한 효과를 할당할 수 있습니다. 여기에는 다음이 포함됩니다. 퓨전, 반투명, 상자 그림자, 2D 및 3D 변환, 교대, 필터, 풍경 필터, 그리고 커서. 또한 특정 상태(예: 호버, 집중 등)에 효과를 적용할 수 있습니다. 효과에 대해 자세히 알아보세요.

맞춤 속성

내 맞춤 속성 category에서는 사용자 정의 CSS를 삽입하여 스타일 패널의 다른 섹션에서 기본적으로 지원되지 않는 CSS 속성과 값을 통합할 수 있습니다. 사용자 정의 속성에 익숙해지세요.

유산 및 구현된 스타일 마커

스타일 패널에서 category를 축소하면 해당 category 내의 속성에 구현된 로컬 또는 상속된 스타일이 있는 경우 category 이름 옆에 색조 점이 나타납니다. 스타일 패널에서 category를 확장하면 로컬 또는 상속된 스타일을 소유한 모든 속성 이름에 색조 태그가 표시됩니다.

이러한 색조 마커는 스타일이 선택한 요소, 현재 클래스에 구현되었는지, 아니면 핵심 클래스, 상위 요소, 전역 태그 또는 확대된 뷰포트에서 전달되었는지 등 스타일의 기원을 나타냅니다.

추가 스타일을 통합하거나, 상속된 스타일을 대체하거나, 이러한 스타일을 제거할 수 있습니다. 또한 다음에서 소스를 선택하여 상속된 스타일을 변경할 수도 있습니다. 유산 쓰러지 다.

주황색 마커

주황색 마커는 현재 스타일이 선택한 요소의 선행 요소에서 상속되었음을 나타냅니다. 즉, 선택한 요소의 스타일이 태그, 핵심 클래스, 상위 중단점 또는 상위 요소의 텍스트 스타일에서 상속된다는 의미입니다. 주황색 마커를 클릭하면 스타일이 어디에서 상속되었는지 확인할 수 있습니다.

주황색 스타일 마커로 표시된 상속된 스타일을 대체하거나 클래스 또는 태그로 이동하여 스타일을 편집할 수 있습니다. 현재 요소의 스타일을 지정하는 모든 클래스와 태그에 액세스합니다. 유산 쓰러지 다.

이 드롭다운에서 클래스나 태그를 선택하고 일시적으로 스타일을 지정할 수 있습니다. 예를 들어, H1 제목을 선택한 상태에서 다음을 열 수 있습니다. 유산 드롭다운에서 선택하세요. 모든 H1 제목 꼬리표.

파란색 마커

스타일 마커가 파란색인 경우 요소의 스타일이 현재 클래스, 태그 또는 중단점에서 시작되었음을 나타냅니다. 상속된(주황색) 스타일을 수정하는 경우에도 마커가 파란색으로 전환됩니다. 파란색 마커를 탭한 다음 선택하세요. 초기화 지역 스타일을 되돌리고 제거합니다.

분홍색 마커

분홍색 스타일 마커는 스타일이 기존 중단점에서 현재 선택한 요소에 구현되었음을 나타냅니다. 예를 들어, 그리드 자식 설정은 선택한 요소에만 적용되며 이러한 스타일은 클래스 내에 저장되지 않습니다. Quick Stack의 스타일을 지정할 때 분홍색 마커가 나타날 수도 있습니다.

더 작은 중단점에서 상속된(주황색) 스타일을 재정의하는 경우에도 마커가 분홍색으로 변합니다. 분홍색 마커 라벨을 클릭한 다음 초기화 되돌리고 지우려면

전문적인 힌트: 바로가기 조합 활용 옵션 + 클릭 (맥에서는) 또는 Alt + 클릭 (Windows의 경우) 스타일을 재설정합니다.

계속해서 디자인을 빛나게 하세요. 스타일 패널 구성!