indexOf( )를 이용하여 CSS 속성을 검색하기
- all : all 속성은 CSS 속성을 재설정하는데 사용할 수 있는 약식 속성입니다.
- animation : animation 속성은 애니메이션 속성을 설정하는데 사용할 수 있는 약식 속성입니다.
- animation-delay : animation-delay 속성은 애니메이션이 시작되는 시간을
설정하는 속성입니다.
- animation-direction : animation-direction 속성은
애니메이션이 시작되는 방향을 설정하는 속성입니다.
- animation-duration : animation-duration 속성은 애니메이션이
움직이는 시간을 설정하는 속성입니다.
- animation-fill-mode : animation-fill-mode 속성은
애니메이션이 끝난 후의 상태를 설정하는 속성입니다.
- animation-iteration-count :
animation-iteration-count 속성은 애니메이션의 반복 횟수를 설정하는 속성입니다.
- animation-name : animation-name 속성은 애니메이션의 키프레임 이름을 설정하는
속성입니다.
- animation-play-state : animation-play-state 속성은
애니메이션의 진행상태를 설정하는 속성입니다.
- appearance : appearance 속성은 기본 양식 컨트롤이 렌더링되는 방식을 제어합니다.
- backdrop-filter : backdrop-filter 속성은 요소 뒤에 필터효과를
설정합니다.
- backdrop-visibility : backdrop-visibility 속성은 요소 뒷면
표시 여부를 설정합니다.
- background : background 속성은 백그라운드 속성을 일괄적으로 설정합니다.
- background-attachment : background-attachment 속성은
배경 이미지의 고정 여부를 설정합니다
- background-blend-modebackground-blend-mode 속성은
배경을 혼합했을 떄의 상태를 설정합니다.
- background-clip : background-clip 속성은 백그라운 이미지의 위치 기준점을
설정합니다.
- background-color : background-color 속성은 태그의 백그라운드 색을
지정하는 설정합니다.
- background-image : background-image 속성은 백그라운드 이미지 및 배경
속성을 설정합니다.
- background-origin : background-origin 속성은 백그라운드 이미지의
위치 기준점을 설정합니다.
- background-position : background-position 속성은 백그라운드
이미지의 위치 영역을 설정합니다.
- background-repeat : background-repeat 속성은 백그라운드 이미지의
반복 여부를 설정합니다.
- background-size : background-size 속성은 백그라운드 이미지의 사이즈를
설정합니다.
- border : border 속성은 테두리 속성을 일괄적으로 설정합니다.
- border-bottom : border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로
설정합니다.
- border-bottom-color : border-bottom-color 속성은 테두리
아래쪽 색 속성을 설정합니다.
- border-bottom-left-radius :
border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다.
- border-bottom-right-radius :
border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다.
- border-bottom-style : border-bottom-style 속성은 테두리
아래쪽 스타일 속성을 설정합니다.
- border-bottom-width : border-bottom-width 속성은 테두리
아래쪽 두께 속성을 설정합니다.
- border-collapse : border-collapse 속성은 테이블의 테두리 분리 여부를
설정합니다.
- border-color : border-color 속성은 테이블의 테두리의 색상을 설정합니다.
- border-image : border-image 속성은 테이블의 테두리 대신 이미지를 설정합니다.
- border-image-outset : border-image-outset 속성은 테이블의
테두리영역과 이미지영역의 거리를 설정합니다.
- border-image-repeat : border-image-repeat 속성은 테두리
이미지 반복 속성을 설정합니다.
- border-image-slice : 속성은 테두리 이미지 크기 속성을 설정합니다.
- border-image-source : 속성은 테두리 이미지 경로 속성을 설정합니다.
- border-image-width : border-image-width 속성은 테두리 이미지
두께 속성을 설정합니다.
- border-left : border-left 속성은 태그의 테두리의 왼쪽을 설정하는 속성입니다.
- border-left-color : border-image-left-color 속성은 테두리
왼쪽 색 속성을 설정합니다.
- border-left-style : border-image-left-style 속성은 테두리
왼쪽 스타일 속성을 설정합니다.
- border-left-width : border-image-left-width 속성은 테두리
왼쪽 두께 속성을 설정합니다.
- border-radius : border-radius 속성은 태그의 테두리의 모서리를 둥글게 하는
속성입니다.
- border-right : border-right 속성은 태그의 테두리의 오른쪽을 설정하는 속성입니다.
- border-right-color : border-image-right-color 속성은
테두리 오른쪽 색 속성을 설정합니다.
- border-right-style : border-image-right-style 속성은
테두리 오른쪽 스타일 속성을 설정합니다.
- border-right-width : border-image-right-width 속성은
테두리 오른쪽 두께 속성을 설정합니다.
- border-spacing : border-spacing 속성은 표(table)의 테두리와
셀(td)의 테두리 사이의 간격을 정합니다.
- border-style : border-style 속성은 테두리 스타일 속성을 설정합니다.
- border-top : border-top 속성은 태그의 테두리의 윗부분을 설정하는 속성입니다.
- border-top-color : border-top-color 속성은 위쪽 색 속성을
설정합니다.
- border-top-left-radius : border-top-left-radius
속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다.
- border-top-right-radius :
border-top-rigth-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다.
- border-top-style : border-top-style 속성은 테두리 위쪽 스타일 속성을
설정합니다.
- border-top-width : border-top-width 송성은 테두리 위쪽 두께 속성을
설정합니다.
- border-width : border-width 속성은 테두리 두깨를 일괄적으로 설정합니다.
- bottom : bottom 속성은 위치 요소의 아래쪽 속성을 설정합니다.
- box-decoration-break : box-decoration-break 속성은 컬럼
및 줄바꿈시 테두리와 패딩의 방식을 설정합니다.
- box-shadow : box-shadow 속성은 박스 요소의 그림자를 설정합니다.
- box-sizing : box-sizing 속성은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다.
- break-after : break-after 속성은 상자 생성 다음에 페이지, 열 또는 영역 나누기가
작동하는 방식을 설정합니다.
- break-before : break-before 속성은 상자 생성 전에 페이지, 열 또는 영역 나누기가
작동하는 방식을 설정합니다.
- break-inside : break-inside 속성은 생성된 상자 안에서 페이지, 열 또는 영역
나누기가 작동하는 방식을 설정합니다.
- caption-side : caption-side 속성은 테이블 caption의 위치를 설정합니다.
- caret-color : caret-color 속성은 input의 커서 색을 정의합니다.
- clear : clear 속성은 float 요소의 성질을 차단합니다.
- clip : clip 속성은 보이는 영역을 설정합니다.
- color : color 속성은 글자의 색상을 설정하는 속성입니다.
- column-count : column-count 속성은 컬럼의 수를 정의합니다.
- column-fill : column-fill 속성은 열의 지정방법을 정의합니다.
- column-gap : column-gap 속성은 컬럼의 간격을 정의합니다.
- column-rule : column-rule 속성은 컬럼 라인의 가로값, 스타일, 컬러를 정의합니다.
- column-rule-color : column-rule-color 속성은 컬럼의 라인 색을
정의합니다.
- column-rule-style : column-rule-style 속성은 컬럼 라인의 스타일을
정의합니다.
- column-rule-width : column-rule-width 속성은 컬럼 라인의 가로값을
정의합니다.
- column-span : column-span 속성은 열의 속성을 정의합니다.
- column-width : column-width 속성은 컬럼의 가로 값을 정의합니다.
- columns : columns 속성은 컬럼의 열의 폭과 열의 수를 정의합니다.
- content : content 속성은 콘텐츠 내용을 설정합니다.
- counter-increment : counter-increment 속성은 콘텐츠의 순서 상태를
정의합니다.
- counter-reset : counter-reset 속성은 콘텐츠의 숫자를 초기화합니다.
- cursor : cursor 속성은 마우스 커서 모양을 설정하는 속성입니다.
- direction : directon 속성은 글자의 방향을 지정할 수 있습니다.
- display : display 속성은 웹페이지 레이아웃을 설정하는 속성입니다.
- empty-cells : empty-cells 속성은 내용이 없는 셀 주위에 테두리와 배경을 표시할지
여부를 설정합니다 .
- filter : filter 속성은 요소에 흐림 또는 색상 이동과 같은 그래픽 효과를 적용합니다.
- float : float 속성은 해당 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다.
- font : font 속성은 글자 폰트를 정의하는 속성입니다.
- font-family : font-family 속성은 글꼴을 설정하는 속성입니다.
- font-size : font-size 속성은 글자의 크기를 설정하는 속성입니다.
- font-size-adjust : font-size-adjust 속성은 현재 글꼴 크기(대문자
크기를 정의함)를 기준으로 소문자 크기를 설정합니다.
- font-stretch : font-stretch 속성은 글꼴을 늘리기를 설정하는 속성입니다.
- font-style : font-style 속성은 기울여표시를 설정하는 속성입니다.
- font-variant : font-variant 속성은 글꼴에 대한 모든 글꼴 변형을 설정할 수
있습니다.
- font-weight : font-weight 속성은 글자의 두께를 설정하는 속성입니다.
- hanging-punctuation : hanging-punctuation 속성은 문장
부호가 텍스트 줄의 시작 또는 끝에 있어야 하는지 여부를 설정합니다.
- height : height 속성은 세로의 길이를 설정하는 속성입니다.
- hyphens : hyphens 속성은 텍스트가 여러 줄에 걸쳐 줄 바꿈될 때 단어에 하이픈을 삽입하는 방법을
지정합니다.
- isolation : isolation 속성은 요소가 겹치지 않게 설정하는 속성입니다.
- justify-content : justify-content 속성은 가로 축을 기준으로 좌우에 대한
정렬을 설정하는 속성입니다.
- left : left 속성은 위치 요소의 왼쪽 속성을 설정합니다.
- letter-spacing : letter-spacing 속성은 텍스트 문자 사이의 가로 간격을
설정합니다.
- line-height : line-height 속성은 줄의 높이럴 설정하는 속성입니다.
- list-style : list-style 속성은 목록앞에 마커를 정하는 속성입니다.
- list-style-image : list-style-image 속성은 list 마커로 사용할
이미지를 설정합니다.
- list-style-position : list-style-position 속성은 list에
대한 상대 위치를 설정 합니다 .
- list-style-type : list-style-type 속성은 list의 마커를 설정합니다.
- margin : margin 속성은 바깥쪽 여백을 설정하는 속성입니다.
- margin-bottom : margin-bottom 속성은 바깥쪽 여백을 아래쪽만 설정하는
속성입니다.
- margin-left : margin-left 속성은 바깥쪽 여백을 왼쪽만 설정하는 속성입니다.
- margin-right : margin-right 속성은 바깥쪽 여백을 오른쪽만 설정하는 속성입니다.
- margin-top : margin-top 속성은 바깥쪽 여백을 위쪽만 설정하는 속성입니다.
- mask-border : mask-border 속성은 요소 테두리의 가장자리를 따라 마스크 레이어를 만들
수 있습니다.
- mask-border-mode : mask-border-mode 속성은 영역 마스크 레이어에
사용될 값을 설정합니다.
- mask-border-outset : mask-border-outset 속성은 요소의 마스크
레이어가 테두리 상자에서 설정 되는 거리를 설정합니다.
- mask-border-repeat : mask-border-repeat 속성은 소스 이미지의
가장자리 영역이 요소의 영역 크기에 맞게 조정되는 방식을 설정합니다 .
- mask-border-slice : mask-border-slice 속성은 이미지 세트를
영역으로 나눕니다. 이 영역은 요소의 마스크 테두리 구성 요소를 형성하는데 사용됩니다 .
- mask-border-source : mask-border-source 속성은 요소의 마스크
레이어를 만드는데 사용되는 소스 이미지를 설정합니다.
- mask-border-width : mask-border-width 속성은 요소의 마스크 테두리
너비를 설정합니다.
- mask-clip : mask-clip 속성은 마스크의 영향을 받는 영역을 설정합니다.
- mask-composite : mask-composite 속성은 현재 마스크 레이어 아래에 마스크
레이어가 있는 합성 작업을 나타냅니다.
- mask-image : mask-image 속성은 요소의 마스크 레이어로 사용되는 이미지를 설정합니다.
- mask-mode : mask-mode 속성은 마스크 참조가 광도 또는 알파 마스크로 처리되는지 여부를
설정합니다
- mask-orgin : mask-orgin 속성은 요소의 마스크 위치 지정 영역을 지정합니다.
- mask-position : mask-position 속성은 마스크 위치 지정 영역 내에서 마스크
레이어 이미지의 초기 위치(크기 조정 후)를 지정합니다.
- mask-repeat : mask-repeat 속성은 마스크 레이어 이미지가 반복(또는 타일링)되는지
여부와 방법을 지정하는 데 사용됩니다.
- mask-size : mask-size 속성은 마스크 레이어 이미지의 크기를 지정하는 데 사용됩니다.
- mask-type : mask-type 속성은 SVG <mask> 요소의 내용을 루미넌스 마스크로
처리할지 알파 마스크로 처리할지 지정하는 데 사용됩니다.
- max-height : max-height 속성은 요소의 최소 높이를 설정합니다.
- max-width : max-width 속성은 요소의 최소 넓이를 설정합니다.
- min-height : min-height는 height 속성의 사용값이 자신의 값보다 작아지는걸
방지합니다.
- min-width : min-width는 width 속성의 사용값이 자신의 값보다 작아지는걸 방지합니다.
- mix-blend-mode : mix-blend-mode 속성은 요소를 배경과 혼합하기 위한 혼합
모드를 지정하는 데 사용됩니다.
- object-fit : object-fit 속성은 대체된 요소의 내용을 사용된 높이와 너비로 설정된 상자에
맞추는 방법을 지정합니다.
- object-position : object-position 속성은 상자 안에 있는 대체된 요소의
내용 정렬을 결정합니다.
- opacity : opacity 속성은 요소의 불투명도를 나타냅니다.
- orphans : orphans 속성은 페이지나 열의 맨 아래에 남거나 남겨야 하는 단락의 최소 줄 수를 지정하는
데 사용되며 나머지 줄은 다음 페이지나 다음 열에 렌더링됩니다.
- outline : outline 속성은 요소 주위에 외곽선을 그리는 데 사용됩니다.
- outline-color : Outline-color 속성은 요소의 외곽선 색상을 설정하는 데
사용됩니다.
- outline-offset : Outline-offset 속성은 요소 외곽선의 오프셋을 설정하는 데
사용됩니다.
- outline-style : Outline-style 속성은 요소 외곽선의 스타일을 설정하는 데
사용됩니다.
- outline-width : Outline-width 속성은 요소 외곽선의 너비를 설정하는 데
사용됩니다.
- overflow : 요소내의 컨텐츠가 너무 커서 요소내에 모두 보여주기 힘들때 그것을 어떻게 보여줄지를
지정합니다.
- overflow-x : overflow 가로를 제어하는 속성입니다.
- overflow-y : overflow 세로를 제어하는 속성입니다.
- padding : padding 속성은 안쪽 여백을 설정하는 속성입니다.
- padding-bottom : padding-bottom 속성은 안쪽 여백을 아래쪽만 설정하는
속성입니다.
- padding-left : padding-left 속성은 안쪽 여백을 왼쪽만 설정하는 속성입니다.
- padding-right : padding-right 속성은 안쪽 여백을 오른쪽만 설정하는 속성입니다.
- padding-top : padding-top 속성은 안쪽 여백을 위쪽만설정하는 속성입니다.
- page-break-after : page-break-after 속성은 현재 요소 뒤의 페이지
나누기를 설정합니다 .
- page-break-before : page-break-before 속성은 현재 요소 앞에
페이지 나누기를 설정합니다.
- page-break-inside : page-break-inside 속성은 현재 요소 내부에
페이지 나누기를 설정합니다.
- perspective : perspective 속성은 2차원 인터페이스가 3차원인 경우 사용자가 바라보는
관점을 설정합니다.
- perspective-origin : perspective-origin 속성은 사용자가 보고
있는 위치를 결정합니다.
- pointer-events : pointer-events 속성은 특정 그래픽 요소가 포인터 이벤트의
발생 위치를 설정합니다.
- position : position 속성은 HTMl 요소가 위치하는 방식을 설정하는 속성입니다.
- quotes : quotes 속성은 추가된 따옴표를 브라우저에서 렌더링하는 방법을 설정합니다 .
- resize : resize속석은 요소의 크기 조정 여부와 방향을 설정합니다.
- right : right 속성은 위치 요소의 오른쪽 속성을 설정합니다.
- shape-image-threshold : shape-image-threshold 속성은
이미지를 사용하여 요소에 적용된 CSS 모양을 추출하는 데 사용되는 알파 채널 임계값을 정의합니다.
- shape-margin : shape-margin 속성은 shape-outside 속성을 사용하여 요소에
적용된 모양에 여백을 추가하는 데 사용됩니다.
- shape-outside : shape-outside 속성은 float 요소의 float 영역의 기하학을
변경하는 데 사용됩니다.
- tab-size : tab-size 속성은 페이지에 표시되는 탭 문자(U 0009)의 너비를 결정하는 데
사용됩니다.
- table-layout : 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-line 속성은
텍스트 위, 텍스트 아래 또는 텍스트 위에 선 형태로 장식을 추가하거나 기존 장식을 제거하는 데 사용됩니다.
- text-decoration-style : text-decoration-style 속성은
text-decoration-line이 있는 요소에 설정된 선(밑줄, 윗줄 및 선 통과)의 스타일을 지정합니다.
- text-indent : text-indent 속성은 텍스트의 첫 번째 줄이 블록 수준 컨테이너 내부에
있어야 하는 수평 공간의 양을 지정합니다.
- text-justify : text-justify 속성은 text-align: justify를 사용할 때
단어 사이의 간격을 정의할 수 있습니다.
- text-orientation : text-orientation 속성은 콘텐츠 줄 내에서 문자의
방향을 설정합니다.
- text-overflow : text-overflow 속성은 블록 컨테이너를 오버플로하는 인라인
텍스트를 처리하는 방법을 결정합니다.
- text-shadow : text-shadow 속성은 텍스트에 그림자를 추가하는 데 사용됩니다.
- text-transform : text-transform 속성은 단어 또는 개별 문자가 대문자로
표시되는 방식을 지정합니다.
- top : top 속성은 위치 요소의 위쪽 속성을 설정합니다.
- touch-action : touch-action 속성은 사용자가 브라우저의 기본 기능을 사용하여 터치
입력을 통해 화면의 요소와 상호 작용할 수 있는지 여부와 방법을 결정합니다.
- transform : transform 속성을 사용하여 HTML 요소의 모양, 크기, 위치 등을 자유롭게 바꿀
수 있습니다.
- transform-origin : transform-origin 속성은 요소의 변형 원점 위치를
변경하는 데 사용됩니다.
- transform-style : transform-style 속성은 요소의 자식이 3차원 공간에
배치되는지 또는 요소의 2차원 평면에서 병합되는지 여부를 결정합니다.
- transition : transition 속성을 사용하여 정해진 시간 동안 요소의 속성값을 부드럽게
변화시킬 수 있습니다.
- transition-delay : transition-delay 속성은 전환 효과가 애니메이션되기
전에 대기할 시간을 지정하는 데 사용됩니다.
- transition-duration : transition-duration 속성은 전환
애니메이션이 소요되는 시간을 지정하는 데 사용됩니다.
- transition-property : transition-property 속성은 전환을
적용하려는 속성의 이름을 지정하는 데 사용됩니다.
- transition-timing-function :
transition-timing-function 속성은 한 값에서 다른 값으로 전환되는 객체의 시간 경과에 따른 속도를 정의하는 타이밍 함수를 지정하는 데 사용됩니다.
- unicode-bidi : unicode-bidi 속성은 방향 속성과 함께 사용되어 문서에서
양방향(Bidi) 텍스트가 처리되는 방식을 지정합니다.
- vertical-align : vertical-align 속성은 라인 박스 내에서 나란히 위치한
인라인 레벨 요소를 정렬하는 데 사용됩니다.
- visibility : visibility 속성은 요소가 숨겨지도록 요소 상자의 렌더링을 제어하는 데 사용할
수 있습니다.
- white-space :white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.
- windows : widows 속성은 페이지나 열의 맨 위에 남거나 남겨야 하는 단락의 최소 줄 수를 지정하는 데
사용되며 나머지 줄은 이전 페이지 또는 이전 열로 넘어갑니다.
- width : width 속성은 가로 길이를 설정하는 속성입니다.
- will-change : will-change 속성을 사용하면 브라우저가 요소를 미리 처리하는 방법을
최적화할 수 있도록 요소에 대해 어떤 종류의 변경을 수행할지 미리 브라우저에 알릴 수 있습니다.
- word-break : word-break 속성은 단어 중간에 줄 바꿈 여부와 방법을 결정합니다.
- word-spacing : word-spacing 속성은 개별 단어 사이의 간격을 지정합니다.
- word-wrap : word-wrap 속성은 너무 길어서 컨테이너가 넘칠 수 있고 기본적으로 깨지지 않는
단어 내에서 줄이 끊어질 수 있는지 여부를 지정하는 데 사용됩니다.
- writing-mode : write-mode 속성을 사용하면 웹 페이지에서 콘텐츠가 흐르는 방향을
결정할 수 있습니다.
- z-index : position 속성을 이용하면 요소를 겹치게 놓을 수 있습니다. 이때 요소들의 수직 위치를
z-index 속성으로 정합니다.