오늘 한 것

  • 박영웅 강사님 HTML & CSS 특강 듣기
  • 온라인 강의 (스타벅스 예제 만들기) 듣기

새롭게 알게된 것

javascript:void(0)
<a> 태그는 클릭 시 다른 페이지로 이동하도록 href의 값으로 링크 목적지를 넣어주어야 한다. 그러나 클릭해도 이동하지 않게 할 때에는javascript:void(0)을 작성하면 된다. (클론 코딩 시에 유용)

<img>background-image의 차이
둘 다 이미지를 출력하는 것은 동일하지만 HTML 구조로 삽입하는 ìmg태그는 말 그대로 이미지를 삽입하는 의미이고, background-image는 배경으로 이미지를 사용하는 것이므로 디자인적인 요소로만 사용하고자 할 때에는 background-image를, 필수 속성인 alt의 내용으로 검색의 대상이 되고 싶을 때에는 ìmg사용한다. 결국 디자인과 웹 접근성을 높이기 위해 두 방법을 적절히 사용하는 것이 좋다.


Keep.

TIL 작성하기
일기처럼 시시콜콜한 이야기까지 써버릴까봐 부끄럽다고 생각했는데 성장하는 과정을 남겨두는 것도 좋은것 같다!

공부 환경 만들기
집중을 위해 방해되는 요소를 개선하려고 노력했다. 보조 모니터도 설치하고 실시간 강의 때 내 방은 인터넷이 잘 안돼서 실강 시간에는 도서관으로 장소를 옮겼다. 공부 장소를 정하는 것에도 많은 시간을 보냈는데 앞으로는 공부하는 시간이 변동되지 않도록 오프라인 강의장에 가서 학습시간을 확보해야겠다.

클론 코딩하기
물론 나 혼자 한게 아니고 강의를 들으면서 한거지만 비주얼화 시키는 과정이 재미있었다. 혼자서 뚝딱뚝딱 만들 수 있을 정도로 실력이 좋아지면 좋겠다! 취미가 클론 코딩인 사람 돼 버리고 싶어서 keep... 시간 있을때 마다 해보기!


Problem.

라이브러리 사용이 익숙하지 않았다.
스타벅스 클론 코딩하기 수업을 들으면서 몇 가지 라이브러리를 사용하였는데 <script>부분을 엉뚱한걸 복사 붙여넣기하는 바람에 제대로 작동이 안됐다.

오타가 많았다.
이 뿐만 아니라 대부분의 오류는 오타로 되어있었다. 자바스크립트는 camelCase로 작성하는데 대소문자를 잘 못 입력해서 동작이 안 된적도 많았다!

집중을 많이 하지 못했다.
아직 우리집은 공부 환경이 제대로 갖춰지지 않았다는 핑계로 노트북 거치대, 의자 등을 구매한다고 공부 중간 중간에 아이쇼핑을 해버렸다. 그냥 얼른 집중할 수 있는 환경을 만들어야겠다.

flex-shrink가 잘 이해되지 않았다.
이제 position개념은 얼추 이해가 가는데 flex는 어렵다. 블로그에 정리하는 것이 목표인데 아직 엄두가 안난다. 자바스크립트 내용 들어가기 전에 공부를 많이 해봐야겠다.


Try.

블로그를 작성할 때에는 검증해서 올리기
오늘 강의에서 강사님이 좋은 공부 방법 중 하나가 '블로그에 내가 이해한 것을 올리기'라고 하셨다. 논리 모순을 없애기 위해서 내 스스로가 검증을 하고 찾아보는 과정을 거치기 때문이다. (그래서 지금 블로그에 글이 많이 없는거..^^) 글을 올릴 때에는 확실히 이해하고 썼던 글도 오류가 있는지 체크하자!

flex개념 이해하기
현재 약한 부분인 flex를 집중적으로 공부해야겠다. 강사님은 flex를 수없이 강의하셔서 완전 마스터 수준으로 잘 알고 계신다고 했다. 나도 남을 이해시킬 수 있을 만큼 flex를 정복해야겠다.

코드 작성 깔끔히 하려고 노력하기
강사님의 완성 코드를 보았는데 주석도 너무 깔끔하게 달려있고 모든 코드가 보기 쉽게 정리되어 있었다. 포토샵은 작업 후에 레이아웃을 깔끔히 정리하는 과정을 거쳤는데 코드의 경우에도 다 작성 후 깔끔히 정리하는 것인지, 아니면 쓰는 즉시 바로 바로 정리하는 것인지 뭐가 좋을지는 아직 잘 모르겠지만..! 일단 깔끔하게 작성하는 것을 목표로 해야겠다.

2개의 댓글

comment-user-thumbnail
2022년 9월 22일

얼른 공부해서 리액트 하러가요 🐱‍🏍

1개의 답글