[TIL] 2021 01 08 Fri

1. Javascript 30

Day 7 : Array Cardio Day 2

今回も簡単に並べ方を練習する項目です
more、each、find、findIndexメソッドの使用

Day 8 : Fun with HTML5 Canvas

線を引くたびに色や線の厚さが変わるHTMLキャンバス実装アイテム.

1.canvasタグ

<canvas id="draw" width="800" height="800"></canvas>

canvasラベルのプロパティはwidthとheight(depolt 300 px,150 px)のみで、DOMで後続の調整が可能です.
気をつけて!canvasは自己閉じることができないタグと呼ばれます.ラベル</canvas>を閉じる必要があります!->キャンバスがサポートされていないブラウザでは、キャンバスラベルにimgラベルなどを任意に配置できます.

2.コンテキストの作成

キャンバスラベルがレンダリング領域を指定すると、contextはコンテンツの出力とレンダリングを担当します.getContext()というメソッドを使用して宣言し、「2 d」と「3 d」をパラメータとして指定できます.(WebGLの場合は「3 d」)

const canvas = document.querySelector("#draw");

// 캔버스의 크기 설정하기
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 2d 렌더링 컨텍스트 설정하기
const ctx = canvas.getContext("2d");

// 선의 모양 설정하기
ctx.strokeStyle = "#BADA55"; /* 선의 색, 그라디언트, 패턴 등을 결정 */
ctx.lineJoin = "round"; /* 두 선이 만났을 때 접점을 둥글게 처리 */
ctx.lineCap = "round"; /* 선 끝을 둥글게 */
ctx.lineWidth = 100; /* 선의 두께 */

3.描画

let isDrawing = false; /* isDrawing state */
let lastX = 0; /* 시작점의 x좌표 설정 */
let lastY = 0; /* 시작점의 y좌표 설정 */

function draw(e) {
  if (!isDrawing) return;
  ctx.beginPath(); /* 경로를 그리기 시작 */
  ctx.moveTo(lastX, lastY); /* 경로를 그리지 않고 해당 좌표로 이동 : 시작점*/
  ctx.lineTo(e.offsetX, e.offsetY); /* 경로를 그리며 이동 : 끝점 */
  ctx.stroke(); /* 지정한 경로에 실제로 선을 남김 */
  
  lastX = e.offsetX; /* 그리기가 끝난 시점에 다음 시작점의 x좌표 설정 */
  lastY = e.offsetY; /* 그리기가 끝난 시점에 다음 시작점의 y좌표 설정 */
}

canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mousedown", (e) => {
  isDrawing = true; /* isDrawing state 변경 */
  lastX = e.offsetX; /* drawing 시작점의 x좌표 설정 */
  lastY = e.offsetY; /* drawing 시작점의 y좌표 설정 */
});
canvas.addEventListener("mouseup", () => (isDrawing = false));
canvas.addEventListener("mouseout", () => (isDrawing = false));

4.色と線の厚さを変える

hslは、色相(色)、飽和度(飽和度)、輝度(輝度)を変えることができる方法である.
色相は0〜360のスペクトル(赤色〜紫色)を有し、飽和度および輝度は0〜100%のスペクトルを有する.彩度の既定値は100%、明るさは50%ですか?

let hue = 0; 
let direction = true; /* 선 두께를 변경하기 위한 flag 역할 */

function draw(e) {
 /* ...위 코드에 이어서 계속... */
  
  hue++; /* 드로잉이 진행되는 동안 hue를 지속적으로 변경한다. */
  if (hue >= 360) hue = 0; /* hue는 360까지이므로 다시 0으로 리셋 */
  
  /* 선 두께를 0 ~ 100까지 조절하기 위한 flag */
  if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) {
    direction = !direction;
  }
  direction ? ctx.lineWidth++ : ctx.lineWidth--;
}

参考資料

デフォルトではMDN|Canvasを使用

w3school | HTML Canvas Reference

[HTML 5チュートリアル]CANVAS基礎チュートリアル

w3school | Colors HSL

2. Advanced CSS and Sass Flexbox, Grid, Animations and More!

section 5: Natours Project — Using Advanced CSS and Sass (Part 2)

1.純CSSを使用して背景写真にグラフィックを上書きする

background-imageプロパティで画像urlを最後のパラメータとして使用すると、バックグラウンドピクチャは最後の位置に配置されます.
直線勾配効果を上に与え、同じ%を与えると、その境界がグラデーションではない面分割効果を利用すればよい.

<div class="book"></div>

.book {
  background-image: 
    linear-gradient(
      105deg, /* 각도 조절! */
      rgba($color-white, 0.9) 0%, /* 0 ~ 50%을 하얀색으로 */
      rgba($color-white, 0.9) 50%, /* 50%라는 숫자가 겹치므로 경계는 면이 된다 */
      transparent 50% /* 나머지를 투명색으로 */
    ),
    url("../img/nat-10.jpg"); /* 배경이미지는 가장 마지막으로 */
}

2. input validation check

今日、純htmlフォームラベルでvalidation checkもできることがわかりました.

<input type="text" class="form__input" required />

これでrequiredプロパティを与えることができます!

.form__input:focus:invalid {
  border-bottom: 3px solid $color-secondary-dark;
}

次に、css:focus:無効な設定がある場合は、検証に基づいてスタイル設定を行うことができます.

3.兄弟セレクタ

隣接兄弟セレクタ:セレクタAの兄弟要素で、セレクタAのすぐ後ろにあるセレクタB要素を選択します.AとBの間に他の要素がある場合、

は選択されません.

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

/* 인접한 형제기 때문에 가능 */
.one + .two {
  display: block;
} 

/* 인접한 형제가 아니기 때문에 불가능 */
.one + .three {
  display: block;
} 

普通兄弟コレクター:コレクターAの兄弟要素の中から、コレクターAの後ろにあるすべてのコレクターB要素を選択します.

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>

/* one two three 모두 선택 */
.one ~ .three {
  display: block;
} 

参考資料

CSS3 Selector

The Sass Ampersand

4.無線入力ポートをオフにする

ラジオボタンはブラウザが自分でデザインしているので、「display:none」に設定することは不可能なので、「display:none」で任意のspanラベルを隠してデザインするトリックを習得しました!

<div class="form__radio-group">
  <input type="radio" name="tour" id="small" class="form__radio-input"/>
  <label for="small" class="form__radio-label">
    <!--👇 요 친구가 가짜 라디오 버튼. label 안에 넣었기 때문에 input과 함께 묶인다 -->
    <span class="form__radio-button"></span> 
    Small tour group
  </label>
</div>

.form {
  /* 진짜 라디오버튼은 숨긴다 */
  &__radio-input {
    display: none; 
  }
  
  &__radio-label {
    position: relative;
  }
  
  /* 임의의 라디오버튼 디자인 (테두리) */
  &__radio-button { 
    height: 3rem;
    width: 3rem;
    border: 5px solid $color-primary;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    left: 0;
    top: -0.4rem;
    
    /* 임의의 라디오버튼 디자인 (select 시 나타나는 동그라미) */
    &::after {
      content: "";
      display: block;
      height: 1.3rem;
      width: 1.3rem;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: $color-primary;
      opacity: 0;
      transition: opacity 0.2s;
    }
  }
  
  /* Sibling을 통해 input이 check 속성이 되었을 때 그 속성을 넘겨받는다 */
  &__radio-input:checked ~ &__radio-label &__radio-button::after {
    opacity: 1;
  }
}

3.ポートフォリオを考えている

今日は集中できず、コードよりもネット製品の組み合わせの構想に集中しています.最初は履歴書表を継承する製品の組み合わせを作りたいのですが、履歴書をpdfで直接見たほうがいいです.サイトで見て何の意味がありますか.そう思って、違う試みをすることにした.やり取りができなくても、できるだけ遊園地のような格好をしなければなりません.自分の空間を表現する単なる履歴書ではありません.
まず構想するときもドメイン名を購入