[TIL] 20240214 2일차

● 강의 1주차 멜로디쉐어 숙제

 

- fixed-top 과 sticky-top의 차이점

fixed-top을 사용하면 위에 여백이 보인다

sticky-top을 사용하면 여백이 남지 않고 깔끔하게 동작하게 된다

 

 

● 강의 2주차 데일리모토 숙제

 

- class를 지정한 element에 접근하는 jQuery

<img class="weathericon" src="">

// $('img.weathericon') 으로 접근할 수 있다.

 

- element의 속성(attr) 값만 변경하고 싶을 때 jQuery

<img class="weathericon" src="">

$('img.weathericon').attr("src", link)
// 1번 줄의 img element의 속성값(attributes) 중 "src"의 값을 link로 변경하라 는 뜻

 

 

★ 오류 해결

1. 태그(<>)를 제대로 닫았냐 여부로 요소들이 의도대로 배치될지, 그렇지 않을지 결정된다.

태그를 제대로 닫지 않았더니 버튼과 앨범 커버 이미지가 여백 없이 붙어있다.

태그를 제대로 닫았더니 의도한 대로 동작했다

 

2. 코드 작성 후 오류가 발생했을 때 오타가 있는지도 체크해야 한다.

① ~ ⑥의 navbar에 오타를 일부러 내고 어떤 식의 결과가 나오는지 살펴보자

① ~ ⑥의 navbar

①에 오타, 글씨 메뉴가 좌측으로 이동함

②에 오타, 겉으로 보기에 문제 없음

③에 오타, 갑자기 글씨 메뉴가 사라지고 버튼이 생김

④에 오타, 글씨 메뉴는 보이는데 옆에 버튼도 생김

⑤에 오타, 겉으로 보기에 문제 없음

⑥에 오타, 겉으로 보기에 문제 없음

 

겉으로 보기에 문제가 발생하지 않은 것 같은 경우도 있지만, 글씨가 오른쪽 정렬이 되지 않는다거나 메뉴 버튼이 보이는 식의 겉으로 보이는 문제가 발생하는 경우도 있다. 오타가 한 글자만 나도 의도대로 동작하지 않는 경우가 생길 수 있다.

 

3. VSCode를 사용할 때 확장 프로그램 'Jinja'가 활성화되어 있으면 주석이 제대로 작동하지 않을 수 있다.

Jinja가 활성화된 상태로 HTML 코드를 편집할 때

Javascript 코드 블럭에서 주석 처리를 진행하려고 하면 Javascript 주석이 아닌 HTML 주석으로 처리하려고 한다.

HTML 편집 때 Jinja가 활성화 되어있는 상태라면 비활성화 후 작업을 하면 해결할 수 있다.

(관련 링크: https://github.com/microsoft/vscode/issues/144174)