분류 전체보기111 [ JavaScript ] insertBefore()로 원하는 요소 앞에 요소를 추가하기 insertBefore() 자바스크립트에서 DOM을 조작하는 메서드 중 하나로 특정 요소를 다른 요소 앞에 삽입할 수 있는 코드. parentNode.insertBefore(newNode, referenceNode); parentNode 요소를 추가할 부모 노드 newNode 새롭게 추가하고 싶은 노드 referenceNode newNode를 넣을 위치를 기준으로 할 때 해당 위치의 요소 HTML 코드 item1 item3 JS 코드 //부모 노드 가져오기 const itemList = document.getElementById('itemList'); //새로운 리스트 아이템 만들기 const newItem = document.createElement('li'); newItem.textContent = .. 2023. 8. 4. [ JavaScript ] for 반복문과 forEach 메서드에 대하여 for 반복문 break나 continue와 같은 제어문을 사용할 수 있다. 초기화, 조건식, 증감식을 사용하여 반복동작을 정밀하게 제어할 수 있다. 배열의 인덱스를 직접 접근할 수 있어 특정 인덱스를 기준으로 반복하는 것이 가능하다. 반복문 내에 다양한 제어와 로직을 처리 시 유연성을 제공한다. 코드가 더 복잡하거나 길어질 수 있다. const numbers = [1, 2, 3, 4, 5]; let sum = 0; for(let i=0; i { sum += num; }); console.log(sum); //15 2023. 8. 3. [ JavaScript ] 정규식과 관련된 편리하고 유용한 메서드를 알아보자 정규식(Regular Expression)은 문자열을 처리하는데 아주 유용한데, 문자열을 검색한다거나, 추출한다거나, 패턴을 찾거나 등등 JavaScript에서는 정규식을 다루기 위해 여러가지 유용한 메서드를 제공하고 있다. 정규식과 관련된 유용한 메서드를 알아보자. 1. test() 주어진 문자열이 정규식과 일치하면 true, 그렇지 않으면 false로 불리언 값으로 반환한다. const regex = /hello/; const str = 'hello regex'; const result = regex.test(str); console.log(result); // true 2. exec() 주어진 문자열에서 정규식과 일치하는 부분을 찾아 배열로 반환. 첫번째 요소는 일치한 부분 문자열, 나머지 요소는 .. 2023. 8. 3. [ JavaScript ] scrollIntoView()로 스크롤을 원하는 위치로 이동하기 개인적으로 요즘은 무한 스크롤 방식을 많이 사용해서 스크롤을 많이 내렸을 때 빠르게 상단으로 이동하고 싶은데 막막할 때가 많다. 그럴 때 위와 같이 스크롤을 상단으로 이동하는 버튼이 있으면 참 편리하다는 생각을 많이 했다. 그래서 해당 버튼을 구현해 보았고,이렇게 스크롤을 원하는 위치로 쉽고 간단하게 이동하는 방법으로는 scrollIntoView() 메소드를 활용할 수 있다. scrollIntoView 메서드 사용법 원하는 DOM요소에 이 메소드를 호출하면 해당 요소가 뷰포트 내로 보이도록 한다. const targetElement = document.getElementById('targetElement'); targetElement.scrollIntoView(); 위의 코드는 targetElement라.. 2023. 8. 3. [ css ] 스크롤 상관없이 동일한 위치에 요소를 고정시키기 position: fiexd 위와 같이 우리가 화면의 스크롤을 마구마구 내려도 로고, 카테고리, 내가 찜한 콘텐츠가 있는 상단에 위치한 네비게이션 바는 동일한 위치에서 움직이지 않음을 볼 수 있다. position: fixed CSS 속성 중에 position: fixed를 하면 이렇게 고정할 수 있다. fixed는 요소를 문서의 뷰포트에 상대적으로 고정시키는 역할을 하는데 스크롤이 되더라도 항상 뷰포트의 특정 위치에만 고정되어 있다. fixed의 특징은 항상 요소가 뷰포트 기준으로 위치가 고정되고 다른 요소들과의 겹침을 피할 수 있다. 그래서 다른 요소의 배치를 고려하지 않아도 된다. 또한 부모 요소 위치에도 영향을 받지 않는다. 헤더, 네비게이션 바, 공지사항, 광고 배너 같이 항상 표시되어야 하는 요소를 고정시키는 경우나 모달.. 2023. 8. 3. [ css ]요소가 부드럽게 나타나고 사라지게 하려면 opacity를 쓰자 이전에 getBoundingClientRect()에 대해 포스팅에도 쓰였던 이미지다. 이번에는 버튼이나 헤더에 위치한 로고와 네비게이션바를 자세히 보면 스크롤을 내리고 올릴 때 부드럽게 사라지고 부드럽게 나타나는 것을 유심히 보자. display: none 으로도 설정할 수 있지만 해당 요소가 레이아웃에서 완전히 제거되기 때문에 다른 요소가 해당 공간을 채우게 될 수도 있고 요소의 위치가 변경되기도 한다. opacity 의 경우에는 여전히 레이아웃에 존재하면서 단지 보이지 않을 뿐이다. 마우스를 해당 요소의 위치에 가지고 가면 포인터가 보이는데, 보이게 하기 싫다면 pointer-events: none 으로 해주면 포인터가 표시되지 않는다. 해당요소의 공간을 사용하지 않으려면 visibility: hid.. 2023. 8. 3. 이전 1 2 3 4 5 6 7 8 ··· 19 다음
