검색 이펙트

자바스크립트 검색하기

indexOf() / search()

검색하기

CSS 속성 갯수 : 0개

align-contetnt : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
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 : 테이블 캡션 요소가 위치하는 위치를 지정합니다.
caret-color : 사용자가 입력하는 텍스트 입력 컨트롤 내에서 캐럿의 색상을 지정합니다.
clear : 블록 요소에서 부모 요소의 float 속성에 대한 영향을 제어하는 속성입니다.
clip : 요소의 위치와 크기를 제어하기 위해 사용하는 속성입니다.
color : 텍스트의 색상을 지정하는 속성입니다.
column-count : 다단 레이아웃을 생성하는데 사용되는 속성입니다. 가로로 여러 개의 열로 나누어 표시됩니다.
column-fill : 다단 레이아웃을 생성하는데 사용되는 속성입니다. 여러 열로 구성된 요소 내에서 내용을 채우는 방법을 지정합니다.
column-gap : 다단 레이아웃을 생성하는데 사용되는 속성입니다. 다수의 열로 구성된 요소 내에서 각 열 사이의 간격을 지정합니다.
column-rule : 다단 레이아웃에서 각 열 사이에 그려지는 선을 설정하는 속성입니다.
column-rule-color : 다단 레이아웃에서 각 열 사이에 그려지는 선을 설정하는 속성입니다. 색상을 지정해줍니다.
column-rule-style : 다단 레이아웃에서 각 열 사이에 그려지는 선의 스타일을 설정하는 속성입니다.
column-rule-width : 다단 레이아웃에서 각 열 사이에 그려지는 선의 두게를 설정하는 속성입니다.
column-span : 다단 레이아웃에서 열이 여러개인 경우에 하나의 열이 여러 열의 크기를 가지도록 지정하는 속성입니다.
column-width : 다단 레이아웃에서 열의 폭을 설정하는 속성입니다.
columns : 다단 레이아웃에서 전체 요소를 여러 열로 나누는 방법을 설정하는 속성입니다.
content : '::before' '::after' 를 사용해 추가된 콘텐츠는 해당 가상 요소의 내용으로 나타납니다.
counter-increment : 카운터(counter)를 증가시키는데 사용됩니다.
counter-reset : 카운터(counter)의 초기 값을 설정하는데 사용됩니다.
cursor : 마우스 커서의 모양을 지정하는데 사용되는 속성입니다.
direction : 텍스트가 흐르는 방향을 지정하는데 사용되는 속성입니다.
display : 이 속성을 사용하여 HTML 요소를 화면에 어떻게 표시할지 결정할 수 있습니다.
empty-cells : 표에서 빈 셀의 표시 여부를 설정합니다.
filter : 이미지나 요소의 색상, 블러 등을 변경하는 필터 효과를 적용할 수 있습니다.
flex : 유연한 박스 모델을 생성하는 데 사용됩니다.
flex-basis : 유연한 박스 모델에서 아이템의 초기 크기를 지정합니다.
flex-direction : 유연한 박스 모델에서 아이템의 배치 방향을 설정합니다.
flex-flow : 유연한 박스 모델에서 아이템의 배치 방향과 간격을 한 번에 설정하는 단축 속성입니다.
flex-grow : 유연한 박스 모델에서 아이템의 크기를 늘리는 비율을 설정합니다.
flex-shrink : 유연한 박스 모델에서 아이템의 크기를 줄이는 비율을 설정합니다.
flex-wrap : 유연한 박스 모델에서 아이템이 한 줄에 맞지 않을 경우, 아이템을 여러 줄로 나눌 지 여부를 설정합니다.
float : 요소를 왼쪽이나 오른쪽으로 부동시켜 텍스트와 주변 내용을 둘러싸게 합니다.
font : 글꼴과 글자 크기, 글꼴 스타일, 줄 간격 등의 다양한 글꼴 관련 속성을 한 번에 지정할 수 있는 단축 속성입니다.
font-family : 속성은 폰트 종류를 설정합니다.
font-size : 속성은 폰트 사이즈 속성을 설정합니다.
font-size-adjust : 속성은 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch : 글꼴 너비를 조절하는 데 사용됩니다.
font-style : 속성은 폰트의 스타일을 설정합니다.
font-variant : 속성은 글꼴 변형 형태를 일괄적으로 설정합니다.
font-variant-numeric : 속성은 숫자에 대한 글꼴 글리프(표시 형태)를 설정합니다.
font-variant-ligatures : 속성은 글꼴 글리프가 겹쳤을 때 설정합니다.
font-variant-emoji : 속성은 이모지 글꼴 글리프를 설정합니다.
font-variant-east-asian : 속성은 아시아 언어 글꼴 글리프를 설정합니다.
font-variant-caps : 속성은 소문자/대문자에 대한 글꼴 글리프를 설정합니다.
font-variant-alternates : 속성은 글꼴 글리프의 대체 형태를 설정합니다.
font-variant-position : font-variant-position 속성은 글꼴 글리프의 위치를 설정합니다.
font-variation-settings : font-variation-settings 속성은 가변 폰트를 설정합니다.
font-weight : font-weight 속성은 폰트의 두께를 설정합니다.
grid : 그리드 레이아웃을 생성하는 데 사용됩니다.
grid-area : 그리드 레이아웃에서 아이템의 위치와 크기를 정의합니다.
grid-auto-columns : 그리드 레이아웃에서 자동 생성된 그리드 열의 너비를 정의합니다.
grid-auto-flow : 그리드 레이아웃에서 아이템의 배치 방법을 정의합니다./li>
grid-auto-rows : 그리드 레이아웃에서 자동 생성된 그리드 행의 높이를 정의합니다.
grid-column : 그리드 레이아웃에서 아이템의 열 위치를 지정합니다.
grid-column-end : 그리드 레이아웃에서 아이템의 열의 끝 위치를 정의합니다.
grid-column-gap : 그리드 레이아웃에서 열 사이의 간격을 정의합니다.
grid-column-start : 그리드 레이아웃에서 아이템의 열의 시작 위치를 정의합니다.
grid-gap : 그리드 레이아웃에서 행과 열 사이의 간격을 한 번에 설정하는 단축 속성입니다.
grid-row : 그리드 레이아웃에서 아이템의 행 위치를 지정합니다.
grid-row-end : 그리드 레이아웃에서 아이템의 행의 끝 위치를 정의합니다.
grid-row-gap : 그리드 레이아웃에서 행 사이의 간격을 설정합니다./li>
grid-row-start : 그리드 레이아웃에서 아이템이 시작할 행을 설정합니다.
grid-template : 레이아웃에서 그리드 템플릿을 지정하는 단축 속성입니다.
grid-template-areas : 그리드 레이아웃에서 그리드 영역을 지정하는 데 사용됩니다.
grid-template-columns : 그리드 레이아웃에서 열의 크기와 개수를 지정합니다.
grid-template-rows : 그리드 레이아웃에서 행의 크기와 개수를 지정합니다.
hanging-punctuation : 문장 부호가 텍스트 밖으로 나와있는 모양을 변경할 수 있습니다.
height : 속성은 요소의 세로 크기를 설정합니다.
hyphens : 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.
isolation : 요소의 배경을 어떻게 처리할지를 정의합니다.
justify-content : flexbox 컨테이너의 아이템들을 수평 정렬할 때 사용합니다.
left : 요소의 왼쪽 위치를 정의합니다.
letter-spacing : 텍스트의 각 문자 사이의 간격을 조정합니다.
line-height : 텍스트 블록의 각 줄의 높이를 조정합니다.
list-style : 리스트 스타일을 지정하는 단축 속성입니다.
list-style-image : 리스트 아이템 마커의 이미지를 지정합니다.
list-style-position : 리스트 아이템 마커의 위치를 지정합니다.
list-style-type : 리스트 아이템 마커의 유형을 지정합니다.
margin : 테두리(border)와 이웃하는 요소 사이의 간격인 마진 영역의 크기를 설정합니다.
margin-bottom : 아래쪽의 마진값을 설정함.
margin-top : 위쪽의 마진값을 설정함.
max-height : max-height속성은 요소의 최대 세로 크기를 설정합니다.
max-width : max-widtht속성은 요소의 최대 가로 크기를 설정합니다.
min-height : min-widtht속성은 요소의 최소 세로 크기를 설정합니다.
min-width : min-widtht속성은 요소의 최소 가로 크기를 설정합니다.
mix-blend-mode : blend-mode 속성 중 하나로, 두 개의 겹쳐진 요소 간에 블렌딩을 적용하는 데 사용됩니다.
object-fit : 이미지나 동영상과 같은 요소가 부모 요소의 크기에 맞춰져야 할 때, 해당 요소를 어떤 방식으로 조정할지를 지정하는 속성입니다.
object-position : 이미지나 동영상과 같은 요소가 부모 요소 내에서 어디에 위치해야 하는지를 지정하는 속성입니다.
opacity : 요소의 불투명도를 지정하는 속성입니다.
order : Flexbox 레이아웃에서 유용한 속성 중 하나로, flex 컨테이너 내에서 flex 아이템들의 순서를 변경하는 데 사용됩니다.
outline : 주위에 테두리를 그리는 속성입니다. 이 속성은 border와 유사하지만, 요소의 크기나 위치에 영향을 주지 않으며, 포커스, 활성 상태, 마우스 오버 등에 사용될 수 있습니다.
outline-color : outline의 색상을 지정하는 속성입니다.
outline-offset : outline과 요소 사이의 거리를 지정하는 CSS 속성입니다. 이 속성은 음수 값도 사용할 수 있으며, 기본값은 0입니다.
outline-style : outline-style은 outline의 스타일을 지정하는 속성으로 solid, dotted, dashed, double, groove, ridge, inset, outset 등의 값을 사용할 수 있습니다.
outline-width : outline-width는 outline의 두께를 지정하는 속성입니다. 이 속성은 px, em, rem 등의 단위를 사용할 수 있으며, 기본값은 medium입니다.
overflow : 요소 내용이 너무 클 경우 어떻게 처리할지를 지정합니다. 이 속성은 visible, hidden, scroll, auto 등의 값을 사용할 수 있으며, 기본값은 visible입니다.
overflow-x :각 요소의 가로 축에서 내용이 너무 클 경우 어떻게 처리할지를 지정하는 속성입니다.
overflow-y :각 요소의 세로 축에서 내용이 너무 클 경우 어떻게 처리할지를 지정하는 속성입니다.
overflow-wrop : 의미가 없는 텍스트 줄바꿈을 설정합니다.
padding :요소 내부의 콘텐츠와 테두리(border) 간의 간격을 지정하는 속성입니다.
padding-top : 요소의 윗쪽 방향으로 내부 간격을 지정합니다. 이속성은 단일 값 또는 4개의 값을 한번에 지정할 수 있으며, 기본값은 0입니다.
padding-bottom : 요소의 아랫쪽 방향으로 내부 간격을 지정합니다.
padding-right : 요소의 오른쪽 방향으로 내부 간격을 지정합니다.
padding-left : 요소의 왼쪽 방향으로 내부 간격을 지정합니다.
page-break-after : 문서 내에서 페이지를 나누는 방법을 지정하는 속성입니다. 현재 페이지 이후에 새로운 페이지를 시작하는 것을 나타냅니다.
page-break-before : 현재 페이지 이전에 새로운 페이지를 시작하는 것을 나타냅니다.
page-break-inside : 현재 페이지 내에서 새로운 페이지를 시작하는 것을 나타냅니다.
perspective : 3D 변환(transform)을 적용할 때 요소가 배치될 공간의 원근 거리(perspective)를 지정하는 CSS 속성입니다. 이 속성은 요소에 적용되는 3D 변환을 조절할 수 있습니다.
perspective-origin : 3D 변환(transform)을 적용할 때 원근 투영의 중심점을 지정하는 CSS 속성입니다. 이 속성은 perspective와 함께 사용되며, X축, Y축 값을 사용하여 지정할 수 있습니다.
pointer-events : 마우스 이벤트가 적용되는 요소를 지정하는 CSS 속성입니다. 이 속성을 none으로 지정하면 요소에 마우스 이벤트가 적용되지 않습니다.
position : 요소의 위치를 지정하는 CSS 속성입니다.
quotes : 인용 부호의 모양을 지정하는 CSS 속성입니다. 이 속성은 before, after 가상 요소에 적용되며, 인용 부호는 content 속성과 함께 사용됩니다.
resize : 요소의 크기를 조정할 수 있는지 여부를 지정하는 CSS 속성입니다
right : 요소의 오른쪽 가장자리를 지정하는 CSS 속성입니다.
tab-size : tab-size는 탭 문자의 크기를 지정하는 CSS 속성입니다. 이 속성은 공백 문자가 아닌 탭 문자의 크기를 지정하므로, 텍스트를 정렬할 때 유용합니다.
table-layout : 테이블의 셀 너비를 지정하는 CSS 속성입니다.
text-align : text-align 속성은 텍스트 정렬 방식을 설정합니다. start와 end 속성은 텍스트의 방향이 다를 경우 left와 right의 차이점을 알 수 있습니다.
text-align-last : text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration : text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정합니다. 라인의 굵기를 설정하고 싶다면, text-decoration-thickness 속성을 사용하고, 라인의 색상을 설정하고 싶다면, text-decoration-color 속성을 사용하고, 라인의 종류를 설정하고 싶다면, text-decoration-style 속성을 사용하고, 라인의 위치를 설정하고 싶다면, text-decoration-line 속성을 사용합니다.
text-decoration-color : text-decoration-color 속성은 글자 라인의 색상 속성을 설정합니다. 컬러 속성을 적용하기 위해서는 기본적으로 text-decoration-line: underline이 설정 되어 있어야 합니다.
text-decoration-line : 라인의 위치를 설정합니다. 언더라인을 아래, 위 또는 중간에 설정할 수 있으며, 여러가지 라인을 동시에도 설정할 수 있습니다. 라인의 컬러, 종류, 굵기도 설정이 가능하며, 글씨와 라인의 겹칩 현상, 포지션 값 등을 디테일하게 수정할 수 있습니다.
text-decoration-style : 텍스트의 장식(underline, overline, line-through)의 스타일을 설정합니다.
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은 요소의 상단 가장자리를 지정하는 CSS 속성입니다.
transform : 요소에 2D, 3D 변환을 적용하는 CSS 속성입니다. 이 속성은 translate, rotate, scale, skew 등의 값을 사용하여 요소를 변환시킬 수 있습니다.
transform-origin : 요소의 변환(transform) 중심점을 지정하는 CSS 속성입니다. 이 속성은 X축, Y축, Z축 값을 사용하여 지정할 수 있으며, 기본값은 50% 50% 0입니다.
transform-style : 요소의 자식 요소를 3D 변환합니다.
transition : 요소에 대한 모든 트랜지션 속성을 지정합니다.
transition-delay : 트랜지션 지연 속성은 트랜지션이 시작되기 전에 대기해야 하는 시간을 지정합니다. 값은 초 단위로 지정됩니다.
transition-duration : 트랜지션 지속 시간 속성은 트랜지션에 걸리는 시간을 지정합니다.
transition-property : 이 속성을 사용하여 어떤 속성이 전환 효과(transition)를 가져야 하는지 지정할 수 있습니다.
transition-timing-function : 전환 효과의 시간 변화를 제어하는 CSS 속성입니다.
unicode-bidi : 텍스트의 양방향성(bidirectionality)을 지정합니다.
user-select : 사용자가 선택 가능한 요소와 텍스트를 제어합니다.
vertical-align : 요소의 수직 위치를 지정합니다.
visibility : 요소의 가시성 여부를 지정합니다.
white-space : white-space 속성은 줄바꿈 및 공백을 설정합니다.
width : width 속성은 요소의 가로 크기를 설정합니다.
word-break : 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.
word-spacing : 단어 간 간격을 지정합니다.
word-wrap : 긴 단어나 URL 등이 한 줄에서 너무 길어서 페이지 레이아웃을 깨뜨리지 않도록 줄 바꿈을 지정합니다.
z-index : 요소의 쌓임 순서를 지정합니다.속성 값으로 숫자를 사용하며, 숫자가 높을수록 요소는 더 상위에 쌓이게 됩니다.