Skip to main content
Version: Next

뷰 스타일 속성

예제​

참조

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​

타입
색상

borderCurve
iOS
​

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

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

borderEndColor​

타입
색상

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
​

안드로이드의 기본 elevation API를 사용해 뷰의 고도를 설정한다. 이는 항목에 그림자를 추가하고, 겹치는 뷰들의 z-order에 영향을 미친다. 안드로이드 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축으로 이동시킨다. 3번째 길이가 주어지면 그림자에 적용되는 가우시안 블러의 표준 편차로 해석된다. 값이 클수록 그림자가 더 흐려진다. 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' )