검색 효과(seacrh Effect)

CSS 속성 검색하기

indexOf( ) / search( )

검색

CSS 속성 : 개

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 : 요소 크기에 패딩 포함 여부를 설정.
border-block : 블록(위쪽,아래쪽) 테두리 속성을 일괄적으로 설정합니다.
border-block-color : 블록(위쪽,아래쪽) 테두리 색 속성을 설정합니다.
border-block-style : 블록(위쪽,아래쪽) 테두리 스타일 속성을 설정합니다.
border-block-width : 블록(위쪽,아래쪽) 테두리 두께 속성을 설정합니다.
border-block-start : 블록(위쪽) 테두리 속성을 일괄적으로 설정합니다.
border-block-start-color : 블록(위쪽) 테두리 색 속성을 설정합니다.
border-block-start-style : 블록(위쪽) 테두리 스타일 속성을 설정합니다.
border-block-start-width : 블록(위쪽) 테두리 두께 속성을 설정합니다.
border-block-end : 블록(아래쪽) 테두리 속성을 일괄적으로 설정합니다.
border-block-end-color : 블록(아래쪽) 테두리 색 속성을 설정합니다.
border-block-end-style : 블록(아래쪽) 테두리 스타일 속성을 설정합니다.
border-block-end-width : 블록(아래쪽) 테두리 두께 속성을 설정합니다.
border-inline : 인라인(왼쪽,오른쪽) 테두리 속성을 일괄적으로 설정합니다.
border-inline-color : 인라인(왼쪽,오른쪽) 테두리 색 속성을 설정합니다.
border-inline-style : 인라인(왼쪽,오른쪽) 테두리 스타일 속성을 설정합니다.
border-inline-width : 인라인(왼쪽,오른쪽) 테두리 두께 속성을 설정합니다.
border-inline-start : 인라인(왼쪽) 테두리 속성을 일괄적으로 설정합니다.
border-inline-start-color : 인라인(왼쪽) 테두리 색 속성을 설정합니다.
border-inline-start-style : 인라인(왼쪽) 테두리 스타일 속성을 설정합니다.
border-inline-start-width : 인라인(왼쪽) 테두리 두께 속성을 설정합니다.
border-inline-end : 인라인(오른쪽) 테두리 속성을 일괄적으로 설정합니다.
border-inline-end-color : 인라인(오른쪽) 테두리 색 속성을 설정합니다.
border-inline-end-style : 인라인(오른쪽) 테두리 스타일 속성을 설정합니다.
border-inline-end-width : 인라인(오른쪽) 테두리 두께 속성을 설정합니다.
caption-side : HTML 테이블의 캡션(caption) 요소가 표 안에서 어느 쪽에 위치할지를 지정하는 속성입니다.
caret-color : 입력 필드에서 커서(그림자)의 색상을 설정합니다.
clear : float 속성이 적용된 요소 바로 다음에 위치하는 요소들이 float 속성의 영향을 받지 않도록 지정하는 속성입니다.
clip : 요소의 보이는 부분을 지정합니다.
color : 요소의 텍스트 색상을 설정합니다.
column-count : 요소를 분할할 열 수를 지정합니다.
column-fill : 내용의 균형을 맞추거나 다음 열로 이동하기 전에 각 열을 내용으로 채우는 방법을 지정합니다.
column-gap : 열 사이의 간격을 지정합니다.
column-rule : 열 사이의 규칙 색상, 스타일 및 너비를 지정하는 약어입니다.
column-rule-color : 열 사이의 규칙 색상을 지정합니다.
column-rule-style : 열 사이의 규칙 스타일을 지정합니다.
column-rule-width : 열 사이의 규칙 너비를 지정합니다.
column-span : 다단(multi-column) 레이아웃을 사용할 때 각각의 column에 걸쳐 있는 요소를 하나의 column으로 확장시키는 역할을 합니다.
column-width : 열의 너비를 지정합니다.
columns : 문서의 내용을 여러 개의 열(column)로 나눌 수 있습니다.
content : 콘텐츠(content)를 삽입하거나 변경하는 데 사용되는 CSS 속성입니다.
counter-increment : HTML 문서에서 숫자를 증가시키는 데 사용되는 CSS 속성입니다.
counter-reset : HTML 문서에서 숫자를 초기화하거나 재설정하는 데 사용되는 CSS 속성입니다.
cursor : 마우스 커서의 모양을 지정하는 데 사용되는 CSS 속성입니다.
direction : 텍스트의 방향을 지정하는 데 사용되는 CSS 속성입니다.
display : 요소의 표시 방법을 지정하는 데 사용되는 CSS 속성입니다.
empty-cells : 테이블 셀의 경계선이 없는 경우 셀의 내용을 어떻게 처리할지 지정하는 데 사용되는 CSS 속성입니다.
filter : 요소에 필터 효과를 적용하는 데 사용되는 CSS 속성입니다. "blur", "grayscale", "brightness" 등 다양한 필터 효과를 적용할 수 있습니다.
flex : Flexbox 레이아웃을 사용하는 데 필요한 CSS 속성 중 하나입니다.
flex-basis : Flexbox 레이아웃에서 유연한 박스의 기본 크기를 설정하는 데 사용되는 CSS 속성입니다.
flex-direction : Flexbox 레이아웃에서 요소들의 배치 방향을 설정하는 데 사용되는 CSS 속성입니다.
flex-flow : flex-direction 및 flex-delay 속성을 지정하는 약어입니다.
flex-grow : 나머지 flex 항목과 비교하여 flex 항목이 증가하는 정도를 지정합니다.
flex-shrink : 레이아웃의 감소 너비 비율을 지정합니다.
flex-wrap : flex-item 요소들이 강제로 한줄에 배치되게 할 것인지, 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성입니다.
float : 요소를 어떻게 띄울 것인지를 나타내는 것입니다.
font : 글자의 폰트를 정의하는 속성 입니다.
font-family : 폰트 종류를 설정합니다.
font-size : 폰트 사이즈 속성을 설정합니다.
font-size-adjust : 소문자를 기준으로 폰트 크기를 설정합니다.
font-stretch : 글자의 폭을 넓게(wide) 늘이거나 좁게(narrow) 축소합니다.
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-variation-settings : 가변 폰트를 설정합니다.
font-weight : 폰트의 두께를 설정합니다.
grid : 콘텐츠를 구성하고 정렬하기 위해 행과 열의 그리드를 만들 수 있는 CSS의 레이아웃 시스템입니다.
grid-area : 그리드 레이아웃 내에서 그리드 항목의 크기와 위치를 정의하는 CSS의 단축 속성입니다.
grid-auto-columns : 그리드 템플릿 열 속성에 명시적으로 정의되지 않은 열의 크기를 지정하는 CSS의 속성입니다.
grid-auto-flow : 더 이상 사용할 수 있는 지정된 그리드 트랙이 없을 때 그리드 항목이 그리드에 배치되는 방식을 정의하는 CSS의 속성입니다.
grid-auto-rows : 그리드 템플릿 행 속성에 명시적으로 정의되지 않은 행의 크기를 지정하는 CSS의 속성입니다.
grid-column : 시작 열과 끝 열을 포함하여 그리드 레이아웃 내에서 그리드 항목의 위치를 지정하는 CSS의 단축 속성입니다.
grid-column-end : 그리드 항목의 끝 열을 지정하는 CSS의 속성입니다.
grid-column-gap : 콘그리드 레이아웃에서 열 사이의 간격 크기를 설정하는 CSS의 속성입니다.
grid-column-start : CSS에서 그리드 항목의 시작 열을 지정하는 속성입니다.
grid-gap : CSS에서 그리드 레이아웃에서 행과 열 사이의 간격의 크기를 설정하는 속기 속성입니다.
grid-row : 시작 행과 끝 행을 포함하여 그리드 레이아웃 내에서 그리드 항목의 위치를 지정하는 CSS의 속기 속성입니다.
grid-row-end : CSS에서 그리드 항목의 끝 행을 지정하는 속성입니다.
grid-row-gap : CSS에서 그리드 레이아웃에서 행 사이의 간격 크기를 설정하는 속성입니다.
grid-row-start : CSS에서 그리드 항목의 시작 행을 지정하는 속성입니다.
grid-template : 행과 열의 수와 크기를 포함하여 그리드의 레이아웃을 정의하는 CSS의 속성입니다.
grid-template-areas : 그리드 레이아웃 내에서 명명된 그리드 영역을 정의하는 CSS의 속성입니다.
grid-template-columns : 그리드 레이아웃 내에서 열의 크기를 정의하는 CSS의 속성입니다.
grid-template-rows : CSS에서 그리드 레이아웃 내의 행 크기를 정의하는 속성입니다.
hanging-punctuation : CSS에서 텍스트의 첫 번째 줄과 주변 텍스트의 정렬을 제어하는 속성으로, 일반적으로 타이포그래피와 구두점에 사용됩니다.
height : height 속성은 요소의 세로 크기를 설정합니다.
hyphens : 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.
isolation : 요소가 새 스태킹 컨텍스트를 만들어야 하는지 여부를 지정하는 CSS의 속성입니다.
justify-content : 플렉스 컨테이너의 주축을 따라 플렉스 항목을 정렬하는 CSS의 속성입니다.
left : CSS에서 요소를 포함하는 요소의 왼쪽에 위치시키는 속성입니다.
letter-spacing : 텍스트 블록에서 문자 사이의 공간을 조정하는 CSS의 속성입니다.
line-height : CSS에서 텍스트 줄 사이의 공간을 설정하는 속성입니다.
list-style : 목록 마커의 스타일, 위치 및 이미지를 설정하는 CSS의 단축 속성입니다.
list-style-image : 요소의 목록 마커에 사용되는 이미지를 설정하는 CSS의 속성입니다.
list-style-position : CSS에서 요소의 목록 마커 위치를 설정하는 속성입니다.
list-style-type : 요소의 목록 마커 스타일을 설정하는 CSS의 속성입니다.
margin : CSS에서 요소의 네 변 모두에 대한 여백을 설정하는 속기 속성입니다
margin-bottom : CSS에서 요소의 아래쪽에 대한 여백을 설정하는 속성입니다.
margin-left : CSS에서 요소의 왼쪽에 대한 여백을 설정하는 속성입니다.
margin-right : : CSS에서 요소의 오른쪽에 대한 여백을 설정하는 속성입니다.
margin-top : CSS에서 요소의 상단에 대한 마진을 설정하는 속성입니다.
max-height : max-height 속성은 요소의 최대 세로 크기를 설정합니다.
max-width : max-width 속성은 요소의 최대 가로 크기를 설정합니다.
min-height : min-height 속성은 요소의 최소 세로 크기를 설정합니다.
min-width : min-width 속성은 요소의 최소 가로 크기를 설정합니다.
mix-blend-mode : CSS에서 요소의 내용과 배경의 혼합 모드를 설정하는 속성입니다.
object-fit : CSS에서 요소의 내용이 컨테이너 내에 맞도록 크기를 조정하는 방법을 설정하는 속성입니다.
object-position : 컨테이너 내에서 요소의 내용 위치를 설정하는 CSS의 속성입니다.
opacity : 요소의 불투명도 수준을 설정하는 CSS의 속성입니다.
order : 플렉스 컨테이너 내에서 플렉스 항목이 나타나는 순서를 설정하는 CSS의 속성입니다.
outline : CSS에서 요소 윤곽선의 스타일, 색상 및 너비를 설정하는 단축 속성입니다.
outline-color : CSS에서 요소의 아웃라인 색상을 설정하는 속성입니다.
outline-offset : CSS에서 요소의 아웃라인과 경계 사이의 거리를 설정하는 속성입니다.
outline-style : CSS에서 요소의 아웃라인 스타일을 설정하는 속성입니다.
outline-width : CSS에서 요소의 아웃라인 너비를 설정하는 속성입니다.
border-image : 내용이 요소의 상자를 오버플로할 때 수행할 작업을 지정하는 CSS의 속성입니다
overflow-x: 콘텐츠가 요소의 상자를 수평으로 오버플로할 때 발생할 작업을 지정하는 CSS의 속성입니다.
overflow-y : CSS에서 콘텐츠가 요소의 상자를 수직으로 오버플로할 때 발생할 작업을 지정하는 속성입니다.
overflow-wrap : 텍스트가 컨테이너의 너비를 초과할 때 텍스트 줄을 끊는 방법을 지정하는 CSS의 속성입니다.
padding : 요소의 내부 여백을 설정한다.
padding-bottom : 요소의 하단 내부 여백 값을 지정한다.
padding-left : 요소의 왼쪽 내부 여백 값을 지정한다.
padding-right : 요소의 오른쪽 내부 여백 값을 지정한다.
padding-top : 요소의 상단 내부 여백 값을 지정한다.
page-break-after : 인쇄될 문서에서 페이지의 마지막 요소의 뒤에 페이지 나누기 삽입 유무의 여부를 지정한다.
page-break-before : 인쇄될 문서에서 페이지의 시작 부분의 요소의 앞에 페이지 나누기 삽입 유무의 여부를 지정한다.
page-break-inside : 요소 내에서 페이지가 나뉘는 방법을 지정한다.
perspective : 3D 변환을 사용하는 요소의 원근을 설정한다. (사용자와 z=0 평면 사이의 거리를 설정)
perspective-origin : perspective 속성에 대한 원점을 설정한다. 3D 공간에서 사용자가 보는 위치를 지정한다.
pointer-events : 요소가 마우스 이벤트에 응답해야하 하는지의 여부를 지정한다.
position : 요소를 위치 지정 방법을 정의한다.
quotes : blockquote 또는 p 요소에서 사용될 따옴표를 지정한다.
resize : 사용자가 요소의 크기를 조정할 수 있는지의 여부를 지정한다.
right : 요소를 수평 방향으로 오른쪽에서부터 위치 시킨다.
tab-size : 탭 문자의 너비를 설정한다.
table-layout : 테이블을 레이아웃하는 알고리즘을 제어한다.
text-align : text-align 속성은 텍스트 정렬 방식을 설정한다.
text-align-last : text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정한다.
text-decoration : text-decoration 속성은 텍스트 라인 속성을 일괄적으로 설정한다.
text-decoration-color : text-decoration-color 속성은 글자 라인의 색상 속성을 설정한다.
text-decoration-line : text-decoration-line 속성은 글자 라인의 위치 속성을 설정한다.
text-decoration-style : 텍스트 장식 라인(밑줄)의 스타일을 지정하는데 사용된다.
text-decoration-skip-ink : text-decoration-skip-ink 속성은 언더 라인의 글씨 겹침을 설정한다.
text-decoration-thickness : text-decoration-thickness 속성은 글자 라인의 굵기 속성을 설정한다.
text-emphasis-color : text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정한다.
text-emphasis-position : text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정한다.
text-emphasis-style : text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정한다.
text-emphasis : text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정한다.
text-indent : text-indent 속성은 문단 들여쓰기 속성을 설정한다.
text-justify : text-justify 속성은 양쪽 정렬을 했을 때 정렬 유형을 설정한다.
text-overflow : text-overflow 속성은 텍스트가 영역을 벗어 났을 때 속성을 설정한다.
text-shadow : text-shadow 속성은 텍스트 그림자를 설정한다.
text-transform : 텍스트의 대문자와 소문자를 변환하는데 사용된다.
text-underline-offset : text-underline-offset 속성은 언더 라인의 오프셋 값을 설정한다.
text-underline-position : text-underline-position 속성은 언더 라인의 위치를 설정한다.
top : 요소가 위치한 요소 상단과 포함하는 블록 상단 간의 거리를 지정한다.
transform : 요소를 2D 또는 3D 공간에서 변형할 수 있게 하는 속성이다.
transform-origin : 변환의 기준점을 설정하여 변형이 적용되는 위치를 결정한다.
transform-style : 변형된 요소의 하위 요소가 하나의 평면으로 펼쳐져야 하는지 아니면 3D 위치를 유지해야 하는지를 지정한다.
transition : 속성이 두 상태 사이에서 어떻게 전환되어야 하는지를 지정한다
transition-delay : 전환이 트리거 된 시간과 시작 시간 간의 지연 시간을 지정한다.
transition-duration : 전환을 완료하는데 소요되는 시간을 지정한다.
transition-property : 전환할 속성을 지정한다.
transition-timing-function : 전환에서 사용되는 이징 함수를 지정하여 시간에 따른 변경 비율을 결정한다.
unicode-bidi : 텍스트의 방향성을 컨텐츠 부모 요소에 의해 결정해야 하는지를 지정한다.
user-select : 사용자가 텍스트를 선택할 수 있는지의 여부를 제어한다.
vertical-align : 인라인 요소 또는 테이블 셀의 수직 정렬을 지정한다.
visibility : 요소가 보이거나 숨겨져 있는지를 지정한다.
white-space : white-space속성은 줄바꿈 및 공백을 설정한다.
width : width 속성은 요소의 가로 크기를 설정한다.
word-break : word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성이다.
word-spacing : 단어 간 간격을 지정한다.
word-wrap : 요소의 내용이 요소의 경계를 벗어날 때 줄바꿈이 발생해야 하는지 여부를 지정한다.
z-index : 요소의 쌓임 순서를 지정한다. 값이 높을수록 요소의 맨 위에 쌓인다.

JAVASCRIPT

CSS 속성 검색하기

indexOf( ) / search( )