12.31 TIL

우아한테크코스 합격

12.30 우아한테크코스에서 합격 메일을 받았다.
예외 처리도 한 개 누락했고, 실수한 것이 많아서 합격한다는 생각은 전혀 하지 않았었는데 믿기지 않았고, 그래서 다시 한 번 카톡으로 확인도 받았다. ㅋㅋ

어제는 인턴이 종료되는 날이어서 선물도 많이 받아서 기분이 좋았는데, 우아한테크코스까지 합격해서 축하 파티도 하고, 내 생에 최고로 기쁜 날이었다.

약 한 달 동안 열심히 공부한 보람이 있었고, 부족한 나를 합격시켜준 우테코에 절이라도 하고 싶은 심정이다.

2월 2일부터 시작하는 우테코가 기대되고, 정말 열심히 해서 최고의 신입 개발자가 되야겠다.

애플 웹사이트 클론 코딩 시작

2월 2일까지 한 달 정도 남은 지금, 어떤 것을 연습하면 좋을지 생각하다가 몇 달 동안 자바스크립트로 게임 만들기만 했으니 분위기도 전환시키고, 흥미도 끌어올릴 수 있는 애플 웹사이트 클론 코딩을 시작하기로 했다.

2주 전에 맥북에 관심이 있어서 애플 웹사이트를 들어갔다가 스크롤 하면 바뀌는 부드러운 화면과 인터렉션 디자인을 보고 나도 한 번 만들어보고 싶다는 생각을 했었는데, 어떻게 시작해야 할지 몰랐고, 아직 우테코 미션이 진행 중이라서 시도해 볼 수 없었다.

하지만 오늘 웹사이트를 한 번 만들어보자는 생각으로 자료를 찾다가 우연히 인프런에서 1분코딩의 애플 웹사이트 인터렉션 클론 강의를 발견했다. 웹사이트를 그대로 따라하는 것은 아니고, 애플의 인터렉션 디자인을 따라하는 강의이다.

미리보기로 영상 2개를 본 후에 강의가 괜찮을 것 같아서 시작했으며, 아직 html과 css로 틀을 잡고 있음에도 새롭게 배우는 부분이 나오고, 전문가의 코딩 습관을 배울 수 있어서 좋았다.

6개월 전에 강의를 들을 때와 지금 강의를 들을 때를 비교하면 확실히 아는 것이 많아졌고, 처음 보는 내용이 나와도 이해하는 데 어렵지 않다는 것을 느꼈다.
그리고 자바스크립트만 너무 공부하느라 html과 css에 대해 아직 부족한 점이 많다는 것도 알게 되었다.

새롭게 배운 것

css 가상 클래스 :not()

쓸모 없는 선택자를 선택해야 할 때, 가상 클래스 not()을 사용할 수 있다.

<nav class="nav-links">
  <a id="link-1" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
</nav>

위와 같은 요소가 있을 때, .nav-links의 첫 번째 자식을 제외한 모든 자식들의 색을 red로 만들고 싶을 수 있다.
이때, :first-child를 사용할 수도 있겠지만, :not을 사용하면 매우 간편하게 적용할 수 있다.

.nav-links a:not(#link-1) {
  color: red;
}

이렇게 제외하고 싶은 선택자를 인수 안에 적기만 하면 된다!
많이 사용된다고 하니까 꼭 알아두면 좋을 것 같다.

정확하게 알지 못했던 것

rem, em, auto

rem과 em은 예를 들어 설명하는 것이 가장 이해하기 쉬울 것 같다.

html{
  font-size : 14px;
}
body {
  font-size : 1.5rem;
}
p {
  font-size : 2rem;
  height : 1.5em;
}

p태그가 있다고 가정하고, html의 폰트 사이즈가 14px일 때,
body의 폰트 사이즈 1.5rem은 html에 적용되어 있는 폰트 사이즈 14px의 1.5배인 21px이 된다.
또한, p의 폰트 사이트 2rem은 html에 적용되어 있는 폰트 사이즈 14px의 2배인 28px이 되는데, height는 p의 폰트 사이즈인 28px의 1.5배로 42px이 된다.

rem은 html의 사이즈를 참조하고, em은 상위 요소의 사이즈를 참조하게 된다.
즉, em이 rem보다 상대적인 것이다.

auto는 보통 margin : 0 auto; 로 화면 중앙에 맞추기 위해 많이 사용했었다.
하지만, 정확하게 어떤 원리인지 알고 사용하지는 않았었는데, margin-right : auto를 하게 되면 오른쪽의 빈 공간을 모두 margin-right가 차지한다는 뜻이라고 한다.

즉, margin : 0 auto;는 왼쪽, 오른쪽이 차지할 수 있는 공간을 모두 차지하기 때문에 중앙 정렬이 되는 것이고, margin-right : auto;를 사용하면 나머지 다른 요소들이 모두 margin에 밀려 오른쪽으로 가게 되는 것을 볼 수 있다.
이는 유용하게 사용될 수 있을 것 같다.