2021/08 2

[ETC] 웹 페이지의 HTML 구조 한 눈에 보기

클론 코딩을 하거나 주어진 과제를 통해 HTML 구조를 잡을 때 쉬우면서도 어렵게 느껴진다. 그 이유는 시맨틱 태그를 적절하게 사용해야하며 어떻게 구조를 잡는 것이 더 효율적인지 고민에 빠지기 때문이다. 이럴 때 나는 잘 만들어진 홈페이지의 구조를 보는데 솔직히 코드만 보고는 명확하게 파악하기 힘들다. 이를 해결하기 위한 방법을 찾아보다가 아주 좋은 팁을 발견하게 되었다. 바로 크롬 개발자 도구 console창에 들어가서 다음과 같이 DOM 요소를 조작하는 것!!! 사용 방법 document.querySelector('*').style.boxSizing = 'border-box'; document.querySelectorAll('div').forEach(e => e.style.border = "1px s..

ETC 2021.08.31

[패스트캠퍼스] Rubber duck debugging : 두 번째

두 번째 과제는 가격 별 상품 추천하는 프로그램을 구현하는 것이었다. 사용자가 가지고 있는 돈의 액수를 입력받아 해당 금액에 가장 근접한 가격의 상품을 리턴하면 된다. 초반에 작성한 코드는 다음과 같다 [실제 본인 구현부] // 아래에 getItemByAmount 함수를 작성하세요. const getItemByAmount = (data, amount) => { // 사용자의 입력 유효값 범위 지정: 숫자가 아닌 경우, 0인 경우 null if(amount === false || amount === 0) { return null; } // 살 수 있는 상품을 저장하기 위한 변수 let index; for(let i=0; i amount - item.price >= 0) .sort((a, b) => b.pr..

개발회고📚 2021.08.06