CSS 속성 소개

accent-color 속성은 브라우저가 기본 스타일을 제공하는 체크박스, 라디오 버튼, 슬라이더, 프로그레스 바 등의 사용자 인터페이스 요소에 적용되어 있는 강조 색상을 변경하는 데 사용됩니다.

appearance 속성은 각 브라우저에서 제공하는 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제어하는 데 사용됩니다. 특히, appearance: none을 사용하면 기본 모양이 제거되어 CSS로 자유롭게 스타일을 적용할 수 있습니다.

aspect-ratio 속성은 이미지나 비디오 동영상, div 등 요소의 원하는 가로 세로 비율을 설정합니다. aspect-ratio 속성 사용법과 작동하지 않는 사례, 그리고 주의할 점에 대해 살펴보겠습니다.

background 속성은 요소의 배경 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다. 이 속성으로 색상, 이미지, 이미지의 영역과 위치 및 반복 여부 등과 같은 배경 스타일을 한 번에 지정할 수 있습니다.

background-color 속성은 요소의 배경색을 지정합니다. 배경 이미지가 설정되어 있을 경우, 그 뒤에 배경색이 렌더링됩니다. 다양한 방법으로 색상 값을 지정할 수 있으며, 투명도(알파 채널)가 있는 색상 값도 사용할 수 있습니다.

background-image 속성은 요소의 배경 이미지를 지정합니다. 배경 이미지는 한 개 또는 여러 개를 겹쳐서 사용할 수 있으며, 이미지 파일이나 그라디언트를 배경 이미지로 사용할 수 있습니다.

background-repeat 속성은 요소에 적용한 배경 이미지의 반복 방식을 지정합니다. 배경 이미지를 가로나 세로 축을 따라 반복하거나 전혀 반복되지 않도록 하거나, 다양한 방식으로 지정할 수 있습니다.

background-position 속성은 요소에 적용한 배경 이미지가 어디서부터 시작될지 위치를 지정합니다. 기본적으로 배경 이미지는 배경 영역의 왼쪽 상단 위치에서 시작합니다. 이 속성으로 배경 이미지를 원하는 위치에 조정할 수 있습니다.

background-size 속성은 요소에 적용한 배경 이미지의 크기를 지정합니다. 이 속성으로 배경 이미지를 원하는 크기로 조정할 수 있습니다.

background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. scroll, fixed, local 중 하나의 값을 선택할 수 있습니다.

background-clip 속성은 요소의 배경(색상이나 이미지)이 어느 부분까지 차지(클리핑, clipping)할 지를 설정합니다. 'border-box', 'padding-box', 'content-box', 'text' 중 하나를 선택하여 배경이 차지할 영역으로 지정합니다.

background-origin 속성은 요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다. 이 속성은 세 가지 옵션으로 'padding-box', 'border-box', 'content-box' 중 하나를 선택하여 배경 이미지 포지셔닝의 기준 영역으로 지정합니다.

border-radius 속성은 요소 테두리의 모서리를 둥글게 만드는 속성입니다. 각 모서리에 접하는 가상의 원형 또는 타원형의 반지름의 크기로 둥굴기를 조절하여, 마치 종이 모서리를 둥글게 자른 것처럼 디자인할 수 있습니다.

box-shadow 속성은 요소 박스에 그림자 효과를 적용하는 속성입니다. 이 속성의 특징 및 구현 방법, 특히 여러 개를 사용하는 방법에 대해 다루겠습니다. 그리고, 다양한 예제를 통해 box-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다.

box-sizing 속성은 요소의 크기를 계산할 때 크기의 기준을 설정합니다. content-box(콘텐츠 영역)만 계산할지, border-box(콘텐츠, 패딩, 테두리 모두 포함)를 기준으로 계산할지를 지정합니다.

caret-color 속성은 텍스트 입력 시 나타나는 텍스트 캐럿(입력 커서)의 색상을 지정하는 CSS 속성입니다. 텍스트 입력 필드나 에디터 등에서 텍스트를 입력할 때 보이는 커서의 색상을 지정하는 데 사용됩니다.

color 속성은 글자(폰트)의 색상, 즉 전경색을 지정합니다. 다양한 방법으로 색상 값을 지정할 수 있으며, 투명도(알파 채널)가 있는 색상 값도 사용할 수 있습니다.

content 속성은 해당하는 CSS 가상 요소 선택자( ::before, ::after, ::marker)로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다. 이러한 가상 요소 선택자로 생성하는 콘텐츠는 CSS 속성을 추가하여 스타일링할 수 있습니다.

cursor 속성은 마우스 포인터가 요소 위에 있을 때 표시될 커서 모양을 지정합니다. 이 속성으로 사용할 수 있는 CSS 표준 커서의 종류와 커서를 원하는 이미지로 지정하는 방법, 그리고 그 과정에서 주의할 점에 대해 알아보겠습니다.

font 속성은 다양한 글꼴 관련 속성을 단축형으로 한 번에 지정할 수 있습니다. 또한, 단일 키워드로 시스템 글꼴을 지정할 수 있습니다.

font-style 속성은 글꼴의 기울임 스타일을 'normal'(일반), 'italic'(이탤릭체), 또는 단순히 기울인 'oblique'(사선 모양) 중 하나로 지정합니다.

font-weight 속성은 글꼴의 굵기를 지정합니다. 이 속성의 값으로 글꼴의 굵기를 얼마가 가늘거나 굵게 할지를 섬세하게 설정할 수 있습니다.

font-size 속성은 글자(폰트)의 크기를 지정합니다. 이 속성의 값은 절댓값을 사용해 고정된 크기로 지정하거나, 상댓값를 사용해 부모 요소나 문서의 글자 크기를 기준 등으로 상대적인 비율 크기를 설정할 수 있습니다.

line-height 속성은 텍스트의 라인 높이(line height)를 설정합니다. 이 속성으로 텍스트의 행을 이루는 라인 박스의 위아래 가운데를 기준으로 높이를 조절할 수 있습니다.

font-family 속성은 요소의 글꼴을 지정합니다. 왼쪽에서 오른쪽 순서로 적용할 '글꼴 이름'이나 '글꼴 종류'를 쉼표로 구분하여 여러 개를 목록으로 나열할 수 있으며, 브라우저는 사용할 수 있는 첫 번째 글꼴을 선택해서 화면에 표시합니다.

font-variant 속성은 글꼴의 변형 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다. 이 속성을 사용하면 텍스트의 대문자 스타일, 숫자 형식, 그리고 기타 글꼴 변형 스타일을 효율적으로 제어할 수 있습니다.

font-variant-caps 속성은 요소의 텍스트를 소문자 대문자, 작은 대문자 또는 제목에 사용되는 변형된 대문자 등 다양한 대문자 변형 스타일로 지정합니다.

font-variant-numeric 속성은 숫자 형식(숫자, 분수, 순서형 마커 등)에 대해 글꼴 변형 스타일을 지정합니다. 이 속성을 사용하면 숫자 형식과 관련된 스타일과 가독성을 개선하거나 텍스트와 숫자가 어우러지는 방식을 세밀하게 제어할 수 있습니다.

font-kerning 속성은 글꼴 내에 저장된 커닝(kerning) 정보를 사용할지 여부를 지정하는 속성입니다. 커닝이란 인접한 문자 사이의 간격을 조정하여 시각적으로 더 조화롭고 매끄롭게 보이게 하는 것을 말합니다.

height 속성은 요소의 높이, 즉 세로 크기를 지정합니다. 이 크기의 기준은 콘텐츠 영역의 높이이지만, box-sizing이 border-box로 설정되어 있다면 테두리 영역까지의 높이가 기준이 됩니다.

min-height 속성은 요소의 최소 높이, 즉 최소한의 세로 크기를 지정합니다. 요소의 콘텐츠나 스타일에 의해 높이가 작아지더라도, 최소 높이인 min-height 값 미만으로는 줄어들지 않도록 제한할 수 있습니다.

max-height 속성은 요소의 최대 높이, 즉 최대한의 세로 크기를 지정합니다. 요소의 콘텐츠나 스타일에 의해 높이가 커지더라도, 최대 높이인 max-height 값을 초과하여 커지지 않도록 제한할 수 있습니다.

letter-spacing 속성은 텍스트의 문자와 문자 사이 간격(일반적으로 '자간'이라고 함)을 지정하는 속성입니다. 이 속성을 사용하면 문자와 문자 사이의 간격을 퍼지게 하거나 더 가깝게 설정할 수 있습니다.

object-fit 속성은 이미지나 비디오 등의 대체 요소의 콘텐츠가 사용된 높이와 너비에 따라 설정된 컨테이너인 부모 요소에 어떻게 맞춰져야 하는지를 지정합니다.

object-position 속성은 이미지나 비디오 등의 대체 요소의 콘텐츠가 어떻게 배치할지 위치를 지정합니다. 주로 img나 video 등의 요소에 object-fit 속성과 조합하여 사용됩니다.

pointer-events 속성은 요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성입니다. 이 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다.

text-align 속성은 블록 컨테이너와 테이블 셀 요소 내부의 인라인 콘텐츠의 가로 정렬을 설정하는 속성입니다. 이러한 특징을 이용하면 텍스트의 가로 정렬을 쉽게 설정할 수 있습니다.

text-decoration 속성은 텍스트에 사용되는 선 장식을 설정합니다. 이 속성은 text-decoration-line, text-decoration-color, text-decoration-style 및 text-decoration-thickness의 단축 속성(shorthand property)입니다.

text-decoration-color 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 색상을 설정합니다. text-decoration-color 속성의 사용 방법에 대해 알아봅니다.

text-decoration-line 속성은 텍스트에 사용되는 선 장식의 종류를 설정합니다. text-decoration-line 속성의 사용 방법에 대해 알아봅니다.

text-decoration-style 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 스타일을 설정합니다. text-decoration-style 속성의 사용 방법에 대해 알아봅니다.

text-decoration-thickness 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 두께(굵기)를 설정합니다. text-decoration-thickness 속성의 사용 방법에 대해 알아봅니다.

text-decoration underline의 위치 간격을 설정하는 속성은 text-underline-position과 text-underline-offset 속성이 있습니다. text-underline-position 속성은 underline의 위치를 설정하고, text-underline-offset 속성은 underline의 간격 띄우기(오프셋, offset)를 설정합니다.

text-underline-offset 속성은 text-decoration underline 간격 조정을 지정할 수 있는 속성입니다. text-underline-offset 속성으로 text-decoration underline의 간격 띄우기(오프셋, offset)를 설정할 수 있습니다.

text-underline-position 속성은 text-decoration underline 간격 조정을 지정할 수 있는 속성입니다. text-underline-position 속성으로 text-decoration underline의 위치를 설정할 수 있습니다.

text-emphasis 속성은 요소의 텍스트에 강조 표시를 설정합니다. 이 속성은 text-emphasis-style, text-emphasis-color의 단축 속성성(shorthand property)입니다. text-emphasis 속성의 사용 방법에 대해 알아봅니다.

text-emphasis-color 속성은 text-emphasis-style로 지정된 요소의 텍스트 강조 표시의 색상을 설정합니다. text-emphasis-color 속성의 사용 방법에 대해 알아봅니다.

text-emphasis-position 속성은 text-emphasis-style로 지정된 요소의 텍스트 강조 표시의 위치을 설정합니다. text-emphasis-position 속성의 사용 방법에 대해 알아봅니다.

text-emphasis-style 속성은 요소의 텍스트에 강조 표시 스타일을 설정합니다. 강조할 글자 위에 점 등의 모양을 설정할 수 있습니다. text-emphasis-style 속성으로 설정할 수 있는 텍스트 강조 표시 스타일과 사용법에 대해 알아봅니다.

text-overflow 속성은 한 줄로 된 텍스트가 요소의 영역 밖으로 오버플로우 되어 숨겨진 텍스트라는 신호로 말줌임(...)을 표시할지 설정합니다. text-overflow 속성은 텍스트의 한 줄 말줄임(...)을 CSS로 표시하는데 매우 유용합니다.

text-shadow 속성은 텍스트 문자에 그림자 효과를 적용하는 속성입니다. 이 속성의 특징 및 구현 방법, 특히 여러 개를 사용하는 방법에 대해 다루겠습니다. 그리고, 다양한 예제를 통해 text-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다.

text-size-adjust 속성은 모바일 디바이스에서 텍스트의 크기가 자동으로 조정되는 것을 제어합니다. 이 속성은 주로 모바일 브라우저에서 사용됩니다. 데스크톱 브라우저에서는 무시될 수 있습니다.

text-transform 속성은 스타일링 목적으로 요소의 텍스트를 대소문자로 변환하는 방법을 지정합니다. 이 속성을 사용하면 텍스트를 모두 대문자 또는 모두 소문자로 표시하거나 각 단어첫 글자를 대문자로 변환하여 스타일링할 수 있습니다.

user-select 속성은 사용자가 요소의 텍스트를 '선택'할 수 있는 방법을 지정합니다. 사용자가 마우스로 드래그해서 텍스트를 복사하거나 강조 표시하는 등의 '선택' 동작의 상호 작용을 제어할 수 있습니다.

vertical-align 속성은 인라인 레벨 요소와 테이블 셀 요소 내부의 수직 정렬을 지정하는 속성입니다. 해당 요소가 부모 요소의 기준선에 상대적으로 어떻게 수직 정렬되는지를 설정합니다. 이 속성은 블록 레벨 요소에 직접적으로 적용되지 않습니다.

white-space 속성은 두 가지 측면을 지정합니다. 첫째, 요소 내부의 공백 문자(whitespace) 처리와 둘째, 줄바꿈 규칙을 지정합니다. 이 속성을 사용하여 텍스트의 연속된 공백 문자, 줄바꿈 문자 등을 어떻게 다룰지를 설정할 수 있습니다.

width 속성은 요소의 너비, 즉 가로 크기를 지정합니다. 이 크기의 기준은 콘텐츠 영역의 너비이지만, box-sizing이 border-box로 설정되어 있다면 테두리 영역까지의 너비가 기준이 됩니다.

min-width 속성은 요소의 최소 너비, 즉 최소한의 가로 크기를 지정합니다. 요소의 콘텐츠나 스타일에 의해 너비가 작아지더라도, 최소 너비인 min-width 값 미만으로는 줄어들지 않도록 제한할 수 있습니다.

max-width 속성은 요소의 최대 너비, 즉 최대한의 가로 크기를 지정합니다. 요소의 콘텐츠나 스타일에 의해 너비가 커지더라도, 최대 너비인 max-width 값을 초과하여 커지지 않도록 제한할 수 있습니다.

will-change 속성은 CSS에서 요소의 속성이 변경될 것임을 브라우저에 미리 알리는 역할을 합니다. 이를 통해 브라우저는 요소의 속성이 변경될 때 최적의 성능을 발휘할 수 있습니다.

word-break 속성은 텍스트가 텍스트 박스의 끝에 도달했을 때 해당 텍스트의 단어(word)를 어떻게 줄바꿈할지(break) 지정합니다. 이 속성은 텍스트의 가독성을 향상시키기 위해 매우 중요한 역할을 합니다.

word-spacing 속성은 특정 요소 안에 있는 텍스트의 단어와 단어 사이 공백 간격이나 인라인 요소와 인라인 요소 사이의 공백 간격을 조절하는 속성입니다. 양수 값이면 간격이 넓어지고, 음수 값이면 간격이 좁아집니다.

writing-mode 속성은 텍스트 줄을 가로 또는 세로로 배치할지 여부와 블록 컨테이너의 흐름이 되는 방향을 지정합니다. writing-mode 속성을 사용하면 일반적인 가로로 표시하는 텍스트를 세로로 표시하는 모드로 변경할 수 있습니다.

-webkit-line-clamp속성은 텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법으로, 텍스트 영역의 줄바꿈하는 텍스트를 지정된 줄 수로 제한해서 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시하는 속성입니다.

-webkit-text-stroke 속성은 텍스트 문자에 테두리 외곽선(획)을 스타일하는 속성입니다. 속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다.

-webkit-text-stroke-color 속성은 텍스트 테두리 외곽선(획)의 색상을 설정하는 속성입니다. -webkit-text-stroke-color 속성의 사용 방법과 예제 등에 대해 알아봅니다.

-webkit-text-stroke-width 속성은 텍스트 테두리 외곽선(획)의 두께(굵기)를 설정하는 속성입니다. -webkit-text-stroke-width 속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다.