CSS(Cascading Style Sheets)는 웹 페이지의 스타일 및 레이아웃을 정의하는 데 사용되는 스타일시트 언어입니다. 다양한 CSS 속성이 있으며, 이러한 속성을 사용하여 HTML 요소의 모양, 크기, 색상 등을 지정할 수 있습니다.
accent-color 브라우저 UI 요소의 기본 강조 색상 변경 |
accent-color 속성은 브라우저가 기본 스타일을 제공하는 체크박스, 라디오 버튼, 슬라이더, 프로그레스 바 등의 사용자 인터페이스 요소에 적용되어 있는 강조 색상을 변경하는 데 사용됩니다. |
---|---|
appearance 브라우저 UI 요소의 기본 모양 제어 |
appearance 속성은 각 브라우저에서 제공하는 버튼이나 입력 필드 등 컨트롤 요소의 기본 모양을 제어하는 데 사용됩니다. 특히, appearance: none을 사용하면 기본 모양이 제거되어 CSS로 자유롭게 스타일을 적용할 수 있습니다. |
aspect-ratio 요소의 가로 세로 비율 설정 |
aspect-ratio 속성은 이미지나 비디오 동영상, div 등 요소의 원하는 가로 세로 비율을 설정합니다. aspect-ratio 속성 사용법과 작동하지 않는 사례, 그리고 주의할 점에 대해 살펴보겠습니다. |
background 요소의 배경 스타일 지정 단축 속성 |
background 속성은 요소의 배경 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다. 이 속성으로 색상, 이미지, 이미지의 영역과 위치 및 반복 여부 등과 같은 배경 스타일을 한 번에 지정할 수 있습니다. |
background-color 요소의 배경색 지정 |
background-color 속성은 요소의 배경색을 지정합니다. 배경 이미지가 설정되어 있을 경우, 그 뒤에 배경색이 렌더링됩니다. 다양한 방법으로 색상 값을 지정할 수 있으며, 투명도(알파 채널)가 있는 색상 값도 사용할 수 있습니다. |
background-image 요소의 배경 이미지 지정 |
background-image 속성은 요소의 배경 이미지를 지정합니다. 배경 이미지는 한 개 또는 여러 개를 겹쳐서 사용할 수 있으며, 이미지 파일이나 그라디언트를 배경 이미지로 사용할 수 있습니다. |
background-repeat 배경 이미지의 반복 방식 지정 |
background-repeat 속성은 요소에 적용한 배경 이미지의 반복 방식을 지정합니다. 배경 이미지를 가로나 세로 축을 따라 반복하거나 전혀 반복되지 않도록 하거나, 다양한 방식으로 지정할 수 있습니다. |
background-position 배경 이미지의 시작 위치 지정 |
background-position 속성은 요소에 적용한 배경 이미지가 어디서부터 시작될지 위치를 지정합니다. 기본적으로 배경 이미지는 배경 영역의 왼쪽 상단 위치에서 시작합니다. 이 속성으로 배경 이미지를 원하는 위치에 조정할 수 있습니다. |
background-size 배경 이미지의 크기 지정 |
background-size 속성은 요소에 적용한 배경 이미지의 크기를 지정합니다. 이 속성으로 배경 이미지를 원하는 크기로 조정할 수 있습니다. |
background-attachment 배경 이미지의 부착 기준 지정 |
background-attachment 속성은 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. scroll, fixed, local 중 하나의 값을 선택할 수 있습니다. |
background-clip 요소의 배경이 어디까지 차지할 지 설정 |
background-clip 속성은 요소의 배경(색상이나 이미지)이 어느 부분까지 차지(클리핑, clipping)할 지를 설정합니다. 'border-box', 'padding-box', 'content-box', 'text' 중 하나를 선택하여 배경이 차지할 영역으로 지정합니다. |
background-origin 배경 이미지의 포지셔닝 기준 영역 설정 |
background-origin 속성은 요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다. 이 속성은 세 가지 옵션으로 'padding-box', 'border-box', 'content-box' 중 하나를 선택하여 배경 이미지 포지셔닝의 기준 영역으로 지정합니다. |
border-radius 요소 테두리의 모서리를 둥글게 지정 |
border-radius 속성은 요소 테두리의 모서리를 둥글게 만드는 속성입니다. 각 모서리에 접하는 가상의 원형 또는 타원형의 반지름의 크기로 둥굴기를 조절하여, 마치 종이 모서리를 둥글게 자른 것처럼 디자인할 수 있습니다. |
box-shadow 요소 박스에 그림자 효과 |
box-shadow 속성은 요소 박스에 그림자 효과를 적용하는 속성입니다. 이 속성의 특징 및 구현 방법, 특히 여러 개를 사용하는 방법에 대해 다루겠습니다. 그리고, 다양한 예제를 통해 box-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다. |
box-sizing 요소의 너비와 높이의 크기 계산의 기준 설정 |
box-sizing 속성은 블록 컨테이너 요소의 너비와 높이를 계산할 때, 콘텐츠 영역인 content-box만 고려할지, 콘텐츠 영역과 패딩, 그리고 테두리(border)를 모두 고려할지, 즉 border-box를 기준으로 할지를 지정합니다. |
caret-color 마우스 텍스트 입력 커서 색상 바꾸기 |
caret-color 속성은 텍스트 입력 시 나타나는 텍스트 캐럿(입력 커서)의 색상을 지정하는 CSS 속성입니다. 텍스트 입력 필드나 에디터 등에서 텍스트를 입력할 때 보이는 커서의 색상을 지정하는 데 사용됩니다. |
color 글자색 지정 |
color 속성은 글자(폰트)의 색상, 즉 전경색을 지정합니다. 다양한 방법으로 색상 값을 지정할 수 있으며, 투명도(알파 채널)가 있는 색상 값도 사용할 수 있습니다. |
content 해당하는 가상 요소 선택자의 내부 콘텐츠 지정 |
content 속성은 해당하는 CSS 가상 요소 선택자( ::before, ::after, ::marker)로 생성하는 가상 요소의 콘텐츠를 지정하는 속성입니다. 이러한 가상 요소 선택자로 생성하는 콘텐츠는 CSS 속성을 추가하여 스타일링할 수 있습니다. |
cursor 마우스 커서의 종류와 커스텀 커서 지정 |
cursor 속성은 마우스 포인터가 요소 위에 있을 때 표시될 커서 모양을 지정합니다. 이 속성으로 사용할 수 있는 CSS 표준 커서의 종류와 커서를 원하는 이미지로 지정하는 방법, 그리고 그 과정에서 주의할 점에 대해 알아보겠습니다. |
font 단축 글꼴 속성 |
font 속성은 다양한 글꼴 관련 속성을 단축형으로 한 번에 지정할 수 있습니다. 또한, 단일 키워드로 시스템 글꼴을 지정할 수 있습니다. |
font-style 글꼴의 기울임 스타일을 지정 |
font-style 속성은 글꼴의 기울임 스타일을 'normal'(일반), 'italic'(이탤릭체), 또는 단순히 기울인 'oblique'(사선 모양) 중 하나로 지정합니다. |
font-weight 글꼴의 굵기 지정 |
font-weight 속성은 글꼴의 굵기를 지정합니다. 이 속성의 값으로 글꼴의 굵기를 얼마가 가늘거나 굵게 할지를 섬세하게 설정할 수 있습니다. |
font-size 글자 크기 지정 |
font-size 속성은 글자(폰트)의 크기를 지정합니다. 이 속성의 값은 절댓값을 사용해 고정된 크기로 지정하거나, 상댓값를 사용해 부모 요소나 문서의 글자 크기를 기준 등으로 상대적인 비율 크기를 설정할 수 있습니다. |
line-height 텍스트 행간 높이 설정 |
line-height 속성은 텍스트의 라인 높이(line height)를 설정합니다. 이 속성으로 텍스트의 행을 이루는 라인 박스의 위아래 가운데를 기준으로 높이를 조절할 수 있습니다. |
font-family 글꼴 지정 |
font-family 속성은 요소의 글꼴을 지정합니다. 왼쪽에서 오른쪽 순서로 적용할 '글꼴 이름'이나 '글꼴 종류'를 쉼표로 구분하여 여러 개를 목록으로 나열할 수 있으며, 브라우저는 사용할 수 있는 첫 번째 글꼴을 선택해서 화면에 표시합니다. |
font-variant 글꼴의 변형 스타일 지정 단축 속성 |
font-variant 속성은 글꼴의 변형 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다. 이 속성을 사용하면 텍스트의 대문자 스타일, 숫자 형식, 그리고 기타 글꼴 변형 스타일을 효율적으로 제어할 수 있습니다. |
font-variant-caps 텍스트의 대문자 변형 스타일 지정 |
font-variant-caps 속성은 요소의 텍스트를 소문자 대문자, 작은 대문자 또는 제목에 사용되는 변형된 대문자 등 다양한 대문자 변형 스타일로 지정합니다. |
font-variant-numeric 숫자의 변형 스타일 지정 |
font-variant-numeric 속성은 숫자 형식(숫자, 분수, 순서형 마커 등)에 대해 글꼴 변형 스타일을 지정합니다. 이 속성을 사용하면 숫자 형식과 관련된 스타일과 가독성을 개선하거나 텍스트와 숫자가 어우러지는 방식을 세밀하게 제어할 수 있습니다. |
font-kerning 글꼴 내에 저장된 커닝 정보를 사용할지 지정 |
font-kerning 속성은 글꼴 내에 저장된 커닝(kerning) 정보를 사용할지 여부를 지정하는 속성입니다. 커닝이란 인접한 문자 사이의 간격을 조정하여 시각적으로 더 조화롭고 매끄롭게 보이게 하는 것을 말합니다. |
letter-spacing 텍스트의 문자와 문자 사이 간격 설정 |
letter-spacing 속성은 텍스트의 문자와 문자 사이 간격(일반적으로 '자간'이라고 함)을 지정하는 속성입니다. 이 속성을 사용하면 문자와 문자 사이의 간격을 퍼지게 하거나 더 가깝게 설정할 수 있습니다. |
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의 단축 속성(shorthand property)입니다. |
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의 단축 속성성(shorthand property)입니다. 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-overflow 속성은 텍스트의 한 줄 말줄임(...)을 CSS로 표시하는데 매우 유용합니다. |
text-shadow 텍스트에 그림자 효과 |
text-shadow 속성은 텍스트 문자에 그림자 효과를 적용하는 속성입니다. 이 속성의 특징 및 구현 방법, 특히 여러 개를 사용하는 방법에 대해 다루겠습니다. 그리고, 다양한 예제를 통해 text-shadow를 효과적으로 활용하는 방법을 살펴보겠습니다. |
text-size-adjust 모바일에서 텍스트 크기 자동 조정 제어 |
text-size-adjust 속성은 모바일 디바이스에서 텍스트의 크기가 자동으로 조정되는 것을 제어합니다. 이 속성은 주로 모바일 브라우저에서 사용됩니다. 데스크톱 브라우저에서는 무시될 수 있습니다. |
text-transform 텍스트의 대소문자를 변환 |
text-transform 속성은 스타일링 목적으로 요소의 텍스트를 대소문자로 변환하는 방법을 지정합니다. 이 속성을 사용하면 텍스트를 모두 대문자 또는 모두 소문자로 표시하거나 각 단어첫 글자를 대문자로 변환하여 스타일링할 수 있습니다. |
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 속성의 사용 방법과 주의할 점, 예제 등에 대해 알아봅니다. |