Skip to main content

뷰 스타일 속성

예제​

참조

Props​

backfaceVisibility​

타입
enum('visible', 'hidden')

backgroundColor​

타입
color

borderBottomColor​

타입
color

borderBottomEndRadius​

타입
number

borderBottomLeftRadius​

타입
number

borderBottomRightRadius​

타입
number

borderBottomStartRadius​

타입
number

borderStartEndRadius​

타입
number

borderStartStartRadius​

타입
number

borderEndEndRadius​

타입
number

borderEndStartRadius​

타입
number

borderBottomWidth​

타입
number

borderColor​

타입
color

borderCurve
iOS
​

iOS 13 이상에서는 테두리의 코너 곡선을 변경할 수 있다.

타입
enum('circular', 'continuous')

borderEndColor​

타입
color

borderLeftColor​

타입
color

borderLeftWidth​

타입
number

borderRadius​

둥근 테두리가 보이지 않는다면, overflow: 'hidden'도 함께 적용해 보세요.

타입
number

borderRightColor​

타입
color

borderRightWidth​

타입
number

borderStartColor​

타입
color

borderStyle​

타입
enum('solid', 'dotted', 'dashed')

borderTopColor​

타입
color

borderTopEndRadius​

타입
number

borderTopLeftRadius​

타입
number

borderTopRightRadius​

타입
number

borderTopStartRadius​

타입
number

borderTopWidth​

타입
number

borderWidth​

타입
number

boxShadow​

note

boxShadow는 New Architecture에서만 사용할 수 있다. 외곽 그림자는 Android 9 이상에서만 지원되며, 내부 그림자는 Android 10 이상에서만 지원된다.

엘리먼트에 그림자 효과를 추가한다. 그림자의 위치, 색상, 크기, 흐림 정도를 제어할 수 있다. 이 그림자는 inset 여부에 따라 엘리먼트의 테두리 박스 외부 또는 내부에 나타난다. 이는 동일한 이름의 웹 스타일 속성을 스펙에 맞게 구현한 것이다. 사용 가능한 모든 인자에 대한 자세한 내용은 BoxShadowValue 문서를 참고한다.

이러한 그림자를 여러 개 합성해 하나의 boxShadow로 구성할 수 있다.

boxShadow는 웹 구문을 모방한 문자열 또는 BoxShadowValue 객체의 배열을 인자로 받는다.

타입
BoxShadowValue 객체 배열 | 문자열

cursor
iOS
​

iOS 17 이상에서는 pointer로 설정하면 포인터(예: iOS의 트랙패드나 스타일러스, 또는 visionOS에서 사용자의 시선)가 뷰 위에 있을 때 호버 효과를 적용할 수 있다.

타입
enum('auto', 'pointer')

elevation
Android
​

뷰의 고도를 설정한다. Android의 기본 elevation API를 사용하며, 이는 아이템에 그림자를 추가하고 겹치는 뷰 간의 z-order에 영향을 미친다. Android 5.0 이상에서만 지원되며, 이전 버전에서는 아무런 효과가 없다.

타입
number

filter​

note

filter는 New Architecture에서만 사용할 수 있다.

View에 그래픽 필터를 추가한다. 이 필터는 하나 이상의 _필터 함수_로 구성되며, 각 함수는 View의 그래픽 합성에 대한 아톰 단위의 변경을 나타낸다. 유효한 필터 함수의 전체 목록은 아래에 정의되어 있다. filter는 View 자체뿐만 아니라 하위 엘리먼트에도 적용된다. filter는 overflow: hidden을 암시하므로, 하위 엘리먼트는 View의 경계에 맞게 잘린다.

다음 필터 함수는 모든 플랫폼에서 동작한다:

  • brightness: View의 밝기를 변경한다. 음수가 아닌 숫자나 백분율을 인자로 받는다.
  • opacity: View의 투명도 또는 알파 값을 변경한다. 음수가 아닌 숫자나 백분율을 인자로 받는다.
note

성능 및 사양 준수 문제로 인해 iOS에서는 이 두 가지 필터 함수만 사용할 수 있다. UIKit 대신 SwiftUI를 사용해 이 문제를 해결할 수 있는 방법을 탐구할 계획이다.

Android

다음 필터 함수는 Android에서만 동작한다:

  • blur: 가우시안 블러를 적용해 View를 흐리게 만든다. 지정된 길이는 블러 알고리즘에서 사용되는 반지름을 나타낸다. 음수가 아닌 DIP 값을 받는다(백분율은 사용할 수 없음). 값이 클수록 더 흐려진다.
  • contrast: View의 대비를 변경한다. 음수가 아닌 숫자나 백분율을 인자로 받는다.
  • dropShadow: View의 알파 마스크 주변에 그림자를 추가한다(View에서 알파 값이 0이 아닌 픽셀만 그림자를 만든다). 그림자 색상을 나타내는 선택적 색상과 2개 또는 3개의 길이를 인자로 받는다. 2개의 길이가 지정되면 offsetX와 offsetY로 해석되어 그림자를 X 및 Y 차원으로 이동시킨다. 세 번째 길이가 주어지면 그림자에 사용되는 가우시안 블러의 표준 편차로 해석되므로, 값이 클수록 그림자가 더 흐려진다. DropShadowValue에서 인자에 대해 자세히 알아볼 수 있다.
  • grayscale: View를 지정된 양만큼 그레이스케일로 변환한다. 음수가 아닌 숫자나 백분율을 인자로 받으며, 1 또는 100%는 완전한 그레이스케일을 나타낸다.
  • hueRotate: View의 색조를 변경한다. 이 함수의 인자는 색조가 회전할 색상 휠의 각도를 정의하므로, 예를 들어 360deg는 아무런 효과가 없다. 이 각도는 deg 또는 rad 단위를 사용할 수 있다.
  • invert: View의 색상을 반전시킨다. 음수가 아닌 숫자나 백분율을 인자로 받으며, 1 또는 100%는 완전한 반전을 나타낸다.
  • sepia: View를 세피아로 변환한다. 음수가 아닌 숫자나 백분율을 인자로 받으며, 1 또는 100%는 완전한 세피아를 나타낸다.
  • saturate: View의 채도를 변경한다. 음수가 아닌 숫자나 백분율을 인자로 받는다.
note

blur와 dropShadow는 Android 12 이상에서만 지원된다.

filter는 위의 필터 함수로 구성된 객체 배열 또는 웹 구문을 모방한 문자열을 인자로 받는다.

타입
객체 배열: {brightness: number|string}, {opacity: number|string}, {blur: number|string}, {contrast: number|string}, {dropShadow: DropShadowValue|string}, {grayscale: number|string}, {hueRotate: number|string}, {invert: number|string}, {sepia: number|string}, {saturate: number|string} 또는 문자열

opacity​

타입
number

pointerEvents​

View가 터치 이벤트의 대상이 될 수 있는지를 제어한다.

  • 'auto': View가 터치 이벤트의 대상이 될 수 있다.
  • 'none': View는 터치 이벤트의 대상이 될 수 없다.
  • 'box-none': View는 터치 이벤트의 대상이 될 수 없지만, 하위 뷰는 대상이 될 수 있다.
  • 'box-only': View는 터치 이벤트의 대상이 될 수 있지만, 하위 뷰는 대상이 될 수 없다.
타입
enum('auto', 'box-none', 'box-only', 'none' )