📝 오늘 한 것

1. inline 요소 수직 정렬 / 비율 유지하는 반응형 이미지 만들기

2. HTML / CSS / JavaScript 복습 (TIL)

3. 프로그래머스 알고리즘 문제 풀이

📖 학습 자료

1. [TIL] 210817 ~ 210902

📚 배운 것

오늘은 복습을 하면서 다시 봤을 때 헷갈렸던 부분과 당시에 질문으로 적어놨던 부분들을 해결해서 정리해보는 시간을 가졌다. 그 중에서 따로 빼와야겠다 싶은 두 부분만 가져왔다.

1. inline 요소 수직 정렬

• 텍스트의 아래, 위 여백은 line-height로 지정할 수 있다.

• vertical-align → inline-block 등을 포함한 모든 inline 요소의 수직 정렬을 위해 사용됨

• vertical-align: middle; → 해당 요소의 인라인 박스의 수직 중앙 지점을, 그 부모 요소의 중앙 지점에 정렬

2. 비율 유지하는 반응형 이미지 만들기

[TIL] 210901 中 반응형 web 부분 질문 해결

자식 요소의 % 패딩(% padding) 값은 부모 요소의 너비 값을 기준으로 정해진다,
CSS 백그라운드 이미지 및 엘리먼트 비율로 조절하기 참고

• 상하좌우 padding과 margin 모두 width 값에 영향을 받는다. (height 값 X)

• 자식 요소의 padding 값으로 %를 사용할 경우, %의 기준 크기는 부모 요소의 width 값이 된다.

HTML

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

CSS

.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%);
}

• box1은 너비와 높이 모두 400px이고, box2에는 너비나 높이가 지정되어 있지 않은 대신 padding-top 값이 100%로 지정되어 있다. 이때 자식 요소의 % padding은 그 부모 요소의 width 값을 기준으로 하므로 box2의 padding-top 값은 400px이 된다.

• 확인을 위해 개발자 도구로 box1 부분을 클릭하면 box2 부분이 선택되면서 padding-top 값만 400px이라고 나온다. 즉, box1 부분이 box1 안에 있는 box2의 padding-top 값으로 모두 채워진 것이다. 이때 box2 안에 img를 넣으면, 그 400px이라는 윗 패딩 값 밑에 img가 오게 되고, box2의 높이는 기존의 box2의 padding-top 값에 img의 높이를 추가한 만큼 늘어나게 된다.

• 그 후 absolute를 이용해 img를 box의 정중앙에 오도록 정렬시킨 후(늘어났던 box2의 높이가 다시 400px이 된다) 작은 img가 box2의 높이만큼 꽉 채워지도록 height 값을 100%로 설정해주면 img가 box2 안에 꽉 들어차게 된다.

• ❗ 이때 브라우저 크기가 변함에 따라 반응형으로 img도 비율을 유지하며 그 크기가 변하도록 하려면 box1의 width 값을 % 값으로 설정해야 한다. 그 후 너무 과도하게 이미지가 커지는 것을 방지하고 싶다면 max-width를 설정할 수 있다.

• ❗ padding 값을 변경해 다양한 비율로 반응형 이미지를 만들 수 있다.

/* 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;
}

푸는 건 금방 풀었는데 저번에 아직 효율성 테스트는 고려하지 말라고 해서 이번에도 정확도만 통과된 후 끝낸 거라 효율성은 0점이다. 실행 결과에 시간 초과라고 뜨는 거 보면 시간 관련된 문제인 거 같은데 알고리즘 강의도 한번 들어봐야 하나. 아니면 계속해서 배운 걸 토대로 정확도만 고려해서 풀어도 되는 걸까.

또 다른 한달 동안 프로그래머스 알고리즘 문제만 계속 푸는 것도 시간이 아까운 거 같아서 저번에 들어보려다 미뤘던 드림코딩 강의도 내일부터 함께 들어볼까 한다. 이미 사전 학습을 통해 배운 내용들이 커리큘럼에 많이 포함되어 있는 강의 같은데 어떨지 모르겠다. 진도가 훅훅 나갈 수 있었으면 좋겠다. 미니 프로젝트들도 함께 만드는 강의라 재밌을 거 같다.

✨ 내일 할 것

1. 자바스크립트 복습

2. 새로운 강의 수강 시작

3. 프로그래머스 알고리즘 문제 풀이