charAt()를 이용하여 알파벳 별로 검색하기
a
b
c
d
e
f
e
g
h
전체 속성 개수 : 0개
- all: all 속성은 CSS 속성을 재설정하는데 사용하는 약식 속성이다
- animation: animation 속성은 애니메이션 속성을 설정하기 위한 약식 속성이다
- animation-delay: animation 속성은 애니메이션이 시작되는 시간을 설정한다
- animation-direction: 애니메이션이 움직이는 방향을 설정한다
- animation-duration:
애니메이션이 움직이는 시간을 설정한다
- animation-fill-mode: a애니메이션이 실행 중인 시간 외에 적용되는
값을 정의한다
- animation-iteration-count:
애니메이션이 중지되기 전에 애니메이션의 주기가 재생되는 횟수를 지정하는 데 사용된다
- animation-name: 키프레임 규칙에 의해 정의된하나
이상의 애니메이션 이름을 지정하는 데 사용되며 선택한 요소에 적용된다
- animation-play-state: CSS 애니메이션이 실행 중인지 일시
중지되었는지 지정한다
- animation-timing-function: 애니메이션 효과(동작)의
시간당 속도를 설정한다
- appearance: 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다
- background: 텍스트 색상, 위치, 반복 여부, 위치 ,크기등을 설정한다
- background-attachment: 배경 이미지의 스크롤 여부를 설정한다
- backdrop-filter: CSS를 사용하여 요소 뒤의 콘텐츠에 필터 효과를 적용한다
- backface-visibility: 뷰어를 향할 때 변형된 요소의 뒷면이 보이는지
여부를 결정한다
- background-blend-mode: 요소들이 겹칠 경우 색상이 어떻게
나타나야 하는지를 설정한다
- background-clip: 요소의 배경이 테두리, 안쪽 여백, 콘텐츠 상자 중 어느
범위까지 크기가 확대될지를 설정한다
- background-color: 요소의 배경 색을 지정한다
- background-origin: 배경 이미지를 어느 범위부터 채워 나갈지를 설정한다
- background-position: 배경의 위치를 설정한다
- background-repeat: 배경 이미지의 반복 여부와 반복 방향을 설정한다
- background-size: 배경 이미지의 크기를 설정한다
- border: 요소의 테두리를 설정한다 width, style, color 순서로 값을 대입한다
- border-bottom: 요소의 아래쪽 테두리를 설정한다
- border-bottom-color: 요소의 아래쪽 테두리의 색상을 설정한다
- border-bottom-left-radius: 요소의 왼쪽 테두리의
경계를 둥근 모양으로 변경한다
- border-bottom-right-radius: 요소의 오른쪽 테두리의
경계를 둥근 모양으로 변경한다
- border-bottom-style: border-bottom 속성과 마찬가지로
요소의 아래쪽 테두리를 설정한다
- 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-rigth-radius :
속성은 윗부분 오른쪽 모서리 굴곡을 설정한다.
- border-top-style : 테두리 위쪽 스타일 속성을
설정한다
- border-top-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 : 콘텐츠 내용을 설정한다.
- counter-increment :
콘텐츠의 순서 상태를 설정한다.
- counter-reset : 콘텐츠의
숫자를 초기화한다
- cursor : 마우스 오버시 마우스 포인터를 설정한다.
- direction : 문장의 방향을 설정한다.
- display : display의 해당 요소를 어떻게 보여줄지를
지정할수있다
- empty-cells : 테이블의 빈요소의
속성을 설정한다.
- filter : 그래픽 효과를 설정한다.
- flex : 콘텐츠의 성질을 flex로 설정한다.
- flex-basis : 요소의 기본 단위를
설정한다.
- flex-direction :
요소의 정렬 방향을 설정한다.
- flex-flow : 요소의 정렬 방향
flex-direction와 줄 속성 flex-wrap을 같이 설정한다.
- flex-grow : 요소의 크기를 숫자를 통해
설정한다.
- flex-shrink : 요소의 크기를
숫자를 통해 줄여줍니다.
- flex-wrap : f 요소의 줄 속성을
설정한다.
- float : 블록요소의 정렬 상태를 설정한다.
- font : 폰트에 관한 설정을 설정한다.
- font-family : 폰트 종류를
설정한다.
- font-size : 폰트의 크기를 조절할수
있다
- font-size-adjust :
속성은 소문자를 기준으로 폰트 크기를 설정한다.
- font-stretch : 폰트의 굵기를
설정한다.
- font-style : 폰트의 스타일을
설정한다.
- font-variant : 글꼴의 변형을
설정한다.
- font-weight : 폰트의 가중치나
굵기를 명시할수있다.
- grid : flex와 달리 가로세로(2방향)설정이 가능한 2차원
레이아웃 설정
- grid-area : 영역(Area) 이름을
설정하거나, grid-row와 grid-column의 단축 속성
- grid-auto-columns :
암시적인 열(Track)의 크기를 정의
- grid-auto-flow :
자동 배치 알고리즘 방식을 정의
- grid-auto-rows :
암시적인 행(Track)의 크기를 정의
- grid-column :
grid-column-xxx의 단축 속성(열 시작/끝 위치)
- grid-column-end :
속성은 그리드 아이템의 열 끝 위치 지정
- grid-column-gap :
속성은 열과 열 사이의 간격(Line)을 정의
- grid-column-start :
그리드 아이템의 열 시작 위치 지정
- grid-gap : 행과 열 사이의 간격을
설정한다.
- grid-row : grid-row-xxx의 단축
속성(행 시작/끝 위치)
- grid-row-end : 그리드
아이템의 행 끝 위치 지정
- grid-row-gap : 행과 행
사이의 간격(Line)을 정의
- grid-row-start : grid-row-start 그리드
아이템(Item)의 행 시작 위치 지정
- grid-template :
grid-template-xxx의 단축 속성
- grid-template-areas :
영역(Area) 이름을 참조해 템플릿 생성
- grid-template-columns :
명시적 열(Track)의 크기를 정의한다
- grid-template-rows :
명시적 행(Track)의 크기를 설정한다
- hanging-punctuation :
글씨의 시작 및 끝의 위치 설정한다.
- height : 콘텐츠 요소의 세로값을 설정한다
- hyphens : 텍스트의 하이픈(-) 영역을 설정한다
- isolation : stacking
context을 설정한다.
- justify-content : 콘텐츠의 좌우 관계 정렬 상태를
설정한다.
- left : 위치 요소의 왼쪽 속성을 설정한다.
- letter-spacing :
글자 사이의 간격을 설정한다.
- line-height : 문장과 문장 사이의
간격을 설정한다.
- list-style : 목록 스타일 속성을
설정한다.
- list-style-image : 목록 마커의 이미지를
설정한다.
- list-style-position :
목록 마커의 위치 속성을 설정한다.
- list-style-type : 목록 마커의 유형을 설정한다.
- margin : 요소의 네 방향 바깥 여백 영역을 설정한다.
- margin-bottom : 요소의
아래쪽에 바깥 여백 영역을 설정한다.
- margin-left : 요소의 왼쪽에 바깥
여백 영역을 설정한다.
- margin-right : 요소의
오른쪽에 바깥 여백 영역을 설정한다.
- margin-top : 요소의 위쪽에 바깥 여백
영역을 설정한다.
- mask : 아이템이 부분적으로만 보여지게 하거나 혹은 완전히 가려서
보여지지 않게 할 수 있는 기능을 가지고 있다 이 속성은 마스킹 혹은 특정한 점을 기준으로 이미지를 잘라내는 기능을 함께 제공한다
- mask-border : 요소의 경계의
가장자리를 따라 마스크를 만들 수 있다
- mask-border-mode : 마스크 테두리에 사용되는
혼합(blending) 모드를 설정한다.
- mask-border-outset :
mask-border-outset 요소의 마스크 테두리가 테두리 상자에서 설정되는 거리를 설정한다.
- mask-border-repeat :
소스 이미지의 가장자리 영역이 요소의 마스크 테두리 크기에 맞게 조정되는 방식을 설정한다.
- mask-border-slice :
mask-border-source로 설정된 이미지를 영역으로 나눈다. 이 영역은 요소의 마스크 테두리 구성 요소를 형성하는 데
사용된다.
- mask-border-source :
요소의 마스크 테두리를 만드는 데 사용되는 소스 이미지를 설정한다.
- mask-border-width :
요소의 마스크 테두리 너비를 설정한다.
- mask-clip : 마스크의 영향을 받는 영역을
결정한다 요소의 칠해진 콘텐츠는 이 영역으로 제한되어야 한다
- mask-composite :
현재 마스크 레이어 아래에 마스크 레이어가 있는 합성 작업을 나타낸다
- mask-image : 요소를 url에 지정된
이미지 만큼만 보이게 처리한다
- mask-mode : mask-image에 의해
정의된 마스크 참조가 광도 또는 알파 마스크로 처리되는지 여부를 설정한다.
- mask-origin : 마스크의 원점을
설정한다.
- mask-position :
background-position처럼 마스크에 보일 요소위치를 설정한다.
- mask-repeat : 마스크 이미지가
반복되는 방식을 설정한다. 마스크 이미지는 가로축, 세로축, 양축을 따라 반복하거나, 반복하지 않을 수 있다
- mask-size :
background-size처럼 보일 요소의 크기를 설정한다.
- mask-type : SVG mask 요소를 밝기
또는 알파 마스크로 사용할지 여부를 설정한다. mask 요소 자체에 적용됩니다.
- max-height : 요소의 최대 세로값을
설정한다.
- max-width : 요소의 최대 가로 값을
설정한다.
- min-height : 요소의 최소 세로 값을
설정한다.
- min-width : 요소의 최소 가로 값을
설정한다.
- mix-blend-mode :
배경의 혼합 상태를 설정한다.
- object-fit : 대체되는 요소의
내용(<img>, <video>, <object>, <svg> 등과 같은)이 지정된 너비와 높이에 맞게 적용되는 방식을 지정한다.
- object-position :기본적으로 요소의 가운데로 화상을
이동시킨다. 이 위치를 원하는 값으로 변경한다.
- opacity : 요소의 투명도를 제어하는데 사용된다.
- orphans : 페이지, 영역 또는 열의 맨 아래에
표시되어야 하는 블록 컨테이너의 최소 줄 수를 설정한다.
- outline : 요소 주위에 윤곽선을 그리는 데
사용된다.
- outline-color : 요소의
윤곽선 색상을 설정하는 데 사용된다.
- outline-offset :
요소 윤곽선의 가장자리 또는 테두리 사이의 간격을 설정한다.
- outline-style : 요소의
윤곽선 스타일을 설정하는 데 사용된다.
- outline-width : 요소의
윤곽선 너비를 설정하는 데 사용된다.
- overflow : 요소의 경계를 넘은 콘텐츠를
표시할지 여부를 설정한다.
- overflow-x : 요소의 콘텐츠를
표시할지, 잘릴지(숨겨야 하는지) 또는 콘텐츠가 요소의 왼쪽 및 오른쪽 가장자리를 넘을 때 수평 스크롤 막대를 추가할지 여부를 지정하는 데 사용된다.
- overflow-y : 요소의 콘텐츠를
표시할지, 잘릴지(숨겨야 하는지) 또는 콘텐츠가 요소의 위쪽 및 아래쪽 가장자리를 넘을 때 세로 스크롤 막대를 추가할지 여부를 지정하는 데 사용된다.
- padding : 한 번에 요소의 네 면에 패딩
영역(내용(content)과 테두리(border) 사이의 간격)을 설정한다.
- padding-bottom :
요소의 아래쪽 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정
- padding-left : 요소의 왼쪽
패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정
- padding-right : 요소의
오른쪽 패딩 영역(내용(content)과 테두리(border) 사이의 간격)을 설정
- padding-top : 요소의 위쪽 패딩
영역(내용(content)과 테두리(border) 사이의 간격)을 설정
- page-break-after : 페이지 인쇄시 적용된 요소
뒤부터 페이지 분리에 관한 설정을 설정한다.
- page-break-before :
페이지 인쇄시 적용된 요소 앞부터 페이지 분리에 관한 설정을 설정한다.
- page-break-inside :
p 요소 내부에서 페이지 넘김을 설정한다
- perspective : 3차원 공간을
활성화하여 해당 요소의 자식이 해당 공간에 배치될 수 있도록 하는 데 사용된다.
- perspective-origin :
뷰어가 3차원 공간을 바라보는 위치를 선택하는 데 사용된다.
- pointer-events :
특정 그래픽 요소가 포인터 이벤트의 대상이 될 수 있는 조건을 제어하는데 사용된다 .
- position : 페이지에서 요소의 위치를
설정하는 데 사용된다 .
- quotes : 속성을 사용하여 삽입할 때 사용할 따옴표를
지정하는 데 사용된다
- resize : 사용자가 요소의 크기를 조정할 수 있는지
여부와 가능한 경우 방향을 지정할 수 있다
- right :위치 지정 요소의 오른쪽 오프셋을 지정하는 데
사용되는 오프셋 속성입니다 .
- shape-image-threshold :
css모양 외부에 이미지를 사용할 때 모양을 추출하는 데 사용되는 알파 채널의 임계값을 설정하는 데 사용된다.
- shape-margin : css모양에
여백을 추가하는 데 사용된다.
- shape-outside :
float된 요소의 경계를 감싸는 방식을 제어하는 데 사용된다.
- tab-size : 속성은 페이지에 표시되는 탭 문자의
너비를 결정하는 데 사용된다.
- table-layout : 테이블 열,
행 및 셀의 레이아웃을 설정한다.
- text-align : 블록 요소 내부의 인라인
요소가 정렬되는 방식을 제어하는 데 사용된다.
- text-align-last : 강제 줄 바꿈 직전의 블록이나
줄의 마지막 줄을 정렬하는 방법을 설정하는 데 사용된다.
- text-decoration : 텍스트 위, 텍스트 아래 또는
텍스트 위에 선 형태로 장식을 추가하거나 기존 장식을 제거하는 데 사용된다
- text-decoration-color :
요소에 설정된 텍스트 장식(밑줄, 윗줄 및 선 통과)의 색상을 설정한다
- text-decoration-line :
글자 라인 스타일을 설정한다.
- text-decoration-style :
text-decoration-line이 있는 요소에 설정된 선(밑줄, 윗줄 및 선 통과)의 스타일을 설정한다.
- text-indent : 텍스트를 담고있는
블록 컨테이너에 적용되며 문단의 첫줄을 들여쓰기 할 때 사용한다
- text-justify : 텍스트의
간격을 설정한다.
- text-orientation :
콘텐츠 줄 내에서 문자의 방향을 설정한다.
- text-overflow : 박스
안에 내용이 넘칠 때 텍스트를 어떻게 처리할지 지정하는 속성입니다.
- text-rendering :
텍스트를 렌더링할 때 최적화할 항목을 선택할 수 있는 속성입니다.
- text-shadow :텍스트에 그림자를
추가할 때 설정한다.
- text-transform :
대문자로 또는 소문자로 바꾸는 속성입니다.
- top : 각 옵션 속성들의 부모 태그를 기준으로 수직으로 위치를
설정한다.
- touch-action : 어떤 요소
내에서 브라우저가 처리할 터치 액션의 목록을 설정한다.
- transform : 요소에 회전, 크기 조절,
기울이기, 이동 효과를 설정한다.
- transform-origin : transform 속성과 함께
사용되는 속성으로, 회전 중심(원점·기준점)을 설정한다.
- transform-style : 자식 요소를 3D 공간에
배치하거나 2D 평면에 평평하게 배치 할지 설정한다.
- transition : 특정 조건 하에서
변화하는 과정을 애니메이션으로 보여주고자 할 때 설정한다.
- transition-delay : 프로퍼티가 변화한 시점과
트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 설정한다.
- transition-duration : 애니메이션
소요 시간을 설정한다.
- transition-property :
transition의 적용 여부를 설정한다.
-
transition-timing-function : 요소의 움직임 기능을 설정한다.
- unicode-bidi : 글자의 방향
속성을 설정한다.
- vertical-align :
텍스트의 상하 정렬 방식을 설정한다.
- visibility : 요소를 보이지 않게
설정한다.
- white-space : 줄바꿈, 공백, 줄
속성을 설정한다.
- widows : 페이지, 영역 또는 열의 맨 위에
표시되어야 하는 블록 컨테이너의 최소 줄 수를 설정한다.
- width : 요소의 가로 값을 설정한다.
- will-change : 값이 변경될
속성에 대한 힌트를 미리 설정한다.
- word-break : 줄바꿈 속성을
설정한다.
- word-spacing : 단어 사이의
간격을 설정한다.
- word-wrap :줄바꿈을 설정한다.
- writing-mode : 텍스트의 방향(가로/세로)를 설정한다.
- z-index : 요소의 위치가 겹칠 경우 순서를
설정한다.