📕 [ TIL ] : 11일차_2022.05.02.(월)

20220502 (MON)_TODAY TIL

TODAY PROJECT

• 오늘은 셀프 피드백 후 부족한 부분을 복습하는 시간을 가졌다.

✏️ REMIND : 웹 페이지 제작시 해결이 어려웠던 부분

❗️ HTML

HTML을 사용할 때 각 태그의 의미를 잘 몰랐다. 예를 들어 a태그는 링크를 삽입할 수 있는 태그로
실제로 웹페이지에 보이는 태그라면 form 태그는 눈에 보이지 않는 태그다. 이러한 것과 관련되어 HTML에 관한 기본 개념을 잘 몰랐어서 태그를 작성할때 무한한 궁금증만을 가지고 헤매곤 했다.

그래서 복습 시간을 활용해 보이는 태그와 보이지 않는 태그를 찾아보면서 개발자-디자이너간 소통을 위해 보이지 않는 태그를 사용한다는 것을 알게되었다.

❗️ CSS

그동안 CSS를 사용할 때 꼬이는 부분이 많이 존재했었다. 분명 적용을 시켰는데 적용을 되지 않는 부분이 생기곤 했다.
그리고 오늘 기본 개념을 학습하면서 그 이유를 알게 되었다. CSS 선택자에는 우선순위가 있기 때문이다. 이 우선순위를 무시하고 그동안 CSS를 클래스 선택자로만 구성해왔었다. 또한 id, 태그 셀렉터를 잘 사용할 줄을 몰랐어서 혼합 셀렉터(태그-클래스 결합 방법 등)를 사용할 줄은 더더욱 몰랐었다. 그래서 이 또한 개선해야겠다고 생각했다. 다음번에는 CSS 선택자를 사용할때 적절하게 사용해보는 것을 목표로 해야겠다.
그리고 복잡한 문서 구조에서 특정 부분을 선택하기 위한 선택자 지정은 어려울 수 있다는 것을 알게 되었다. 그렇기에 html 구조를 처음부터 잘 설계하는 것이 중요하다는 것을 알게되었다. 다른 팀원분의 발표에서 html구조부터 촘촘하게 짠 코드를 봤었는데 나 또한 html 구조를 잘 설계해보는 것을 목표로 삼아야 겠다는 생각을 하게 되었다.

그리고 html의 기본 구조인 DOM이라는 개념부터 다시 쌓아야한다는걸 느끼게 되었다. 모든 HTML 튜토리얼에서는 DOM구조를 설명한다. 나는 이에 대한 이해가 부족했고 이또한 오늘 스스로 학습해보는 시간을 가졌다.

여러 공식문서를 찾아다니면서 HTML, CSS, JS의 개념을 조금씩 공부하고 나니 이처럼 부족한 부분이 많이 있다는 것을 깨닫게 되었다.
기초가 약했기에 응용부분에서도 약했던 거라고 생각되었다. 처음 flex 개념을 접했을 때 inline, float, display, block, position에 대한 개념조차도 잡혀있지 않은 상태라 타고타고 맨 처음 DOM구조까지 돌아서 갔던 것이 시간 소요가 많이 되었다.
CSS 에서 가장 어려운 부분이 원하는 곳에 원하는 텍스트나 박스를 배치하는 것이라고 생각했는데 이를 해결하기 위해서는 px, %, rem, em과 같은 단위 설정이라던지 색상이름, HEX(#)코드, rgb, hsl로 나타낼 수 있는 color 속성 등의 아주 아주 기본적인 CSS 개념부터 차근차근 쌓아야 한다는 것을 다시금 느꼈다. (박스, 텍스트 배치하는 예제에서 단위나 컬러코드가 갑자기 나오면 완벽히 이해하지 못했기 때문에 한줄한줄 이해하는게 처음엔 어려웠다.)
그리고 웹서비스는 CSS 하나만으로, HTML 하나만 안다고 해서 동작하는 것이 아니기 때문에 여러가지를 잘 두루두루 익히고 적재적소로 사용해보고 싶다는 생각을 했다.

절대경로와 상대경로에 관해서는 대략적으로 알고 있다고 생각했는데 절대경로에 관한 설명을 보았을 때 이해가 가지않는 부분이 있었다. 이 또한 추후 복습을 해나가면서 여러 문서를 참조해 알아보아야 겠다.
결론 : CDN(Contents Delivery Network) 이라는 용어도 몰랐던 내가 오늘 기본 개념을 차근차근 복습해보면서 몇가지를 깨닫게 되었다. 그리고 먼저 프로젝트를 만들어보는것에는 장단점이 존재한다는 것도 알게되었다. 장점으로는 실전을 먼저 도입해봄으로써 이 태그가 혹은 이 스타일이 어디에 어떻게 적용되고 쓰이는지 직접 체험해볼 수 있다는 점이고, 단점으로는 충분한 시간 투자를 하지 않으면 자세한 기초 내용을 모르고 안다며 자부하고 넘어갈 수 있다는 점이다.

✏️ 그 외 셀프 피드백

그동안 전체 코드를 TIL에 첨부하라는 이야기를 들었을 때 거의 전부 코드를 붙여넣기 했었는데 튜터님의 말씀을 듣고 이제 전체 코드는 github에 올리는 걸로 하고 구현할때 기억하고 싶은 코드나 어려웠던 점을 해결했던 코드 위주로 간결하게 정리해야겠다는 생각이 들었다.
아직 많이 부족한 TIL 정리에 갈피를 조금이나마 잡은 것 같아서 오늘도 한걸음 나아갔다고 느껴졌다.
또한 앞으로 영상을 촬영할 때도 주요 부분과 구현할때 해결한 코드 설명 위주로 3분 정도로 촬영할 예정이다.

오늘 복습해본 HTML, CSS, JS 내용은 아직 숙지가 덜 된 부분도 있어서 조금 더 익힌 후에 어떻게 쓰이는지 직접 배운 개념을 실전 프로젝트에도 적용해보고 사이드 프로젝트에서도 적용해본 뒤 익숙해질 때 즈음 블로그에 차차 업로드할 예정이다. 블로그에 더 보기 좋게 코드를 삽입하는 방법에대해서도 알아보아야겠다.

이상으로 오늘의 TIL 끝!