꼭 알아야 할 CSS의 7가지 속성

CSS를 배우는 것은 아름다운 웹페이지를 만드는 방법입니다. 그러나 학습 과정에서 우리는 (대부분의 경우) 동일한 속성을 계속해서 사용하도록 제한하는 경향이 있습니다. 결국 우리는 습관의 동물이며 익숙하고 친숙한 것을 사용합니다.

그래서 이번 글에서는 드물고 사용하기 쉬운 CSS 속성 7가지를 소개하겠습니다.

1.vertical-align

CSS 속성인 Vertical-align은 인라인 요소나 테이블 셀 요소의 수직 정렬을 지정하는 데 사용됩니다.

정의에서 알 수 있듯이 이 속성을 사용하면 텍스트를 수직으로 정렬할 수 있습니다. 이는 시퀀스 표시기(st, nd 등), 필수 입력 별표(*) 또는 올바르게 중앙에 위치하지 않은 아이콘에 특히 유용합니다. 수직 정렬은 다음 값 중 하나를 취합니다: super | top | lower | text-bottom 또는 기준선의 길이(px, %, rem 등) .

baseline: 요소의 기준선을 상위 요소의 기준선과 정렬합니다. HTML 사양은 와 같은 일부 교체 가능한 요소에 대한 기준을 지정하지 않습니다. 즉, 이 값을 사용하는 이러한 요소의 동작은 브라우저마다 다릅니다.

**sub:**요소의 기준선을 상위 요소의 아래 첨자 기준선에 맞춥니다.

**super:**요소의 기준선을 상위 요소의 위 첨자 기준선에 맞춥니다.

**text-top:**요소의 기준선을 상위 요소의 위 첨자 기준선에 맞춥니다.

**text-bottom:** 요소의 아래쪽을 상위 요소의 글꼴 아래쪽에 맞춥니다.

**middle:** 요소의 중간을 상위 요소의 기준선에 상위 요소 x 높이의 절반을 더한 값(주석: x 높이)으로 정렬합니다.

세로 정렬은 인라인 요소와 테이블 셀 요소에만 적용됩니다. 블록 수준 요소를 세로로 정렬하는 데는 사용할 수 없습니다.

2. writing-mode

writing-mode 속성은 텍스트가 가로 또는 세로로 정렬되는지 여부와 블록 수준 요소에서 텍스트가 이동하는 방향을 정의합니다. 전체 문서에 대해 book을 설정할 때 루트 요소에 설정해야 합니다(HTML 문서의 경우 html 요소에 설정해야 함). 다음 값 중 하나를 사용합니다: 수평-tb(기본값) | 수직-rl |

**horizontal-tb:** 왼쪽 정렬(ltr) 스크립트의 경우 콘텐츠가 왼쪽에서 오른쪽으로 수평으로 흐릅니다. 오른쪽 정렬(rtr) 스크립트의 경우 콘텐츠는 오른쪽에서 왼쪽으로 수평으로 흐릅니다. 다음 가로 행은 이전 행 아래에 있습니다.

**vertical-rl:** 왼쪽 정렬(ltr) 스크립트의 경우 콘텐츠는 위에서 아래로 수직으로 흐르며, 다음 수직선은 이전 줄의 왼쪽에 있습니다. 오른쪽 정렬(rtr) 스크립트의 경우 콘텐츠는 아래에서 위로 수직으로 흐르며, 다음 수직선은 이전 줄의 오른쪽에 옵니다.

**vertical-lr:** 왼쪽 정렬(ltr) 스크립트의 경우 콘텐츠는 위에서 아래로 수직으로 흐르며 다음 수직선은 이전 줄의 오른쪽에 있습니다. 오른쪽 정렬(rtr) 스크립트의 경우 콘텐츠는 아래에서 위로 수직으로 흐르며, 다음 수직선은 이전 줄의 왼쪽에 옵니다.

3.font-variant-numeric

font-variant-numeric CSS 속성은 숫자, 분수 및 서수 마커에 대한 대체 글리프 사용을 제어합니다.

다음 값 중 하나를 사용합니다. 일반 | 서수 | 라이닝 숫자 | 비례 숫자 | 대각선 분수 |

이 속성은 숫자 스타일을 지정하는 데 유용합니다. 상황에 따라 전통적인 숫자나 0을 슬래시로 표시할 수 있습니다. 이러한 경우 글꼴 기능 설정이 유용할 수 있습니다.

font-variant-numeric은 글꼴 기능 설정 그룹 속성의 일부입니다. 글꼴 변형 대문자 또는 글꼴 변형 합자와 같은 속성도 이 그룹에 속합니다.

4. 사용자 선택

사용자가 선택하지 않기를 원하는 텍스트가 있거나 반대로 더블 클릭이나 컨텍스트 클릭이 발생할 경우 모든 텍스트가 선택되기를 원할 때마다 사용자 선택 속성은 매우 유용합니다.

이 속성은 다음 값 중 하나를 사용합니다. 없음 | 자동 |

**none: ** 요소와 해당 하위 요소의 텍스트를 선택할 수 없습니다. 이 Selection 개체에는 이러한 요소가 포함될 수 있습니다. Firefox 21부터 -moz-none처럼 동작하는 것은 없으므로 -moz-user-select: text를 사용하여 하위 요소에 대한 선택을 다시 활성화할 수 있습니다.

auto

auto의 구체적인 값은 다음과 같은 일련의 조건에 따라 달라집니다.

:before 및 ::after 의사 요소에서 사용된 속성 값은 없음입니다.

요소가 편집 가능한 요소인 경우 , 의 속성 값은 다음과 같습니다.

그렇지 않고 이 요소의 상위 요소에 대한 사용자 선택에 의해 채택된 속성 값이 all이면 이 요소에서 채택된 속성 값도 all

그렇지 않은 경우 이 요소의 상위 요소에 대한 사용자 선택은 다음과 같습니다. 채택된 속성 값이 없음이면 요소에서 채택한 속성 값도 none

입니다. 그렇지 않으면 채택된 속성 값은 text

**text:**입니다. 사용자는 텍스트를 선택할 수 있습니다.

**모두:** HTML 편집기에서 하위 요소나 컨텍스트를 두 번 클릭하면 해당 하위 요소를 포함하는 최상위 요소도 선택됩니다.

5.clip-path

클립 경로 CSS 속성은 요소의 일부만 표시할 수 있는 클리핑 영역을 생성할 수 있습니다. 영역 내의 부품은 표시되고 영역 밖의 부품은 숨겨집니다. 클리핑 영역은 포함된 URL이나 외부 svg에 대한 참조 또는 Circle()과 같은 모양으로 정의된 경로입니다. 클립 경로 속성은 현재 더 이상 사용되지 않는 클립 속성을 대체합니다.

이 속성은 다음 값 중 하나를 사용합니다: Circle() | ellipse() | path() |

숙소에 대한 소개이므로 여기서는 각 가치에 대해 자세히 알아보지 않겠습니다.

제가 가장 많이 사용하는 두 가지 값은 원과 다각형입니다. Circle(radius at pair) 값에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 원의 반지름이고, 두 번째 매개변수는 원의 중심을 나타내는 점입니다. 다각형(쌍, 쌍, 쌍...) 값은 삼각형, 직사각형 등을 나타내는 3개 이상의 점을 사용합니다.

6. Shape-outside CSS 속성은 직사각형이 아닐 수 있으며 인접한 인라인 콘텐츠를 둘러싸야 하는 모양을 정의합니다. 기본적으로 인라인 콘텐츠는 여백 상자를 래핑합니다. 외부 모양은 단순한 상자가 아닌 복잡한 개체 주위에 텍스트를 래핑하도록 이 래핑을 사용자 정의하는 방법을 제공합니다. 클립 경로와 동일한 값을 사용합니다.

clip-path는 사용자가 요소를 보는 방법을 정의하고, shape-outside는 다른 HTML 요소가 요소를 보는 방법을 정의합니다.

7. background-clip

마지막으로 backgroundclip CSS 속성은 요소의 배경이 테두리, 패딩 또는 콘텐츠 상자 아래로 확장되는지 여부를 설정합니다.

이 속성은 다음 값 중 하나를 사용합니다. border-box(기본값) | padding-box | content-box | text

추천 튜토리얼: "CSS Tutorial

"

위 내용은 꼭 알아야 할 CSS의 7가지 속성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!