검색 이펙트

CSS 검색하기

indexOf() / search()

검색하기

CSS 속성 갯수 : 1개

align-content : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
align-items : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
align-self : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
all : 요소의 속성을 초기화 또는 상속을 설정합니다.
animation : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.
animation-delay : 애니메이션 지연 시간을 설정합니다.
animation-direction : 애니메이션 움직임 방향을 설정합니다.
animation-duration : 애니메이션 움직임 시간을 설정합니다.
animation-fill-mode : 애니메이션이 끝난 후의 상태를 설정합니다.
animation-iteration-count : 애니메이션 반복 횟수 설정합니다.
animation-name : 애니메이션 keyframe 이름을 설정합니다.
animation-play-state : 애니메이션 진행상태를 설정합니다.
animation-timing-function : 애니메이션 움직임의 속도를 설정합니다.
backdrop-filter : 배경에 그래픽 효과를 설정합니다.
backface-visibility : 요소의 뒷면을 설정합니다.
background-attachment : 배경 이미지의 고정 여부를 설정합니다.
background-blend-mode : 배경을 혼합했을 때의 상태를 설정합니다.
background-clip : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
background-color : 백그라운드 색을 설정합니다.
background-image : 백그라운드 이미지 및 배경 속성을 설정합니다.
background-origin : 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다.
background-position : 백그라운드 이미지의 위치 영역을 설정합니다.
background-repeat : 백그라운드 이미지 반복 여부를 설정합니다.
background-size : 백그라운드 이미지 사이즈를 설정합니다.
background : 백그라운드 속성을 일괄적으로 설정합니다.
border : 테두리 속성을 일괄적으로 설정합니다.
border-bottom : 테두리 아래쪽 속성을 일괄적으로 설정합니다.
border-bottom-color : 테두리 아래쪽 색 속성을 설정합니다.
border-bottom-left-radius : 아래부분 왼쪽 모서리 굴곡을 설정합니다.
border-bottom-right-radius : 아래부분 오른쪽 모서리 굴곡을 설정합니다.
border-bottom-style : 테두리 아래쪽 스타일 속성을 설정합니다.
border-bottom-width : 테두리 아래쪽 두께 속성을 설정합니다.
border-collapse : 테이블의 테두리 분리 여부를 설정합니다.
border-color : 테두리 색 속성을 설정합니다.
border-image : 테두리 이미지 속성을 설정합니다.
border-image-outset : 테두리 이미지 간격 속성을 설정합니다.
border-image-repeat : 테두리 이미지 반복 속성을 설정합니다.
border-image-slice : 테두리 이미지 크기 속성을 설정합니다.
border-image-source : 테두리 이미지 경로 속성을 설정합니다.
border-image-width : 테두리 이미지 두께 속성을 설정합니다.
border-left : 테두리 왼쪽 속성을 일괄적으로 설정합니다.
border-left-color : 테두리 왼쪽 색 속성을 설정합니다.
border-left-style : 테두리 왼쪽 스타일 속성을 설정합니다.
border-left-width : 테두리 왼쪽 두께 속성을 설정합니다.
border-radius : 모서리 굴곡을 설정합니다.
border-right : 테두리 오른쪽 속성을 일괄적으로 설정합니다.
border-right-color : 테두리 오른쪽 색 속성을 설정합니다.
border-right-style : 테두리 오른쪽 스타일 속성을 설정합니다.
border-right-width : 테두리 오른쪽 두께 속성을 설정합니다.
border-spacing : 테이블의 테두리 간격을 설정합니다.
border-style : 테두리 스타일 속성을 설정합니다.
border-top : 테두리 위쪽 속성을 일괄적으로 설정합니다.
border-top-color : 테두리 위쪽 색 속성을 설정합니다.
border-top-left-radius : 윗부분 왼쪽 모서리 굴곡을 설정합니다.
border-top-right-radius : 윗부분 오른쪽 모서리 굴곡을 설정합니다.
border-top-style : 테두리 위쪽 스타일 속성을 설정합니다.
border-top-width : 테두리 위쪽 두께 속성을 설정합니다.
border-width : 테두리 두께 속성을 설정합니다.
bottom : 위치 요소의 아래쪽 속성을 설정합니다.
box-decoration-break : 컬럼 및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.
box-shadow : 박스 요소의 그림자를 설정합니다.
box-sizing : 요소 크기에 패딩 포함 여부를 설정합니다.
caption-side : 표(table) 요소에서 캡션(caption) 요소가 위치할 쪽을 지정하는 데 사용됩니다.
caret-color : 입력 커서(caret)의 색상을 지정합니다.
clear : 요소의 좌우측 또는 상하측 여백에 대한 플로팅(floating) 요소의 영향을 지우거나 남겨둘지를 설정합니다.
clip : 요소의 내용을 잘라내는 영역을 지정합니다.
color : 텍스트의 색상을 지정합니다.
column-count : 다단(column) 레이아웃에서 컨테이너의 열(column) 수를 지정합니다.
column-fill : 다단 레이아웃에서 마지막 열을 채우는 방법을 지정합니다.
column-gap : 다단 레이아웃에서 컬럼(column) 간격을 지정합니다.
column-rule : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 스타일을 설정합니다.
column-rule-color : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 색상을 설정합니다.
column-rule-style : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 스타일을 설정합니다.
column-rule-width : 다단 레이아웃에서 컬럼 사이에 배치되는 선의 너비를 설정합니다.
column-span : 다단 레이아웃에서 요소가 여러 열(column)을 걸칠지를 지정합니다.
column-width : 다단 레이아웃에서 각 열(column)의 너비를 지정합니다.
columns : 다단 레이아웃에서 컨테이너의 열(column) 수와 각 열의 너비를 지정합니다.
content : 가상 가상 요소(pseudo-element)에서 콘텐츠를 정의합니다.
counter-increment : 리스트(list)나 카운터(counter)에서 숫자를 증가시키는 방법을 지정합니다.
counter-reset : 리스트(list)나 카운터(counter)에서 숫자를 초기화하는 방법을 지정합니다.
cursor : 마우스 커서의 모양을 지정합니다.
display : 요소를 화면에 어떻게 표시할지를 지정합니다.
empty-cells : 표(table)에서 셀(cell)이 비어있을 때의 표시 방법을 지정합니다.
filter : 표(table)에서 셀(cell)이 비어있을 때의 표시 방법을 지정합니다.
flex : 요소를 유연한(flexible) 박스 모델(flexbox)로 설정합니다.
flex-basis : flex item의 초기 크기를 지정합니다. 이 속성은 flex shorthand 속성에서 flex item의 초기 크기를 설정할 때 사용되기도 합니다.
flex-flow : flex-direction 속성과 flex-wrap 속성을 함께 지정하는 단축 속성입니다.
flex-direction : flex container 안에서 flex item들의 배치 방향을 지정하는 속성입니다.
flex-grow : flex item의 크기를 늘리는데 사용되는 속성입니다.
flex-shrink : flex item의 크기를 줄이는데 사용되는 속성입니다.
flex-wrap : flex container 안에서 flex item들이 여러 줄에 걸쳐 배치되는지 여부를 지정하는 속성입니다.
float : 요소를 좌우 방향으로 띄우는 속성입니다.
font : 글꼴과 관련된 속성들을 지정하는 단축 속성입니다.
font-family : 폰트 종류를 설정합니다.
font-size : 폰트 사이즈 속성을 설정합니다.
font-size-adjust : 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch : 는 CSS의 속성(property) 중 하나로, 글꼴의 너비를 지정하는 속성입니다.
font-style : 폰트의 스타일을 설정합니다.
font-variant : 글꼴 변형 형태를 일괄적으로 설정합니다.
font-variant-numeric : 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.
font-variant-ligatures : 글꼴 글리프가 겹쳤을 때 설정합니다.
font-variant-emoji : font-variant-emoji 속성은 이모지 글꼴 글리프를 설정합니다.
font-variant-east-asian : 아시아 언어 글꼴 글리프를 설정합니다
font-variant-caps : 소문자/대문자에 대한 글꼴 글리프를 설정합니다.
font-variant-alternates : 글꼴 글리프의 대체 형태를 설정합니다.
font-variant-position : 글꼴 글리프의 위치를 설정합니다.
font-variation-settings : 가변 폰트를 설정합니다.
font-weight : 폰트의 두께를 설정합니다.
grid : CSS 그리드 레이아웃을 만들기 위한 속성으로, 요소들을 행(row)과 열(column)의 그리드로 배치합니다.
grid-area : CSS 그리드 레이아웃에서 아이템의 위치와 크기를 지정하는 단축 속성입니다.
grid-auto-columns : 그리드 컨테이너에 대한 자동 생성된 열(column)의 크기를 지정합니다.
grid-auto-flow : 그리드 아이템이 배치될 방향을 지정합니다.
grid-auto-rows : 그리드 컨테이너에 대한 자동 생성된 행(row)의 크기를 지정합니다.
grid-column : 그리드 아이템이 차지할 열(column) 범위를 지정하는 단축 속성입니다.
grid-column-end : 그리드 아이템의 끝 열(column) 위치를 지정합니다.
grid-column-gap : 그리드 아이템들 사이의 열(column) 간격을 지정합니다.
grid-column-start : 그리드 아이템의 시작 열(column) 위치를 지정합니다.
grid-gap : 그리드 아이템들 사이의 행(row)과 열(column) 간격을 지정하는 단축 속성입니다.
grid-row : 그리드 아이템이 차지할 행(row) 범위를 지정하는 단축 속성입니다.
grid-row-end : 그리드 아이템의 끝 행(row) 위치를 지정합니다.
grid-row-gap : 그리드 아이템들 사이의 행(row) 간격을 지정합니다.
grid-row-start : 그리드 아이템의 시작 행(row) 위치를 지정합니다.
grid-template : 그리드의 행(row)과 열(column)의 크기 및 간격을 지정하는 단축 속성입니다.
grid-template-areas : 그리드 레이아웃의 영역 이름과 위치를 지정합니다.
grid-template-columns : 그리드의 열(column)의 크기와 개수를 지정합니다.
grid-template-rows : 그리드의 행(row)의 크기와 개수를 지정합니다.
hanging-punctuation : 문장부호의 위치를 조절하는 속성입니다. 문장부호가 현재 행의 왼쪽이나 오른쪽에 걸치도록 지정할 수 있습니다.
height : 요소의 세로 크기를 설정합니다.
hyphens : 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.
isolation : 요소가 자식 요소와 격리되어 있는지 아닌지를 나타내는 속성입니다. 격리된 요소는 자식 요소들과 서로의 레이아웃에 영향을 주지 않습니다.
justify-content : 렉스 박스(flex box)나 그리드(grid)의 아이템들을 수평 방향으로 정렬하는 방법을 지정합니다.
left : 요소의 왼쪽 위치를 지정합니다.
letter-spacing : 글자 사이의 간격을 지정합니다.
line-height : 줄 간격을 지정합니다.
list-style : 리스트의 마커(기호) 모양, 위치, 이미지 등을 지정하는 단축 속성입니다.
list-style-image : 리스트의 마커(기호)로 사용할 이미지를 지정합니다.
list-style-position : 리스트 마커(기호)의 위치를 지정합니다.
list-style-type : 리스트 마커의 유형을 지정하는 속성입니다. disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha 등의 값이 있습니다.
margin : 요소의 네 방향(margin-top, margin-right, margin-bottom, margin-left)의 마진 값을 한번에 지정하는 속성입니다.
margin-bottom : 요소의 아래쪽 마진 값을 지정하는 속성입니다.
margin-left : 요소의 왼쪽 마진 값을 지정하는 속성입니다.
margin-right : 요소의 오른쪽 마진 값을 지정하는 속성입니다.
margin-top : 요소의 위쪽 마진 값을 지정하는 속성입니다.
max-height : 요소의 최대 세로 크기를 설정합니다.
max-width : 요소의 최대 가로 크기를 설정합니다.
min-height : 최소 세로 크기를 설정합니다.
min-width : 최소 가로 크기를 설정합니다.
mix-blend-mode : 요소의 배경색과 함께 조합될 색상 블렌딩 모드를 지정하는 속성입니다.
object-fit : 이미지 또는 비디오 요소의 크기와 화면 사이즈가 다를 때, 요소를 어떻게 맞출지 지정하는 속성입니다. contain, cover, fill, none, scale-down 등의 값이 있습니다.
object-position : 이미지 또는 비디오 요소의 위치를 지정하는 속성입니다.
opacity : 요소의 투명도를 지정하는 속성입니다. 0은 완전 투명, 1은 완전 불투명을 의미합니다.
order : flexbox에서 요소의 순서를 지정하는 속성입니다. 0이 기본값이며, 음수와 양수 값을 지정할 수 있습니다.
outline : 요소 주변에 윤곽선을 지정하는 속성으로, outline-style, outline-width, outline-color 속성을 한번에 지정할 수 있는 단축 속성입니다.
outline-color : 윤곽선의 색상을 지정하는 속성입니다.
outline-offset : 윤곽선과 요소의 간격을 지정하는 속성입니다.
outline-style : 윤곽선의 스타일을 지정하는 속성입니다. solid, dotted, dashed, double 등의 값이 있습니다.
outline-width : 윤곽선의 너비를 지정하는 속성입니다. medium, thin, thick 등의 상대적인 값 또는 절대적인 값을 사용할 수 있습니다.
overflow : 요소 내부의 콘텐츠가 요소의 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다. visible, hidden, scroll, auto 등의 값이 있습니다.
overflow-x : 요소 내부의 가로 방향 콘텐츠가 요소의 가로 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다.
overflow-y : 요소 내부의 세로 방향 콘텐츠가 요소의 세로 크기보다 클 때, 어떻게 처리할지 지정하는 속성입니다.
overflow-wrap : 의미가 없는 텍스트 줄바꿈을 설정합니다.
padding : 요소의 콘텐츠와 테두리 사이의 간격을 설정합니다.
padding-bottom : 요소의 하단 패딩(간격)을 설정합니다.
padding-left : 요소의 왼쪽 패딩(간격)을 설정합니다.
padding-right : 요소의 오른쪽 패딩(간격)을 설정합니다.
padding-top : 요소의 상단 패딩(간격)을 설정합니다.
page-break-after : 인쇄 문서에서 페이지 나누기 후에 현재 요소 다음에 페이지를 시작합니다.
page-break-before : 인쇄 문서에서 페이지 나누기 전에 현재 요소 이전에 페이지를 시작합니다.
page-break-inside : 인쇄 문서에서 현재 요소 내에서 페이지를 나눌 수 없도록 지정합니다.
perspective : 3D 변환을 위한 원근 거리를 설정합니다.
perspective-origin : 3D 변환을 위한 원근 거리의 원점을 설정합니다.
pointer-events : 요소에 대한 마우스 이벤트 처리를 활성화 또는 비활성화합니다.
position : 요소의 위치 지정 방법을 설정합니다.
quotes : 인용문 구분 기호의 따옴표를 설정합니다.
resize : 요소의 크기 조절 가능 여부를 지정합니다.
right : 요소의 오른쪽 위치를 설정합니다.
tab-size : 탭 문자의 너비를 지정합니다.
table-layout : 테이블의 너비를 설정하는 알고리즘을 지정합니다.
text-align : 텍스트 정렬 방식을 설정합니다.
text-align-last : 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration : 텍스트 라인 속성을 일괄적으로 설정합니다.
text-decoration-color : 글자 라인의 색상 속성을 설정합니다.
text-decoration-line : 글자 라인의 위치 속성을 설정합니다.
font : 텍스트에 대한 줄 표시(밑줄, 취소선 등)의 스타일을 설정합니다.
text-decoration-skip-ink : 언더 라인의 글씨 겹침을 설정합니다.
text-decoration-thickness : 글자 라인의 굵기 속성을 설정합니다.
text-emphasis-color : 강조 표시 색상을 설정합니다.
text-emphasis-position : 텍스트에 강조 표시 위치를 설정합니다.
text-emphasis-style : 텍스트에 강조 표시 스타일을 설정합니다.
text-emphasis : 텍스트에 강조 표시를 일괄적으로 설정합니다.
text-indent : 문단 들여쓰기 속성을 설정합니다.
text-justify : 양쪽 정렬을 했을 때 정렬 유형을 설정합니다.
text-overflow : 텍스트가 영역을 벗어 났을 때 속성을 설정합니다.
text-shadow : 텍스트 그림자를 설정합니다.
text-transform : 텍스트의 대소문자 변환을 지정합니다.
text-underline-offset : 언더 라인의 오프셋 값을 설정합니다.
text-underline-position : 언더 라인의 위치를 설정합니다.
top : 요소의 상단 가장자리(top) 위치를 설정합니다.
transform : 요소에 2D, 3D 변형(회전, 이동, 크기 조절 등)을 적용합니다.
transform-origin : 요소의 변형 기준점(origin)을 설정합니다.
transform-style : 3D 변형을 사용할 때 자식 요소를 3D 공간에 위치시키는 방법을 지정합니다.
transition : 요소에 대한 전환 효과를 지정합니다. 여러 속성 중에서 일부만 전환을 적용하려면 transition-property를 사용합니다.
transition-delay : 전환 효과가 시작되는 시점을 지연시킵니다.
transition-duration : 전환 효과의 지속 시간을 설정합니다.
transition-property : 전환 효과를 적용할 속성을 지정합니다.
transition-timing-function : 전환 효과의 타이밍 함수를 설정합니다.
unicode-bidi : 텍스트의 언어 방향을 설정합니다.
user-select : 요소 내에서 사용자의 텍스트 선택을 허용할지를 지정합니다.
vertical-align : 인라인 요소의 수직 정렬 방식을 설정합니다.
visibility : 요소의 표시 여부를 설정합니다. hidden 값으로 설정하면 요소는 표시되지 않지만 공간을 차지합니다.
white-space : 줄바꿈 및 공백을 설정합니다.
width : 요소의 가로 크기를 설정합니다.
word-break : 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.
word-spacing : 단어 간 간격을 설정합니다.
word-wrap : 요소의 너비가 작아서 한 줄에 들어가지 않는 단어의 줄바꿈 처리 방법을 지정합니다.
z-index : 요소의 쌓이는 순서(z축 방향)를 설정합니다. 값이 클수록 위에 쌓입니다. 값이 음수일 경우 다른 요소들보다 아래에 쌓입니다.

자바스크립트

CSS 검색하기

indexOf() / search()