No.1021년 5, 6월 트위터의 HTML/CSS/JavaScript의 팁 요약

2021'박년'박 5, 6'박월'트위터에 올라온'박 HTML/CSS/JavaScript'의 트위터 요약.제목을 클릭하면 트위터로 넘어갈 테니 마음에 들면 올려주세요.

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
}