CSS 속성
요소에 색상을 입히는 속성
:: 담당하는 모듈은 다르지만 색상을 결정한다는 공통점을 가진 속성들을 정리했다. (MDN)
글씨와 관련된 색을 지정하는 속성들
Color (MDN)
:: 글씨와 글씨 장식의 색을 지정한다.
:: 접근성을 위해서 배경색과 텍스트 콘텐츠는 4.5:1, 제목 등 큰 텍스트는 3:1 이상의 색 대비율을 가져야한다.
bakcground-color (MDN)
:: 요소의 배경색을 지정한다.
:: <p>태그 등 내부에 텍스트 요소를 가지는 요소에서는 글씨의 배경색으로 사용된다.
text-shadow (MDN)
:: 글씨에 적용할 그림자 효과를 설정한다. 옵션 중에 그림자 색상과 관련된 옵션이 포함되어 있다.
text-decoration-color (MDN)
:: 글씨 장식(밑줄, 윗줄, 취소선 등)의 색은 기본적으로 Color의 설정값을 따라가지만, 이 속성으로 따로 설정할 수 있다.
text-emphasis-color (MDN)
:: 텍스트를 드래그해서 선택 및 강조했을 때 표시할 색을 지정한다.
caret-color (MDN)
:: <input>이나 <textarea>, HTML contenteditable 속성을 가진 요소에 나타나는 캐럿(=커서)의 색을 지정한다.
박스와 관련된 색을 지정하는 속성들
:: HTML의 모든 요소는 박스 모델로 표현되며, 배경과 테두리를 갖는다.
background-color (MDN)
:: 요소의 배경색을 지정한다.
:: 블럭 요소에 사용될 경우 박스의 배경색이 된다.
column-rule-color (MDN)
:: 다중 열 레이아웃에서 열 사이에 그려지는 선의 색상을 지정한다.
outline-color (MDN)
:: 요소 바깥 외곽선의 색상을 지정한다.
:: 외곽선은 전체 박스의 가장 바깥쪽에 그려지며 외곽선의 두께는 박스의 넓이에 포함되지 않는다.
border-color (MDN)
:: 박스 테두리의 색상을 일괄적으로 지정한다.
border-left-color (MDN), border-right-color (MDN), border-top-color (MDN), border-bottom-color (MDN)
:: 박스의 왼쪽, 오른쪽, 위쪽, 아래쪽 테두리 색을 지정한다.
border-block-start-color (MDN), border-block-end-color (MDN)
:: 박스의 논리적 시작 지점(일반적으로 top)과 끝 지점(일반적으로 bottom)의 테두리 색을 지정한다.
border-inline-start-color (MDN), border-inline-end-color (MDN)
:: 박스내 콘텐츠 요소의 시작 지점(일반적으로 left)과 끝 지점(일반적으로 right)의 테두리 색을 지정한다.