본문 바로가기

웹코딩 배우기249

자바스크립트 - key, entries, includes : 요소 반환 표시 See the Pen key, entries, includes by nilgi (@nilgi) on CodePen. • key() : 요소를 반환하여 키로 표시 const keys = car.keys(); • entries() : 요소를 반환하여 키와 값으로 표시 const c1 = car1.entries(); • includes() : 요소가 배열에 있는지 확인 car2.includes("lexus"); 2022. 9. 22.
자바스크립트 - indexOf, lastIndexOf : 요소 위치 See the Pen indexOf(), lastindexOf() by nilgi (@nilgi) on CodePen. • indexOf(): 요소 위치 ["닐기", "일기", "릴기", "닐기", "닐귀"]; let ng1 = name1.indexOf("닐기") + 1; // 요소가 없을 때 -1로 표현 // 요소가 두 번 이상 나오면 첫 번째 위치 표시 • lastindexOf(): 요소 마지막 위치 ["닐기", "일기", "릴기", "닐기", "닐귀"]; let ng2 = name2.lastIndexOf("닐기") + 1; // indexOf는 i가 소문자고 lastIndexOf는 i가 대문자. // 자바에서 순서는 0부터 시작하므로 +1을 해준다. 2022. 9. 20.
CSS - 배경 그라디언트(그라데이션) See the Pen 배경 그라디언트 by nilgi (@nilgi) on CodePen. .g1 {background-image: linear-gradient(0deg, red, white);} .g2 {background-image: linear-gradient(45deg, red, white);} .g3 {background-image: linear-gradient(90deg, red, white);} .g4 {background-image: linear-gradient(180deg, red, white);} .g5 {background-image:-webkit-linear-gradient(left top, blue, white);} .g6 {background-image:-webkit-linear.. 2022. 9. 20.
자바스크립트 - 요소 찾기 find, findIndex See the Pen find(), findIndex() by nilgi (@nilgi) on CodePen. • find(): 요소 찾기 let gf1 = no1.find(myFunction); function myFunction(value, index, array) { return value > 24; } // 조건에 맞는 첫 번째 요소를 표시 • findIndex(): 요소를 찾고 그 요소의 위치 표시 document.getElementById("gr_fi").innerHTML = no2.findIndex(myFunction); function myFunction(value, index, array) { return value > 24; } // 조건에 맞는 첫 번째 요소의 위치 표시 2022. 9. 15.
자바스크립트 - every(); some(); See the Pen every(): 모든 요소 검사 by nilgi (@nilgi) on CodePen. • every(): 모든 요소 검사 let every_num = gr_nums.every(myFunction); function myFunction(value) { return value > 100; } • some(): 일부 요소 검사 let some_num = gr_nums1.some(myFunction); function myFunction(value) { return value > 50; } 2022. 9. 13.
오른쪽 요소부터 함수 걸기 - 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.