7주차 정리(2/14~2/18)

이번 주는 새로운 강사님과 프론트 엔드를 학습했다.

HTML, CSS, JS를 학습했다.

모든 내용을 다 정리하기 보다는 내가 잘 몰랐던 것, 기억에 남았던 것들 위주로 정리하고자 한다.

 

 

우선 VScode를 이용해서 개발중인데, Go Live(Live Server)를 이용하면 코드 반영사항을 바로 바로 체크하면서 개발을 할 수 있어서 좋았다. Live Server는 마켓플레이스에서 확장프로그램으로 설치 후 사용하는데, 사용법이 직관적이고 쉬워서 좋았다. 

이걸 마켓 플레이스에서 검색해서 쓰면 된다.

 

VScode로 개발하면서 단축키 사용이 늘었는데, 이 라이브서버 구동시에도 유용한 단축키가 있었다.

지금 라이브 서버로 열고자 하는 파일에서 alt + l, O를 누르면 바로 크롬창(디폴트 인터넷 창)이 뜨면서 현재 개발 중인 화면이 나온다. 확실히 단축키 사용을 많이 하고자 하니까 마우스를 사용할 때의 손목과 손가락 통증이 줄어드는 느낌이다.

 

아니 버티컬 마우스 써도 손목에는 무리가 가는 걸까? 그보다 요즘은 손가락 관절염 걸릴까봐 무섭다. 이렇게 거북목, 안구건조에 이어서 손가락 관절염도 생기는 것일까

 

CSS는 항상 필요할 때만 대충 검색해서 쓰던게 다라서 이번 기회에 제대로 배운 것같아 좋았다.

특히 정렬이나, 여백 주는 것등을 굉장히 야매로 하고 있었는데, 비교적 정리가 된 것같다.

웹을 거의 안했어서 그런지 호버(롤오버)기능도 CSS에서 되는지 몰랐는데, 이번에 알게되었다.

내가 호버를 주고 싶은 요소에 :hover 하면 호버시에 어떻게 화면에 보일지를 설정할 수 있다.

.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
  border: 2px dashed darkblue;
}

예를 들어 card 클래스에 호버 효과를 주고 싶다면 위 코드 처럼 쓰면 되는 것이다.

 

JS는 뭐.... 늘 새롭다. 특히 자바 스크립트 알레르기가 있다고 말할 정도로 안 친한 언어였는데,,, 알고 보니 착한 친구였다. 항상 그렇듯 언어는 잘 못없다. 이해 못하는 내가 문제이지.

 

기억 남는 것 중엔 <script> 태그가 있었다. JS를 파일 분리해서 쓰고 HTML에 불러올때 보통 head 태그 안에 넣는 것까지는 알고 있었는데, 가끔 HTML에 있는 태그(혹은 클래스 등등)에 이벤트를 붙이거나, 해당 값을 가져와서 작업 하는 경우에 body 태그 안쪽 하단에 <script>를 써야 작동했었다. 예전엔 그냥 동작에 급급해서 그냥 그 채로 썼는데, 이번에 이유를 알았다. 

 

head태그 안의 태그들이 먼저 실행되기 때문에 아래 body태그 안의 요소를 가져와야 할 경우, script 시점에서는 아직 그것들이 정의되지 않은 상태였기 때문에 동작하지 않았던 것이다. 

이를 해결하기 위해 defer를 script 태그 안에 넣어주면 된다.

아래와 같이 코드를 작성하면 되는 것이다.

<script defer src="script.js"></script>

 

그리고 지금 파파코 클론 코딩을 하고 있는 중인데, 아직 껍데기(HTML, CSS)만 만들어서 이건 다 만들고 정리 되면 한번에 업로드 할 예정이다.

 

아직 월요일이라니,,, 왜 주말은 너무 빨리 지나갈까?

이번주는 미니 프로젝트도 진행해야 하는데.. 머리가 아프다.

알고리즘도 눈덩이 처럼 불어나고... 물론 계속 공부해야 하는 분야인거 알고 시작 했지만 그렇다고 하나도 힘들지 않은 건 아니다.

아임 능이버섯