📝 今日作った

📖 学習資料

📚 学識

1.inline要素垂直位置合わせ

2.スケールを維持する反作用画像を作成する

<div class="box1">
  <div class="box2">
    <img>
  </div>
</div>

.box1 {
  width: 400px; /* 💡 자식 요소에 % padding을 사용하기 위해 적어줌 */
}

.box2 {
  /* 💡 % padding은 그 부모 요소의 width 값을 기준으로 함 */
  padding-top: 100%;

  /* 해당 요소 안의 요소 중 삐져나온 부분이 안 보이게 함 */
  overflow: hidden;

  /* img에 absolute 적용하기 위해 그 부모 요소에 적어준 것 */
  position: relative;

  /* div를 원형으로 만들어 줌 */
  border-radius: 50%;
}

img {
  /* 💡 작은 img가 box2 안에 꽉 차도록 */
  height: 100%;

  /* img가 box2 안에 중앙 정렬시킴 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 1:1 비율 */
padding-top: calc(100% / 1 * 1);

/* 16:9 비율 */
padding-top: calc(100% / 16 * 9);

/* 4:3 비율 */
padding-top: calc(100% / 4 * 3);

3.プログラム設計者のアルゴリズム解題

1）完走できなかった選手

function solution(participant, completion) {
  for (let i = 0; i < completion.length; i++) {
    for (let j = 0; j < participant.length; j++) {
      if (completion[i] === participant[j]) {
        participant.splice(j, 1);
      }
    }
  }
  var answer = participant.toString();
  return answer;
}

function solution(participant, completion) {
  for (let i = 0; i < completion.length; i++) {
    var index = participant.indexOf(completion[i]);
    participant.splice(index, 1);
  }
  var answer = participant.toString();
  return answer;
}

明日作った