웹코딩 배우기293 오른쪽 요소부터 함수 걸기 - reduceRight(); See the Pen reduceRight() by nilgi (@nilgi) on CodePen. 지난번에 배운 reduce : 왼쭉부터(기분) 함수 걸기, reduceRight는 오른쪽 요소부터 [웹코딩 배우기/· JavaScript] - reduce() - 요소에 함수 걸기 num1.reduceRight(myFunction); function myFunction(total, value, index, array) { return total + value; } ♥ 2022. 8. 9. reduce() - 요소에 함수 걸기 See the Pen reduce() : 요소에 함수를 실행 by nilgi (@nilgi) on CodePen. let plus = no.reduce(myFunction); function myFunction(total, value, index, array) { return total + value; } let plus2 = no2.reduce(myFunction, 1000); function myFunction(total, value) { return total + value; } ※ 참고 reduce()는 배열 왼쪽에서 오른쪽으로 요소를 호출하고 reduceRight()는 오른쪽에서 왼쪽으로 호출한다. 2022. 8. 4. 가로 메뉴바 스크롤 시 특정 위치 고정 See the Pen 메뉴바 스크롤 특정위치 고정 by nilgi (@nilgi) on CodePen. position: sticky; /* 특정 위치에 멈춤 */ top: 5px; /* 위에서 5px 떨어진 곳에 */ 2022. 8. 1. filter() : 필터 적용 See the Pen filter() : 필터를 적용 by nilgi (@nilgi) on CodePen. 요소에 필터를 걸어 요소를 다시 배열한다. const ftn = nums.filter(myFunction); function myFunction(value) { return value > 100; } 오랜만에 공부하니까 영 모르건네... 2022. 7. 26. 가로 메뉴바 - 메뉴 구분선 만들기 See the Pen 메뉴바 구분 선 by nilgi (@nilgi) on CodePen. .ul1 li { float: left; border-right: 1px solid #fff; } .ul1 li:last-child { // 메뉴의 마지막 자식 요소에는 border-right: none; // 오른쪽 테두리를 넣지 않는다. } 2022. 7. 26. 메뉴바 고정 - position: fixed; position: fixed;를 사용하여 왼쪽 메뉴바를 고정한다. 그럼 오른쪽 내용 영역만 스크롤된다. 직업 패스파인더 아델 호영 히어로 왼쪽 사이드바 메뉴를 특정 위치에 고정합니다. position : fixed; 태그를 사용합니다. overflow: auto; 를 사용하여 영역을 벗어나는 부분의 스크롤 유뮤를 자동으로 합니다. 화면을 스크롤해보면 왼쪽 메뉴바는 그대로 있고 오른쪽 내용만 스크롤됩니다. .... .... .... .... .... 참고 글 nilgi.tistory.com/455 CSS position position: static; 특정 지정 값에 영향을 받지 않고 문서의 정상적인 흐름에 따라 배치된다. position: relative; top, right, bottom, left 값.. 2022. 7. 6. 숫자 배열 비교 - 자바스크립트 See the Pen sort 숫자 배열-비교 by nilgi (@nilgi) on CodePen. 지난 시간에 문자 배열의 순서 sort를 배웠다. 예를 들어 숫자 2와 100을 문자로 인식해 비교하면 2는 100보다 크다고 판단한다. 비교(a - b)를 이용해서 숫자의 크고 작음을 판단해 올바르게 정렬할 수 있다. sn.sort(function(a, b){return a - b}); a - b 값 음수 : b값이 더 크다는 뜻 - a가 작으니 앞으로 보낸다. a - b 값 양수 : a값이 더 크다는 뜻 - a가 크니 뒤로 보낸다. 2022. 7. 5. 자바스크립트 - .map(); See the Pen map() by nilgi (@nilgi) on CodePen. • map() - 배열의 데잍터를 변환하여 새로운 배열을 만든다. no1.map(myFunction); document.getElementById("m1").innerHTML = no2; function myFunction(value, index, array) { return value * 10; } • value만 사용 시 index, array 생략 function myFunction(value) 2022. 6. 16. :hover:not(.class) 마우스에 반응하지 않게 하기 See the Pen :hover:not(.class) by nilgi (@nilgi) on CodePen. li a:hover:not(.job) { // 목록 중 .job만 마우스에 반응하지 않게 한다. background-color: #333; color: #fff; } 직업 패스파인더 아델 호영 히어로 2022. 5. 23. 문자가 있는 숫자 배열 - 숫자 순서, 문자 순서 See the Pen Untitled by nilgi (@nilgi) on CodePen. • 숫자 순서대로 displayCup(); cup.sort(function(a, b){return a.year - b.year}); displayCup(); function displayCup() { document.getElementById("wcup").innerHTML = cup[0].type + " " + cup[0].year + " " + . . . } • 문자 순서대로 displayCup2(); function myFunction() { cup2.sort(function(a, b){ let x = a.type.toLowerCase(); let y = b.type.toLowerCase(); if (x y).. 2022. 5. 19. min, max 메소드 - 자바스크립트 See the Pen min, max mathod by nilgi (@nilgi) on CodePen. • min function myArrayMin(arr) { let len = arr.length; let min = Infinity; while (len--) { if (arr[len] max) { max = arr[len]; } } return max; } 2022. 5. 12. 이전 1 ··· 3 4 5 6 7 8 9 ··· 27 다음
