Basic 강의 과제

2번.
html과 css를 활용하여 아래 사진과 같은 화면을 만들어오세요.
- div 태그를 활용하세요.
- css 는 link 태그로 html에 연결하세요.
- 크기, 색깔 상관 없습니다.
- div 태그가 좌우로 나열되는 것이 핵심입니다.

3번.
div 태그를 브라우저 중간에 놓으세요.

• 크기, 색깔 상관없습니다.
• hint: display flex와 다른 css 속성을 활용합니다.
• div 태그를 브라우저의 중간에 두는 것이 핵심입니다.

무척이나 간단한 CSS지만, 여기서 한 번 절었다.

일단은 2번에 제시된 예시를 구현해놓은 뒤,

<style>
.container-box {
  display: flex;
}

.container {
  width: 100px;
  height: 100px;

  border: 1px solid black;
}
</style>

그 다음으로 3번을 해결하기 위해 자신만만하게 코드를 입력했다.

"이거는 ㅋㅋ껌이지 ㅋㅋ 정렬 3종세트 바로 드걔쟤!"

<style>
.container-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100px;
  height: 100px;

  border: 1px solid black;
}
</style>

그러나..

"..?"
"어..?"

껌은 나였고..

height 값을 안주면 이렇게 된다는 걸 왜 아직도 체득하지 못한 걸까...

<style>
.container-box {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

height를 주는 김에 width도 줬다..
헌데..캡쳐를 떠온 이미지에선 border가 조금 이상해 보이는데, 실제로 저렇지는 않고 일정하다.

6번.
다음 html에서 javascript를 이용하여 다음과 같이 변경하세요.
- h1 태그에 ‘제목입니다’ 라는 텍스트를 추가해보세요.

   <h1 id="heading"></h1>

오늘 들었던 강의에서 제일 귀에 똑똑히 박혀들어왔던 개념을 이용하면 됐다.

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.querySelector('#heading').innerHTML = '제목입니다.';
  console.log(document.querySelector('#heading').innerHTML);
});
// innerHTML을 통해 h1부분에 내용을 집어넣는 것.
// innerHTML이 미리 실행되는 것을 방지하기 위해, addEventListener 'DOMContentLoaded'.
</script>

"HTML에.#heading을 불러와서.innerHTML = "제목입니다.";로 다시 그린다."
튜터님께서 해주신 말을 중얼거리면서 하니까 좀 손끝에 달라붙는 그런 기분이다.

10번.
함수의 파라미터(인자)로 숫자를 받으면 2를 곱한 결과가 콘솔에 출력되도록 함수를 만들어보세요.

<script>
function multiply(value) {
  if (typeof value === 'number') {
    const result = value * 2;
    return result;
  } else if (typeof value === 'string') {
    console.log('입력은 숫자만 허용됩니다.');
  } else {
    typeof value === 'undefined';
    // typeof value === ''; 이렇게 하면 될 줄 알았는데 아니었다..
    // 어차피 위에서 숫자로 걸러지고, 문자열로 걸러지기 때문에.
    // 숫자도 문자열도 아닌 것들을 걸러낼 undefined만 추가하면 됐다.
    console.log('올바르지 않은 입력입니다.');
  }
}

console.log(multiply(10)); // 20
console.log(multiply('십')); // 입력은 숫자만 허용됩니다.
console.log(multiply([10])); // 올바르지 않은 입력입니다.
console.log(multiply()); // 올바르지 않은 입력입니다.
</script>

역시나 오늘 강의를 통해, 다시금 머릿속과 손끝에 때려박은 function 함수 쓰는 방법과 if, else, else if.
확실히 과제를 통해서 직접 코드를 넣고 지우고 실행시키고 하니까 더 체득되는 게 와닿는 느낌이다.