CSS(Cascading Style Sheets)는 웹 페이지의 스타일 및 레이아웃을 정의하는 데 사용되는 스타일 시트 언어입니다. 다양한 CSS 속성이 있으며, 이러한 속성을 사용하여 HTML 요소의 모양, 크기, 색상 등을 지정할 수 있습니다.
aspect-ratio 요소의 가로 세로 비율 설정 |
aspect-ratio 속성은 이미지나 비디오 동영상, div 등 요소의 원하는 가로 세로 비율을 설정합니다. aspect-ratio 속성 사용법과 작동하지 않는 사례, 그리고 주의할 점에 대해 살펴보겠습니다. |
---|---|
background-clip 요소의 배경이 어디까지 차지할 지 설정 |
background-clip 속성은 요소의 배경(색상이나 이미지)이 어느 부분까지 차지(클리핑, clipping)할 지를 설정합니다. 'border-box', 'padding-box', 'content-box', 'text' 중 하나를 선택하여 배경이 차지할 영역으로 지정합니다. |
background-origin 배경 이미지의 포지셔닝 기준 영역 설정 |
background-origin 속성은 요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다. 이 속성은 세 가지 옵션으로 'padding-box', 'border-box', 'content-box' 중 하나를 선택하여 배경 이미지 포지셔닝의 기준 영역으로 지정합니다. |
box-shadow 요소 박스에 그림자 효과 |
box-shadow 속성은 요소 박스에 그림자 효과를 적용하는 속성입니다. 이 속성의 특징 및 구현 방법, 특히 여러 개를 사용하는 방법에 대해 다루겠습니다. 그리고, 다양한 예제를 통해 box-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다. |
box-sizing 요소의 너비와 높이의 크기 계산의 기준 설정 |
box-sizing 속성은 블록 컨테이너 요소의 너비와 높이를 계산할 때, 콘텐츠 영역인 content-box만 고려할지, 콘텐츠 영역과 패딩, 그리고 테두리(border)를 모두 고려할지, 즉 border-box를 기준으로 할지를 지정합니다. |
caret-color 커서 색상 바꾸기 |
caret-color 속성은 텍스트 입력 시 나타나는 텍스트 캐럿(입력 커서)의 색상을 지정하는 CSS 속성입니다. 텍스트 입력 필드나 에디터 등에서 텍스트를 입력할 때 보이는 커서의 색상을 지정하는 데 사용됩니다. |
content 해당하는 가상 요소 선택자의 내부 콘텐츠 지정 |
content 속성은 해당하는 CSS 가상 요소 선택자( ::before, ::after, ::marker)로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다. 이러한 가상 요소 선택자로 생성하는 콘텐츠는 CSS 속성을 추가하여 스타일링할 수 있습니다. |
font-kerning 글꼴 내에 저장된 커닝 정보를 사용할지 지정 |
font-kerning 속성은 글꼴 내에 저장된 커닝(kerning) 정보를 사용할지 여부를 지정하는 속성입니다. 커닝이란 인접한 문자 사이의 간격을 조정하여 시각적으로 더 조화롭고 매끄롭게 보이게 하는 것을 말합니다. |
letter-spacing 텍스트의 문자와 문자 사이 간격 설정 |
letter-spacing 속성은 텍스트의 문자와 문자 사이 간격(일반적으로 '자간'이라고 함)을 지정하는 속성입니다. 이 속성을 사용하면 문자와 문자 사이의 간격을 퍼지게 하거나 더 가깝게 설정할 수 있습니다. |
line-height 텍스트 행간 높이 설정 |
line-height 속성은 텍스트 행의 높이를 설정합니다. 텍스트의 위/아래 가운데를 기준으로 위/아래로 길어지거나 짧아집니다. 이러한 특징을 이용하면 텍스트의 줄 간격, 즉 행간을 쉽게 조절할 수 있습니다. |
object-fit 이미지나 비디오 요소 콘텐츠 크기 맞추기 |
object-fit 속성은 이미지나 비디오 등의 대체 요소의 콘텐츠가 사용된 높이와 너비에 따라 설정된 컨테이너인 부모 요소에 어떻게 맞춰져야 하는지를 지정합니다. |
object-position 이미지나 비디오 요소 콘텐츠 위치 맞추기 |
object-position 속성은 이미지나 비디오 등의 대체 요소의 콘텐츠가 어떻게 배치할지 위치를 지정합니다. 주로 img나 video 등의 요소에 object-fit 속성과 조합하여 사용됩니다. |
pointer-events 포인터 이벤트 제어자 |
pointer-events 속성은 요소가 클릭, 호버, 드래그 등 포인터 이벤트에 대해 어떻게 반응하는지를 제어하는 속성입니다. 이 속성은 요소가 포인터 이벤트의 대상이 될 수 있는지 여부를 지정합니다. |
text-align 텍스트 등 인라인 콘텐츠 가로 정렬 설정 |
text-align 속성은 블록 컨테이너와 테이블 셀 요소 내부의 인라인 콘텐츠의 가로 정렬을 설정하는 속성입니다. 이러한 특징을 이용하면 텍스트의 가로 정렬을 쉽게 설정할 수 있습니다. |
text-decoration 텍스트에 사용되는 선 장식 단축 속성 |
text-decoration 속성은 텍스트에 사용되는 선 장식을 설정합니다. 이 속성은 text-decoration-line, text-decoration-color, text-decoration-style 및 최신 속성인 text-decoration-thickness의 단축 표현입니다. |
text-decoration-color text-decoration의 색상 설정 |
text-decoration-color 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 색상을 설정합니다. text-decoration-color 속성의 사용 방법에 대해 알아봅니다. |
text-decoration-line text-decoration의 선 장식 종류 설정 |
text-decoration-line 속성은 텍스트에 사용되는 선 장식의 종류를 설정합니다. text-decoration-line 속성의 사용 방법에 대해 알아봅니다. |
text-decoration-style text-decoration의 스타일 설정 |
text-decoration-style 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 스타일을 설정합니다. text-decoration-style 속성의 사용 방법에 대해 알아봅니다. |
text-decoration-thickness text-decoration의 두께 설정 |
text-decoration-thickness 속성은 텍스트에 사용되는 text-decoration-line으로 지정된 선 장식의 두께(굵기)를 설정합니다. text-decoration-thickness 속성의 사용 방법에 대해 알아봅니다. |
text underline 위치 간격 설정 속성들 위치와 간격 속성 알아보기 |
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 간격 조정을 지정할 수 있는 속성입니다. text-underline-offset 속성으로 text-decoration underline의 간격 띄우기(오프셋, offset)를 설정할 수 있습니다. |
text-underline-position text-decoration underline 위치 설정 |
text-underline-position 속성은 text-decoration underline 간격 조정을 지정할 수 있는 속성입니다. text-underline-position 속성으로 text-decoration underline의 위치를 설정할 수 있습니다. |
text-emphasis 텍스트에 강조 표시 설정의 단축 속성 |
text-emphasis 속성은 요소의 텍스트에 강조 표시를 설정합니다. 이 속성은 text-emphasis-style, text-emphasis-color 속성의 단축 표현입니다. text-emphasis 속성의 사용 방법에 대해 알아봅니다. |
text-emphasis-color 텍스트 강조 표시 색상 설정 |
text-emphasis-color 속성은 text-emphasis-style로 지정된 요소의 텍스트 강조 표시의 색상을 설정합니다. text-emphasis-color 속성의 사용 방법에 대해 알아봅니다. |
text-emphasis-position 텍스트 강조 표시 위치 설정 |
text-emphasis-position 속성은 text-emphasis-style로 지정된 요소의 텍스트 강조 표시의 위치을 설정합니다. text-emphasis-position 속성의 사용 방법에 대해 알아봅니다. |
text-emphasis-style 텍스트 강조 표시 모양 설정 |
text-emphasis-style 속성은 요소의 텍스트에 강조 표시 스타일을 설정합니다. 강조할 글자 위에 점 등의 모양을 설정할 수 있습니다. text-emphasis-style 속성으로 설정할 수 있는 텍스트 강조 표시 스타일과 사용법에 대해 알아봅니다. |
text-overflow 텍스트의 한 줄 말줄임(...) 표시하기 |
text-overflow 속성은 블록 컨테이너 요소의 텍스트 영역을 벗어나 줄바꿈하지 않고 오버플로우되어 숨겨진 텍스트가 있는지를 시각적으로 나타내는 생략 부호를 표시할지(예를 들어 ... ) 아니면 그냥 숨겨진 채로 남겨둘지를 설정합니다. |
text-shadow 텍스트에 그림자 효과 |
text-shadow 속성은 텍스트 문자에 그림자 효과를 적용하는 속성입니다. 이 속성의 특징 및 구현 방법, 특히 여러 개를 사용하는 방법에 대해 다루겠습니다. 그리고, 다양한 예제를 통해 text-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다. |
vertical-align 인라인 레벨 요소와 테이블 셀 내부의 수직 정렬 |
vertical-align 속성은 인라인 레벨 요소와 테이블 셀 요소 내부의 수직 정렬을 지정하는 속성입니다. 해당 요소가 부모 요소의 기준선에 상대적으로 어떻게 수직 정렬되는지를 설정합니다. 이 속성은 블록 레벨 요소에 직접적으로 적용되지 않습니다. |
white-space 공백 문자 처리와 줄바꿈 규칙 |
white-space 속성은 두 가지 측면을 지정합니다. 첫째, 요소 내부의 공백 문자(whitespace) 처리와 둘째, 줄바꿈 규칙을 지정합니다. 이 속성을 사용하여 텍스트의 연속된 공백 문자, 줄바꿈 문자 등을 어떻게 다룰지를 설정할 수 있습니다. |
will-change 변경되는 속성의 브라우저 성능 최적화하기 |
will-change 속성은 CSS에서 요소의 속성이 변경될 것임을 브라우저에 미리 알리는 역할을 합니다. 이를 통해 브라우저는 요소의 속성이 변경될 때 최적의 성능을 발휘할 수 있습니다. |
word-break 텍스트가 줄 바꿀 때 단어의 줄바꿈 규칙 |
word-break 속성은 텍스트가 텍스트 박스의 끝에 도달했을 때 해당 텍스트의 단어(word)를 어떻게 줄바꿈할지(break) 지정합니다. 이 속성은 텍스트의 가독성을 향상시키기 위해 매우 중요한 역할을 합니다. |
word-spacing 텍스트의 단어와 단어 사이 공백 간격을 조절 |
word-spacing 속성은 특정 요소 안에 있는 텍스트의 단어와 단어 사이 공백 간격이나 인라인 요소와 인라인 요소 사이의 공백 간격을 조절하는 속성입니다. 양수 값이면 간격이 넓어지고, 음수 값이면 간격이 좁아집니다. |
writing-mode 텍스트 세로 쓰기 모드 설정 |
writing-mode 속성은 텍스트 줄을 가로 또는 세로로 배치할지 여부와 블록 컨테이너의 흐름이 되는 방향을 지정합니다. writing-mode 속성을 사용하면 일반적인 가로로 표시하는 텍스트를 세로로 표시하는 모드로 변경할 수 있습니다. |
-webkit-line-clamp 텍스트의 줄 수를 제한하여 생략 부호(...) 표시 |
-webkit-line-clamp속성은 텍스트를 지정된 줄 수로 제한해서 말줄임을 표시하는 방법으로, 텍스트 영역의 줄바꿈하는 텍스트를 지정된 줄 수로 제한해서 제한한 줄 수 보다 텍스트가 길면 생략 부호(...)를 표시하는 속성입니다. |
-webkit-text-stroke 텍스트 테두리 외곽선 스타일 |
-webkit-text-stroke 속성은 텍스트 문자에 테두리 외곽선(획)을 스타일하는 속성입니다. 속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다. |
-webkit-text-stroke-color 텍스트 테두리 외곽선 색상 설정 |
-webkit-text-stroke-color 속성은 텍스트 테두리 외곽선(획)의 색상을 설정하는 속성입니다. -webkit-text-stroke-color 속성의 사용 방법과 예제 등에 대해 알아봅니다. |
-webkit-text-stroke-width 텍스트 테두리 외곽선 두께 설정 |
-webkit-text-stroke-width 속성은 텍스트 테두리 외곽선(획)의 두께(굵기)를 설정하는 속성입니다. -webkit-text-stroke-width 속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다. |