본문 바로가기

웹코딩 배우기241

: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.
마우스에 반응 하는 메뉴바 - li a:hover See the Pen 마우스 반응 메뉴 목록 by nilgi (@nilgi) on CodePen. MENU#1 MENU#2 MENU#3 MENU#4 2022. 5. 11.
최대값, 최소값 찾기 Math.max / min See the Pen 최대값, 최소값 Math.max/min by nilgi (@nilgi) on CodePen. • 최대값 찾기 - Math.max function myArrayMax(arr) { return Math.max.apply(null, arr); } • 최소값 찾기 - Math.min function myArrayMin(arr) { return Math.min.apply(null, arr); } 2022. 5. 10.
CSS <a> 에 display를 걸었을 때 차이 See the Pen a display by nilgi (@nilgi) on CodePen. a에 display를 걸면 width를 적용할 수 있고 글자뿐 아니라 지정한 가로 크기도 링크 영역으로 잡힌다. 단순하지만 아주 중요한 기능이다. 2022. 4. 28.
최소값과 최대값 - 자바스크립트 See the Pen 최소값 최대값 찾기 by nilgi (@nilgi) on CodePen. 지닌 시간에 배운 숫자 배열 비교를 이용해 최소값과 최대값을 구하는 방법이다. nb_1.sort(function(a, b){return a-b}); document.getElementById("nb1").innerHTML = nb_1[0]; nb_2.sort(function(a, b){return b-a}); document.getElementById("nb2").innerHTML = nb_2[0]; 2022. 4. 26.
숫자 랜덤 배열 Math.random See the Pen 숫자 랜덤 배열 by nilgi (@nilgi) on CodePen. const mr1 = [525, 6, 45, 222, 5, 88, 109]; document.getElementById("mr_1").innerHTML = mr1; function myFunction() { mr1.sort(function(a, b){return 0.5 - Math.random()}); document.getElementById("mr_1").innerHTML = mr1; } - - - html. css는 하루에 여러개를 공부했는데 자바스크립트는 이해력이 떨어져 하루에 한 개 공부하기도 힘들어졌다. 내 나이가 어때서~ 하지만... 중년으로 산다는 건 청년으로 살았을 때 보다 새로운 것에는 더 많은 .. 2022. 3. 24.
forEach() - 요소를 한 번씩만 호출 See the Pen forEach() by nilgi (@nilgi) on CodePen. • forEach() 인수 value, index, array 사용 ngs.forEach(myFunction); document.getElementById("fe1").innerHTML = ngtxt; function myFunction(value, index, array) { ngtxt += value + ""; } • forEach() 인수 중 value만 사용하면 됨요 ngs2.forEach(myFunction); document.getElementById("fe2").innerHTML = ngtxt2; function myFunction(value) { ngtxt2 += value + ""; } 2022. 3. 1.
sort, reverse 정렬 - 자바스크립트 See the Pen sort() by nilgi (@nilgi) on CodePen. • sort() : 오름차순 정렬 • reverse() : 내림차순 정렬 숫자는 문자로 정렬하면 예로 2는 1보다 크기 때문에 22가 111보다 크다 판단하여 오류가 난다. 비교 기능으로 바로 잡아야 하는데 그 부분은 뭔 말인지 몰라 공부 중이다. 누구에겐 아주 쉬운 것이 나에겐 이렇게 어렵다. 2022. 2. 24.