CSS 속성 소개

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

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

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

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 속성은 요소 경계 테두리의 너비(border-width), 스타일(border-style), 색상(border-color)을 한 번에 설정할 수 있는 단축 속성(shorthand property)입니다.

border-width 속성은 요소 경계 테두리의 두께, 즉 너비를 지정합니다. 이 속성은 요소의 네 경계면(위, 아래, 왼쪽, 오른쪽) 테두리 두께를 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

border-style 속성은 요소의 네 경계면에 테두리가 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.

border-color 속성은 요소 경계 테두리의 색상을 지정합니다. 이 속성은 요소의 네 경계면(위, 아래, 왼쪽, 오른쪽) 테두리 색상을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

border-collapse 속성은 테이블(table, 표) 셀 간의 테두리(border)를 하나로 합쳐 표시할지(collapse), 아니면 각 셀이 개별적으로 테두리를 유지하도록 분리해서 표시할지(separate)를 지정합니다.

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

border-spacing 속성은 테이블(table, 표)에서 인접한 셀과 셀 사이 간격을 지정합니다. 이 속성은 테이블의 border-collapse 속성이 separate로 설정되어 있을 때만 적용됩니다.

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

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

caption-side 속성은 테이블 캡션(설명 또는 제목)의 위치를 지정합니다. 이 속성을 사용하여 <caption> 요소로 표시되는 캡션을 테이블을 기준으로 위쪽 또는 아래쪽에 배치할 수 있습니다.

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

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

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

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

direction 속성은 텍스트를 포함한 인라인 콘텐츠의 진행 방향을 설정하며, ltr(왼쪽 → 오른쪽) 또는 rtl(오른쪽 → 왼쪽)로 지정할 수 있습니다.

display 속성은 요소의 디스플레이(표시) 방식 유형을 정의합니다. 이 속성으로 요소가 외부 레이아웃에 따라 디스플레이되는 방식이나, 요소 상자 자체와 내부의 레이아웃의 디스플레이 방식을 지정할 수 있습니다.

display 속성이 none 값으로 설정된 요소는 화면에 해당 요소와 그 영역이 표시되지 않으며, 요소 안의 콘텐츠도 존재하지 않는 것처럼 렌더링됩니다.

display 속성이 contents 값으로 설정된 요소는 요소 상자의 컨테이너 자체는 표시하지 않지만 그 안의 콘텐츠는 그대로 렌더링됩니다.

display 속성이 block 값으로 설정된 요소는 일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 컨테이너를 생성합니다.

display 속성이 inline 값으로 설정된 요소는 일반적인 문서 흐름에서 요소의 앞뒤를 줄바꿈 시키는 특징이 없는 인라인 레벨 컨테이너를 생성합니다.

display 속성이 inline-block 값으로 설정된 요소는 일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키는 특징이 없고, 컨테이너 영역을 정의할 수 있는 인라인 레벨의 블록의 컨테이너를 생성합니다.

display 속성이 flex 값으로 설정된 요소는 일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 플렉스 컨테이너를 생성합니다.

display 속성이 grid 값으로 설정된 요소는 일반적인 문서 흐름에서 요소의 앞과 뒤를 줄바꿈 시키고, 컨테이너 영역을 정의할 수 있는 블록 레벨의 그리드 컨테이너를 생성합니다.

empty-cells 속성은 테이블(table, 표)에서 보이는 콘텐츠(visible content)가 없는 셀 주위의 테두리(border)와 배경(background)을 표시할지 여부를 설정합니다.

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

line-break 속성은 요소 안의 텍스트에서 줄바꿈 규칙을 얼마나 엄격하게 적용할지를 지정합니다. 특히 자동 줄바꿈(soft wrapping) 시, 가독성을 높이기 위해 구두점이나 기호 다음에서 줄을 바꿀 수 있도록 얼마나 허용할지를 조절합니다.

list-style 속성은 리스트 마커 관련 속성을 한 번에 지정하는 단축 속성(shorthand property)입니다. list-style-type, list-style-image, list-style-position을 한 번에 지정할 수 있습니다.

list-style-type 속성은 리스트 마커(글머리 기호)로 사용할 문자 유형을 지정합니다. 브라우저에서 기본적으로 제공하는 문자 유형을 사용하거나, 원하는 특정 문자 유형을 적용할 수 있습니다.

list-style-image 속성은 리스트 마커(글머리 기호)로 사용할 이미지를 지정합니다. 이미지는 파일이나 그라디언트를 사용할 수 있습니다.

list-style-position 속성은 리스트 마커(글머리 기호)를 리스트 아이템의 안쪽 또는 바깥쪽에 배치할지를 지정합니다.

margin 속성은 요소의 네 측면(위, 아래, 왼쪽, 오른쪽) 경계(border)와 바깥쪽 사이에 있는 여백 간격을 지정합니다. 이 속성을 사용하면 요소의 네 측면 경계와 바깥쪽의 빈 공간을 한 번에 설정할 수 있습니다.

margin-top 속성은 요소 위쪽 경계(border)와 바깥쪽 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 위쪽 경계와 바깥쪽의 빈 공간 높이를 설정할 수 있습니다.

margin-bottom 속성은 요소 아래쪽 경계(border)와 바깥쪽 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 아래쪽 경계와 바깥쪽의 빈 공간 높이를 설정할 수 있습니다.

margin-left 속성은 요소 왼쪽 경계(border)와 바깥쪽 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 왼쪽 경계와 바깥쪽의 빈 공간 너비를 설정할 수 있습니다.

margin-right 속성은 요소 오른쪽 경계(border)와 바깥쪽 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 오른쪽 경계와 바깥쪽의 빈 공간 너비를 설정할 수 있습니다.

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

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

opacity 속성은 요소에 적용할 불투명도를 지정합니다. 불투명도는 특정 색상이 아니라 요소 전체와 내용(content, 텍스트나 모든 하위 요소)에 적용되며, 투명도의 반대 개념입니다.

outline 속성은 요소의 경계 바깥쪽에 있는 외곽선의 너비(outline-width), 스타일(outline-style), 색상(outline-color)을 한 번에 설정할 수 있는 단축 속성(shorthand property)입니다.

outline-width 속성은 요소 outline(외곽선)의 두께, 즉 너비를 지정합니다. 이 속성은 요소의 네 면(위, 아래, 왼쪽, 오른쪽)에 있는 outline(외곽선) 두께를 동일하게 설정합니다.

outline-style 속성은 요소의 경계(border) 바깥쪽에 있는 outline(외곽선)이 나타나는지 여부와, 나타나는 경우 어떤 스타일로 그려지는지를 지정합니다.

outline-color 속성은 요소 outline(외곽선)의 색상을 지정합니다. 이 속성은 요소의 네 면(위, 아래, 왼쪽, 오른쪽)에 있는 outline(외곽선) 색상을 동일하게 설정합니다.

outline-offset 속성은 요소의 outline(외곽선)이 요소의 경계(border)로부터 떨어진 거리, 즉 간격을 지정합니다. 양수 값을 사용하면 outline을 경계의 바깥쪽으로, 음수 값을 사용하면 경계의 안쪽으로 이동시킬 수 있습니다.

overflow 속성은 요소의 내용(content)이 커서 요소의 크기를 넘어설 때 발생하는 넘치는 내용에 대해 어떤 방식으로 처리될 것인지를 지정합니다.

overflow-x 속성은 요소의 내용(content)이 커서 요소의 너비를 넘어설 때 발생하는 넘치는 내용에 대해 요소의 수평 방향이 어떤 방식으로 처리될 것인지를 지정합니다.

overflow-y 속성은 요소의 내용(content)이 커서 요소의 높이를 넘어설 때 발생하는 넘치는 내용에 대해 요소의 수직 방향이 어떤 방식으로 처리될 것인지를 지정합니다.

overflow-wrap 속성은 음절 단위에서 줄바꿈하지 않는 텍스트가 너무 길어 텍스트 라인의 끝에서 줄바꿈이 불가능할 때(오버플로할 때), 브라우저가 줄바꿈을 허용하지 않는 지점에서도 줄바꿈을 허용할 수 있는 지점을 지정합니다.

padding 속성은 요소의 경계(border)와 내용(content) 사이에 있는 네 측면(위, 아래, 왼쪽, 오른쪽)의 여백 간격을 지정해서 디자인 레이아웃을 구성하는 데 사용됩니다.

padding-top 속성은 요소 위쪽 경계(border)와 내용(content) 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 위쪽 경계와 내용 사이의 빈 공간 높이를 설정할 수 있습니다.

padding-bottom 속성은 요소 아래쪽 경계(border)와 내용(content) 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 아래쪽 경계와 내용 사이의 빈 공간 높이를 설정할 수 있습니다.

padding-left 속성은 요소 왼쪽 경계(border)와 내용(content) 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 왼쪽 경계와 내용 사이의 빈 공간 너비를 설정할 수 있습니다.

padding-right 속성은 요소 오른쪽 경계(border)와 내용(content) 사이의 여백 간격을 지정합니다. 이 속성을 사용하면 요소 오른쪽 경계와 내용 사이의 빈 공간 너비를 설정할 수 있습니다.

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

position 속성은 요소의 위치 지정 방식을 설정합니다. 이 속성은 static, relative, absolute, fixed, sticky 값 중 하나를 선택해 설정할 수 있으며, 선택한 값에 따라 요소의 위치 지정 방식이 달라집니다.

position 속성의 static 값은 초깃값입니다. 요소가 다른 요소와의 관계에 따라 일반적인 문서 흐름(normal flow)에 따라 배치됩니다.

position 속성의 relative 값은 요소가 문서의 일반적인 흐름에 따라 배치되는 자체 영역을 기준으로 하는 상대적인 간격을 top, bottom, left, right 속성의 값으로 적용하는 위치 지정 방식입니다.

position 속성의 absolute 값은 요소가 가장 가까운 위치 지정 조상 요소인 컨테이닝 블록(containing block)을 기준으로 하는 절대 위치를 top, bottom, left, right 속성의 값으로 적용하는 위치 지정 방식입니다.

position 속성의 fixed 값은 일반적으로 뷰포트(viewport)를 기준으로 top, bottom, left, right 속성을 사용해 요소의 고정 위치를 지정하는 방식입니다.

position 속성의 sticky 값은 요소가 가장 가까운 스크롤 가능한 조상 요소의 스크롤 시 보여지는 영역을 기준으로, 지정된 위치에 달라붙듯이(sticky) 고정되도록 하는 위치 지정 방식입니다.

ruby-align 속성은 루비 주석(ruby annotation) 콘텐츠가 기준 문자(ruby base)의 루비 박스(ruby box) 내에서 어떻게 정렬될지를 지정합니다.

ruby-position 속성은 루비 주석(ruby annotations)을 기준 문자(ruby base)의 어느 위치에 배치할지를 지정합니다.

scrollbar-width 속성을 사용하면 스크롤바의 두께를 굵거나 가늘게 지정할 수 있습니다. 또한, 스크롤은 가능하지만 스크롤바를 표시하지 않게도 할 수 있습니다.

scrollbar-color 속성을 사용하면 스크롤바의 thumb과 track의 색상을 지정할 수 있습니다.

table-layout 속성은 테이블(table)의 셀·행·열의 너비를 어떻게 구현할지에 대한 브라우저의 레이아웃 방식을 선택하는 속성입니다. '자동 방식'이나 '고정 방식' 중 하나를 선택할 수 있습니다.

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-decoration-skip-ink 속성은 text-decoration-line으로 설정된 윗줄이나 밑줄이 글자와 겹칠 경우 겹치는 부위의 선 일부를 생략할지 아니면 그대로 그을지를 지정합니다.

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-indent 속성은 텍스트 첫 줄의 들여쓰기 간격을 설정합니다. 양수 값은 안쪽으로 들여쓰기가 되고, 음수 값은 텍스트의 첫 줄을 바깥쪽으로 내어쓸 수 있습니다.

text-orientation 속성은 세로 쓰기 모드에서 텍스트 문자 방향을 설정합니다. 세로 쓰기 모드에서만 작동하며, 가로 쓰기 모드에는 영향을 주지 않습니다.

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

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

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

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

unicode-bidi 속성은 유니코드 양방향 알고리즘(Unicode Bidirectional Algorithm)에 대한 스타일 처리 방식을 재설정합니다.

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

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

visibility 속성은 요소의 렌더링 여부 즉, 요소를 숨기거나 보이게 하는 가시성을 지정합니다. 이 속성을 사용하면 페이지 레이아웃을 변경하지 않고 요소를 숨기거나 보이게 할 수 있습니다.

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 속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다.

z-index 속성은 요소들이 겹칠 때, 해당 요소가 다른 요소 위나 아래에 놓일 쌓임 맥락(Stacking context)의 우선순서를 지정합니다.