위코드의 시작

"아~ 한달 반이나 어떻게 기다리지?"하면서 시간을 보내다가 "헐랭스 내일 시작이야? 뭐고 이거 ㅡㅡ" 이렇게 되었다. 많이 기다렸는데 시작하니까 끝난 것도 아닌데 벌써 시원섭섭하다ㅋㅋㅋㅋㅋㅋ. 처음보는 사람들과 낯선 환경이지만 멘토님들의 세션을 들으며 열심히 해야겠다고 생각했다. 하지만 아직 마음 먹은대로 되는 것 같지 않다. 창밖을 보면서 "저 건물은 언제 다 지어질까? 저 아파트는 얼마일까?" 쓸데없는 생각도 했다. 그러다가도 다른 동기들이 열심히 하는 것을 보며 다시 모니터에 눈을 돌렸다. 첫날 repl.it 문제풀이 HTML/CSS는 이렇게 지나간다. 날이 어둑해지는 것을 보며 집에 언제갈지 고민하며 TIL(Today I Learned)을 작성해본다.

무엇을 공부했나?

세션 시간에 강조된 부분이 원리를 이해하자 였다. 그래서 외우려고 노력하지않고 물 흐르는데로 마음가는데로 공부했다 ㅋㅋㅋㅋ... HTML/CSS는 익숙한 부분이 많으니 은근히 몰랐던 내용을 위주로 정리해본다.

box-sizing

HTML/CSS를 대학 다닐때나 지금이나 약간 물로 본 경향이 있다. 그랬더니 완전 처음보는 키워드가 나와버렸다. 모르는게 천지인데 하나 모른다고 당황하지는 않는다는 마인드 😎. 물론 repl.it의 내용만 보고 이해하지 못했으므로 검색해 보았다.

"box-sizing은 요소의 너비와 높이를 계산하는 방법을 지정합니다."라고 MDN 문서에 나와있다. 이런저런 설명은 봐도 모르겠지만 (아니면 그냥 좀 귀찮았던가) 딱 두줄은 이해할 수 있었다.

• content-box: 요소의 크기는 "너비 = 콘텐츠 너비", "높이 = 콘텐츠 높이"로 계산하고 테두리와 안쪽 여백은 식에 넣지 않습니다.
• border-box: 요소의 크기는 "너비 = 테두리 + 안쪽 여백 + 콘텐츠 너비", "높이 = 테두리 + 안쪽 여백 + 콘텐츠 높이"로 계산합니다.

그제서야 "눈으로 보이는 너비가, 개발자가 코딩하는 그 값이여야 코딩과 머리속으로 생각하는 로직이 같아집니다."라는 말이 이해가 되었다. 개인 프로젝트나, 실무를 할 때 꼭 적용해야하는 프로퍼티라고도 하니 기억을 해보겠지만 필요할 때 생각이 바로 나오길 빌어야겠다.

: vs. ::

싱글 콜론과 더블 콜론의 차이가 정확히 무엇인지 몰라서 검색해 보았다. 물론 콜론 하나만 사용해야하는데 두개를 사용해서 혼자서 "뭐가 틀렸다는데 ㅡㅡ"하면서 시간을 보냈기 때문에 그런 것도 있다. 검색하니 또 두 줄만 보인다.

• double-colon selectors are pseudo-elements.
• single-colon selectors are pseudo-selectors.

WTH? 아무튼 힌뜨를 얻었으니 pseudo-elements와 pseudo-selectors로 검색해 보았다. 전자는 선택한 요소의 일부분에만 스타일을 입히는 용도의 키워드이다. 다음과 같이 사용한다.

input::placeholder {
  color: #bbb;
}

후자는 선택한 요소가 특별한 상태일 때 스타일을 입히는 용도이다. 마우스가 요소위에 올려져 있다던지, 체크박스에 체크가 되어있는지, 첫번째 차일드인지 등 특별한 상황이 MDN 문서를 보니 사용가능한게 12개 정도이다.

button:hover {
  color: blue;
}

틀린걸 고친 것으로 넘어가지않고 검색해보길 잘했다고 생각한다. 가끔은 실수하는 것도 나쁘지 않다고 본다.

absolute

CSS 배울때 position에 대해 배우게된다. 나는 그냥 좌표대로 포지셔닝 시키는 건줄 알았다. 맞는 말이긴 한데 모르는 부분이 있었다. 부모 중에 position이 relative, fixed, absolute 하나라도 있어야 그 부모에 대해 절대적으로 움직이게 된다는 것이었다.

아무도 안가르쳐준 것인가, 내가 까먹은 것인가, 그냥 몰랐던 것인가 생각했지만 그냥 이제라도 알아서 다행이라고 생각하기로 했다ㅋㅋ.

공부한 소감

평소처럼 집구석에서 혼자 공부하고 풀었으면 다섯개(그나마 양심이 있어서?)만 풀고 누워서 스마트폰으로 영화나 봤을텐데 동기들과 함께하니까 여섯개만 남은 상태가 되었다. 학습 분위기라는 것이 이렇게 중요합니다 여러분, 앞으로도 같이 열심히해요!

집으로 런해야겠다 🤪