choi95의 TIL📝

문제 이벤트 위임(Event Delegation)을 위해 최상위 부모 컨테이너에 이벤트 핸들러를 바인딩해줄 경우 해당 요소 내부에 자식 요소들이 또 한번 부모(ParentElem)-자식(ChildElem) 관계를 이루고 있고 두 요소가 레이아웃 상 완전히 겹쳐져 있을 때 문제가 발생하였다. 예를 들어 click 이벤트를 생각해보자. ParentElem에서 click 이벤트에 대한 후속 처리를 하고 싶지만 웹 상에서 ChildElem이 wrapper인 ParentElem과 위치 값이 겹쳐져 있고 크기가 같을 경우에는 ParentElem이 아닌 ChildElem이 계속해서 선택이 되어 원하는 결과를 얻지 못할 수 있다. /h1> p> (...) 다음과 같이 모든 요소를 감싸는 container인 leafl..

문제 window.addEventListener('scroll', () => { box.style.width = `${window.pageYOffset}px`; }); 다음과 같이 스크롤된 Window.pageYoffset값 만큼 임의의 박스 요소의 가로 너비를 동적으로 늘어나게 코드를 작성하였다. 화면에 랜더링된 임의의 박스의 가로 너비가 늘어나는 애니메이션 효과는 언뜻 보면 자연스러운 것처럼 보이지만 스크롤을 방향키를 통해 내려본다면 다소 부자연스럽게 끊기는 거를 확인할 수 있다. 이러한 현상을 해결하기 위해서 requestAnimationFrame의 동작 원리를 살펴보고 구현해 보고자 한다. requestAnimationFrame https://developer.mozilla.org/ko/docs/..

기초적인 내용이지만 마크업 상에서 가장 중요한 position 속성에 대해서 짧게 포스팅하고자 한다. 위치가 정적인 경우 relative, absolute, fixed를 알기 위해서는 우선적으로 기본 상태인 static에 대해서 설명할 필요가 있다. static 모든 태그들은 처음 상태가 static 기본 상태이기 때문에 따로 position을 지정해주지 않아도 됨 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓임 위치가 동적인 경우 앞서 살펴 본 static은 별도의 변경 없이 요소가 그대로 순서대로 쌓이는 반면에 아래 3개의 position들은 사용자가 임의의 위치 값(top, right, bottom, left)을 지정해줘야 한다. relative 별도의 프로퍼티를 지정하지 않는 이상 static과 동..

문제 header의 각 메뉴를 양쪽으로 띄어놓기 위해서 float 속성을 사용하였더니, 그 다음 오는 요소가 순차적으로 쌓이는 것이 아니라 현재 header가 위치하고 있는 영역에 중첩되어 랜더링되는 문제가 발생하였다. 문제해결_float 속성과 clearfix 결과적으로 float 속성에 대해서 얕게 알고 사용하여 발생한 실수였다. float element에 부유 속성을 주어 배치할 수 있는 방법 float으로 컨텐츠를 띄울 시 다음 내용은 빈 자리를 채우기 위해 포지션닝_브라우저 상의 오류 즉, 현재 문제가 발생한 화면 상에서 float-left와 float-right 속성을 준 두 개의 menu-container를 감싸고 있는 부모 태그인 inner 클래스 태그에 float값을 해제해 주는 추가 과..

예시 다음과 같이 각기 다른 두 개의 태그인 div와 img를 사용하여 배경 이미지를 랜더링하였다. 두 태그를 사용하였을 경우에 동일하게 화면에 랜더링되는 결과를 확인할 수 있다. 그렇다면 배경 이미지를 지정할 때 두 개의 태그 중에 아무 태그나 무분별하게 사용해도 괜찮을 것인가? 이와 관련되어 궁금증이 생겨 관련 사항에 대해서 검색해 보았고 마크업 언어에서 다음과 같이 중요한 개념이 선제됨을 알 수 있었다. Semantic-Web과 SemanticTags의 차이 시맨틱 웹(Semantic-Web) World-wide-web을 창안한 팀 버너스리가 제안한 차세대 웹 기술 웹 상에 존재하는 정보를 사람 뿐만 아니라 기계가 의미(Semantic)를 파악 및 사용자의 요구에 적합한 결과를 서비스 부여받은 자동..

문제 다음과 같이 리스트 항목을 JS 상에서 동적으로 추가되게끔 구현하였다. 하지만 리스트 항목이 현재 상위 요소의 view를 overflow하게 되면 새롭게 추가된 항목으로 스크롤 뷰가 자동으로 맞춰지지 않는 UX적으로 불편함이 발생하였다. 이를 해결하기 위해 처음에는 scrollElement의 scrollTop의 상대적 위치 값을 이용하였지만 이보다 더 간편하게 특정 요소 위치로 스크롤 뷰를 이동할 수 있는 방법이 있어 포스팅하고자 한다. 문제해결_element.scrollintoView() https://developer.mozilla.org/ko/docs/Web/API/Element/scrollIntoView element.scrollIntoView - Web API | MDN Element 인터..

https://choi95.tistory.com/manage/newpost/149?type=post&returnURL=https%3A%2F%2Fchoi95.tistory.com%2F149 https://choi95.tistory.com/manage/newpost/149?type=post&returnURL=https%3A%2F%2Fchoi95.tistory.com%2F149 choi95.tistory.com 이전 비밀지도 문제를 풀 때 이진수 값을 구하기 위해서 다음과 같은 함수를 만들어 주었다. function changeBinary(x, n) { let tmpArr = []; while (x) { tmpArr.push(x % 2); x = parseInt(x / 2); } while (tmpArr.le..

문제 무인도에 갇힌 사람들을 구명보트를 이용하여 구출하려고 합니다. 구명보트는 작아서 한 번에 최대 2명씩 밖에 탈 수 없고, 무게 제한도 있습니다. 예를 들어, 사람들의 몸무게가 [70kg, 50kg, 80kg, 50kg]이고 구명보트의 무게 제한이 100kg이라면 2번째 사람과 4번째 사람은 같이 탈 수 있지만 1번째 사람과 3번째 사람의 무게의 합은 150kg이므로 구명보트의 무게 제한을 초과하여 같이 탈 수 없습니다. 구명보트를 최대한 적게 사용하여 모든 사람을 구출하려고 합니다. 사람들의 몸무게를 담은 배열 people과 구명보트의 무게 제한 limit가 매개변수로 주어질 때, 모든 사람을 구출하기 위해 필요한 구명보트 개수의 최솟값을 return 하도록 solution 함수를 작성해주세요. 제..