-
아무도 말하지 않는 6가지 CSS 속성CSS 2021. 1. 30. 19:06
1. all
Bootstrap과 같은 CSS 프레임워크를 사용한 적이 있습니까?
그렇다면 일부 요소를 원하는대로 재정의하고 싶을 때가 있었을 것입니다. 가장 일반적인 방법은 CSS의 !important 속성을 사용하여 현재 속성을 강조하고 다른 모든 설정과 규칙을 무시하는 것입니다.
.header{ color: blue !important; font-size: 14px !important; }all에는 initial, inherit, unset과 같은 3가지 속성이 포함되어있습니다.
.header{ all:initial; color: blue; font-size: 14px; }물론 ie 지원범위들을 생각하면 inherit이라던지 auto로 사용할 수 있는 속성이 있다면 그것으로 대체하는 것이 가장 좋습니다.
Chrome 및 Firefox는 각각 버전 37 및 버전 27부터 이 속성을 지원합니다. 이 속성은 Edge 브라우저에서도 지원되지만 Internet Explorer에서는 지원되지 않습니다.
2. writing-mode
텍스트가 세로 및 가로로 배치 된 많은 사이트를 우연히 발견했습니다.
위 이미지의 오른쪽(스크롤바 근처)에는 옆으로 놓인 텍스트를 볼 수 있어 추가 정보를 깔끔하게 보여줍니다.
다음과 같은 값들을 지원합니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode writing-mode - CSS: Cascading Style Sheets | MDN
The writing-mode CSS property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. When set for an entire document, it should be set on the root element (html element for HTML documents). Th
developer.mozilla.org
아쉬운 점은 siteways-lr, sideways-rl이 꽤 유용할 것 같은데 아직 firefox에서만 지원한다는 점입니다. (2021-01-30 기준)
3. background-clip
이것은 요소의 배경에 사용자 정의 그래픽을 설정할 수있는 흥미로운 속성입니다.
사용자 정의 그래픽은 요소의 테두리 상자, 패딩 상자 또는 콘텐츠 상자로 확장 할 수 있습니다.
<p class="border-box">The background extends behind the border.</p> <p class="padding-box">The background extends to the inside edge of the border.</p> <p class="content-box">The background extends only to the edge of the content box.</p> <p class="text">The background is clipped to the foreground text.</p>p { border: .8em darkviolet; border-style: dotted double; margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); }
-webkit-background-clip 속성을 사용하고 텍스트 색상이 투명으로 설정되어 있는지 확인해야합니다.
4. user-select
웹 사이트에 사용자가 복사하지 못하도록 하려는 텍스트가있는 경우 이 속성이 이를 가능하게합니다.
.row-of-icons { -webkit-user-select: none; /* Chrome & Safari all */ -moz-user-select: none; /* Firefox all */ -ms-user-select: none; /* IE 10+ */ user-select: none; }이 속성을 사용하여 전체 요소도 선택되었는지 확인할 수 있습니다.
.force-select { -webkit-user-select: all; /* Chrome 49+ */ -moz-user-select: all; /* Firefox 43+ */ user-select: all; }5. white-space
이 속성을 사용하면 요소의 텍스트 흐름을 제어할 수 있으므로 텍스트 오버플로 속성을 적용할 때 유용합니다.
nowrap, pre, pre-wrap, pre-line 및 normal을 속성 값으로 허용합니다.
6. border-image
이 속성은 웹 사이트 디자인에 중요합니다. 이 속성을 사용하여 요소 주위에 아름다운 테두리를 만들 수 있습니다. border-image를 사용하면 사용자지정 이미지를 테두리로 설정할 수 있습니다.
<body> <h1>This is a title</h1> </body> <!-- CSS below --> h1{ border: 10px solid transparent; padding: 15px; border-image: url(border.png) 20% round; }
출처 : medium.com/javascript-in-plain-english/6-css-properties-nobody-is-talking-about-e6cab5138d02
'CSS' 카테고리의 다른 글
[Greensock] GreenSock ScrollTrigger 플러그인 (0) 2021.01.30 flex-wrap의 wrap과 wrap-reverse의 차이 (0) 2021.01.30 [CSS] 가상 스크롤바에 대하여.. (0) 2021.01.23 [CSS] Grid 1fr 사용 대신 minmax(10px, 1fr) (0) 2021.01.23 css variables? css 변수 사용하기 (0) 2021.01.11