No.1021년 5, 6월 트위터의 HTML/CSS/JavaScript의 팁 요약
74349 단어 CSSHTMLJavaScripttech
1.
gradientUnits
속성을 사용하면 전체 예술파에 대한 것인지 도형 단위에 대한 것인지 지정할 수 있다.
<svg viewBox="0 0 100 100">
<linearGradient id="gradient-1" x1="0" y1="0" x2="50%" y2="100%" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="red"/>
<stop offset="1" stop-color="blue"/>
</linearGradient>
<rect x="0" y="0" width="40%" height="100%" fill="url(#gradient-1)"/>
<rect x="60%" y="0" width="40%" height="100%" fill="url(#gradient-1)"/>
<rect x="10%" y="35%" width="80%" height="30%" fill="url(#gradient-1)"/>
</svg>
2.
radial-gradient()
로 표시하다.
<div class="shape"></div>
.shape {
width: 100px;
height: 200px;
background: radial-gradient(110% 50% at bottom, rgba(255, 255, 255, 0) 50%, #556Bda 51%);
}
3.

<button>ボタン</button>
button {
border: 6px solid transparent;
border-radius: 12px;
background: linear-gradient(#fff, #fff) padding-box,
linear-gradient(-225deg, #473B7B 0%, #3584A7 51%, #30D2BE 100%) border-box;
}
4.
shape-outside
속성float
을 회전시켜 텍스트를 원형으로 만들 수 있습니다.
<div class="circle">
<div class="shape"></div>
そのころわたくしは...
</div>
.circle {
--size: 500px;
--padding: 20px;
width: var(--size);
height: var(--size);
color: #241d50;
border-radius: 50%;
background-color: #f5f5f5;
overflow: hidden;
}
.shape {
display: inline;
height: 100%;
}
.shape::before,
.shape::after {
width: 50%;
height: 100%;
content: '';
}
.shape::before {
float: left;
shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--padding)), #fff 0);
}
.shape::after {
float: right;
shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--padding)), #fff 0);
}
도 마름모꼴을 만들어 보았다.
<div class="rhombus">
<div class="shape"></div>
そのころわたくしは...
</div>
.rhombus {
--size: 500px;
--padding: 10px;
width: var(--size);
height: var(--size);
color: #241d50;
background-color: #f5f5f5;
clip-path: polygon(0 50%, 50% 100%, 100% 50%, 50% 0);
overflow: hidden;
}
.shape {
display: inline;
height: 100%;
}
.shape::before,
.shape::after {
width: 50%;
height: 100%;
content: '';
}
.shape::before {
float: left;
shape-outside: conic-gradient(from 45deg at var(--padding) 50%, transparent 90deg, #fff);
}
.shape::after {
float: right;
shape-outside: conic-gradient(from 225deg at calc(100% - var(--padding)) 50%, transparent 90deg, #fff);
}
5.
이것은 Discord와 같은 축소판 그림의 오른쪽 아래 모서리에 잘린 원형 레이아웃입니다.

<div class="thumb">
<img src="https://picsum.photos/id/433/500/500" alt>
</div>
.thumb {
--origin: 40px; /* 切り取る円の原点の位置 */
--mask-size: 100px; /* 切り取る円の直径 */
--circle-size: 80px; /* 内側の円(緑色)の直径 */
position: relative;
}
.thumb::after {
position: absolute;
right: calc((var(--circle-size) / 2 - var(--origin)) * -1);
bottom: calc((var(--circle-size) / 2 - var(--origin)) * -1);
width: var(--circle-size);
height: var(--circle-size);
content: '';
border-radius: 50%;
background-color: #3aa55c;
z-index: 1;
}
.thumb img {
display: block;
width: 250px;
border-radius: 50%;
-webkit-mask: radial-gradient(circle at calc(100% - var(--origin)) calc(100% - var(--origin)), transparent calc(var(--mask-size) / 2), #fff calc(var(--mask-size) / 2 + 1px));
mask: radial-gradient(circle at calc(100% - var(--origin)) calc(100% - var(--origin)), transparent calc(var(--mask-size) / 2), #fff calc(var(--mask-size) / 2 + 1px));
}
6.
image-set()
함수는 모니터 해상도에 따라 배경 이미지를 분리할 수 있는 기능입니다.Firefox⇔도 버전'박88'로 이루어져 현대 브라우저에서 사용할 수 있다..image {
width: 400px;
height: 300px;
background-image: image-set(
url(https://assets.codepen.io/221808/low-dpi-image.png) 1x,
url(https://assets.codepen.io/221808/high-dpi-image.png) 2x
);
background-size: cover;
}
이전 브라우저에서도 사용할 수 있도록 "스털폴리필"을 고려했습니다..image {
width: 400px;
height: 300px;
/* Chromium Edge, Chrome, Opera, Android */
background-image: -webkit-image-set(
url(https://assets.codepen.io/221808/low-dpi-image.png) 1x,
url(https://assets.codepen.io/221808/high-dpi-image.png) 2x
);
/* Firefox, Safari, iOS Safari */
background-image: image-set(
url(https://assets.codepen.io/221808/low-dpi-image.png) 1x,
url(https://assets.codepen.io/221808/high-dpi-image.png) 2x
);
background-size: cover;
}
/* IE, Edge */
_:-ms-lang(_), .image {
background-image: url(https://assets.codepen.io/221808/low-dpi-image.png);
}
@media (min-resolution: 192dpi) {
_:-ms-lang(_), .image {
background-image: url(https://assets.codepen.io/221808/high-dpi-image.png);
}
}
/* Firefox 88未満 */
@supports (-moz-orient: vertical) and (not selector(:user-valid)) {
.image {
background-image: url(https://assets.codepen.io/221808/low-dpi-image.png);
}
@media (min-resolution: 2dppx) {
.image {
background-image: url(https://assets.codepen.io/221808/high-dpi-image.png);
}
}
}
7.
이것은 Chrome91 반박 수정된 표 관련 문제의 총결산이다.
하위 픽셀 렌더링
Chrome91은'Charome91'이전 렌더링 엔진에서 너비
100px
의 표에'더러운 3더운'단원이 있다면 두 개의'생각지도 못한'단원은 너비33px
에서'더러운 1'단원의 너비34px
로 바뀌었다.Chrome91은 삽에서 시작하여 삽 3삽 두 셀을 사용하여 각각 너비33.333333px
를 균일하게 렌더링합니다.테이블 열 숨기기
col
는 요소visibility: collapse;
를 지정할 수 있으며 각 열을 숨길 수 있습니다.
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
</tbody>
</table>
colgroup col:nth-child(2) {
visibility: collapse;
}
<td> 요소는 writing-mode를 사용할 수 있습니다

<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th>見出し1</th>
<th>少し長めの見出し2</th>
<th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル1</td>
<td>セル2</td>
<td>セル3</td>
</tr>
</tbody>
</table>
th {
/* 縦書き */
writing-mode: vertical-rl;
/* 下揃え */
text-align: right;
}
<theead> 요소 사용 sticky
<thead>
는 요소 중에서 지정할 수 있다position: sticky;
.thead {
position: sticky;
top: 0;
}
8.
matchAll()
함수를 사용하면 여러 개의 일치를 포착할 수 있다.const regex = /(?<year>\d{4})\/(?<month>0?\d{1,2})\/(?<day>0?\d{1,2})/g
const text = `
2021/5/3
2021/05/03
`
console.log([...text.matchAll(regex)])
// => [
// ["2021/5/3", "2021", "5", "3"], ["2021/05/03", "2021", "05", "03"],
// ]
console.log([...text.matchAll(regex)].map(v => v.groups))
// => [
// {year: "2021", month: "5", day: "3"}, {year: "2021", month: "05", day: "03"},
// ]
9.
Array.reduce()
함수 순환 수조의 수량을 전자 연산자로 순환 대상의 키를 사용하기 때문에 느려진다.const array = [
{id: '10', name: 'HTML'},
{id: '11', name: 'CSS'},
{id: '12', name: 'JavaScript'},
]
const object = array.reduce((prev, curr) => ({
...prev,
[curr.id]: curr.name,
}), {})
console.log(object)
고속화를 실현하려면 이전 대상을 대입하거나 사용할 수 있다Map
.const array = [
{id: '10', name: 'HTML'},
{id: '11', name: 'CSS'},
{id: '12', name: 'JavaScript'},
]
const object = array.reduce((prev, curr) => {
prev[curr.id] = curr.name
return prev
}, {})
console.log(object)
const array = [
{id: '10', name: 'HTML'},
{id: '11', name: 'CSS'},
{id: '12', name: 'JavaScript'},
]
const object = array.reduce((prev, curr) => {
prev.set(curr.id, curr.name)
}, new Map())
console.log(object)
10.
const chunk = (array, size) => {
return array.reduce((prev, next, index) => {
return index % size
? prev
: [...prev, array.slice(index, index + size)]
}, [])
}
console.log(chunk([1, 2, 3, 4, 5, 6, 7, 8, 9], 3))
// => [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
console.log(chunk([1, 2, 3, 4, 5, 6, 7, 8, 9], 4))
// => [[1, 2, 3, 4], [5, 6, 7, 8], [9]]
11.
fs.stat()
는 함수를 통해 파일의 존재를 확정할 수 있다.import fs from 'fs/promises`
import path from 'path'
const __dirname = path.dirname(new URL(import.meta.url).pathname)
const fileExists = async filepath => {
try {
await fs.stat(path.resolve(__dirname, filepath))
} catch {
return false
}
return true
}
12.
'여러분'으로 인스타그램'여러분'필터를 구현할 수 있는 프로그램 라이브러리다.

13.
맞춤형성이 높아 Anglar가 알려지지 않은 것이고, Anglar가 알려지지 않은'불규칙'과'불규칙'에도 사용할 수 있다.

14.
맞춤형이 뛰어나 리액터와 삽 베일에도 대응하는'ぬ lightbox ⇔ 라이브러리'다.

15.
이 라이브러리는 고속 또는 [Retina]를 지원하는 액션 그래픽 라이브러리입니다.

16.
이것은 드래그와 '변경' 을 통해 파일을 업로드할 수 있는 '변경 UI' 프로그램 라이브러리입니다.

17.
이것은 수평 스크롤 테이블과 같은 수평 스크롤 라이브러리입니다.

18.
이것은 Medium 바람 이미지 축소 기능을 실현할 수 있는 프로그램 라이브러리입니다.

19.
타자 애니메이션을 실현할 수 있는 프로그램 라이브러리입니다.

20.
사용자 정의성이 높고 성능이 좋은 스크롤 바 라이브러리입니다.

21.
이것은 웹 페이지의 대상을 조작할 수 있는 자유롭게 사용할 수 있는 프로그램 라이브러리이다.

22.
Svelte 반박에 사용되는 애니메이션 라이브러리입니다.
23.
JavaScript의 전체 텍스트 검색 라이브러리입니다.
24.
복제 기능을 간단하게 실현할 수 있는 프로그램 라이브러리입니다.
25.
JSON-LD를 처리하기 위해 '자바스크립트 삽' 을 사용할 수 있는 프로세서 라이브러리입니다.
26.
이것은 npm⇔ 모듈에 사용되지 않은 모듈을 검사할 수 있는 도구입니다.
27.
이것은 CSS를 오른쪽에서 왼쪽으로 분석하는 선택기를 통해 빠르게 실행되는 프로그램 라이브러리입니다.
28.
큰 수의 계산과 복수, 분수와 행렬 등을 위한'스치기 자바스크립트'의 디지털 계산 라이브러리다.
29.
리액터와 박피액트, 뷔, 스벨트에서 돈을 지불할 때 사용하는 초경량 저장소다.
30.
대비도, 유사색, 보색 등 다양한 색상 정보를 확인할 수 있는 온라인 도구다.

31.
'블로그'(babling)와 같은'자바스크립트'(더러운)'덤'(DOM·더러운) 활동을 시각적으로 이해할 수 있는 온라인 도구다.

32.
틈이 없는'박SVG'는 형식을 생성할 수 있는 온라인 발생기다.

33.
틈이 없는'박SVG'는 형식을 생성할 수 있는 온라인 발생기다.

34.
틈이 없는'박SVG'는 형식을 생성할 수 있는 온라인 발생기다.

35.
틈이 없는'박SVG'는 형식을 생성할 수 있는 온라인 발생기다.

36.
그림에서 간단한 선만 만들 수 있는 돈 지불 SVG표 그림을 만드는 온라인 발생기입니다.

37.
CSS Grid Park 및 논리학을 간단하게 구현할 수 있는 그리드 시스템의 온라인 생성기입니다.

38.
간단하고 알기 쉽게 커서의 요소를 강조한 시작 표시와 끝 표시를 사용한 지불 VScode'삽'확장 기능입니다.

39.
이것은'2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2,2'형식으로 다운로드할 수 있는 아이콘 집합이다.

40.
900표 종류 이상 SVG표 아이콘 집합입니다.

41.

300표 이상 동그란'박SVG'아이콘집.
No.9 ← | → No.11
Reference
이 문제에 관하여(No.1021년 5, 6월 트위터의 HTML/CSS/JavaScript의 팁 요약), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://zenn.dev/takamoso/articles/2021-05-06-tips텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)