자기소개페이지
Sad
하아...
이전에 udemy에서 html, css를 공부했는데, 따라만 쳤던 건 역시 아무런 도움이 안된다는 것을 뼈저리 느끼며, 겨우겨우 자기소개서 페이지 한 장을 만들었다. 역시 배운 건 써먹어야 알 수 있고, 진정하게 배운 것이 된다는 것을 깨달았다.
navbar를 스크롤 다운할 때, 계속 보이게 고정을 시키려는데 position: fixed;를 하면 가운데에 있지않고, 왼쪽으로 붙어서 시간을 수정하려고 많이 잡아먹었다. ㅠ_ㅠ
video도 넣고 싶고, 이미지 파일도 백그라운드에 넣고 싶고, navbar 스크롤 다운하면 사라지고, 업하면 다시 생기는 효과도 넣고 싶었는데, 이렇게 해도 안되고, 저렇게 해도 안되고, 검색해보니 html, css에다가 javascript 코드까지 적어야했기에... 포기.
가급적이면 사용하지 않는 게 좋다는 css value인 !important; 를 내용에 비해 많이 사용함. 도대체 왜 css 효과가 적용이 안되며, 내가 입력한 것을 strikethrough해버리는 이유가 도대체 뭘까... 왜 !important;를 사용하게 만드는건지...
Like
영어로 되어 있는 codecademy를 보면서 공부를 하는 것은 너무나 지루해서 집중을 잘 할 수 없었는데, 직접 코드를 작성하면서 무언가를 만들어보는 것은 집중이 잘됐다. 그 말은 즉, 직접 해보는 것에 대한 즐거움을 느꼈다는 말이 아닐까.
Next
자기소개서 페이지를 만들면서 이전에 했던 공부 방법이 잘못되었다는 것을 알았고, 배운 것은 직접 해봐야한다는 것을 느꼈으니, 배운 것은 직접 해보자. 적용해보자. 실행해보자.
포기하지말고, 꾸준하고, 끈기 있게 하자. 위코드에 가기 전까지 기초를 탄탄하게 하고 가자.
개발자 tips 링크텍스트
1. Box Model로 생각하기.
2. 한 서비스 안에 모든 API를 만드는 것보다 이 서비스를 세분화하게 나눌 수 있을 지, API를 어떻게 logical하게 담을 수 있을 지 생각하기, micro service.
3. class, 함수를 작성할 때도 한 클래스 안에 여러 클래스가 많이 담겨져 있는 지, 세부적으로 나누어서 다른 클래스를 만들 수 있는 지, 함수도 조금 더 세분화한 함수로 있지 않을까 생각하기.
4. 배울 때, 너무 세부적인 것에만 사로잡혀서 꼼꼼하게 배우는 것보다, 먼저 큰 그림을 보자. 왜 이렇게 사용하는 지, 왜 이렇게 되는 지 생각하기.
5. MDN...!!!!
기본 웹사이트 구조 링크텍스트
tags는 BOX(사용자에게 안 보임)가 되거나 ITEM(사용자에게 보임)이 되거나
- Box tag 예시: header, footer, nav, aside, main, section, article, div, span, form 등
- Item tag 예시: a, button, input, label, img, video, audio, map, canvas, table, h1
Block vs Inline level tags
- block level tag는 한 줄에 한 태그가 자리를 차지, 두 번째 태그는 첫 번째 태그 옆에 공간이 있던 없던 다음 줄로 들어감. 한 줄에 하나, 한 줄에 하나. 예시:
<div></div>- inline level tag는 다른 태그 옆에 공간이 허용되면 그 옆에 배치가 가능하다. 예시:
<b></b>, <span></span>
👨🏻💻☕️ 🎹🎵 🐰🎶 🛫📷