728x90 반응형 > 메모68 [SASS] & 의 사용법 &의 역할&는 부모 선택자를 참조하는 특수한 키워드&를 사용하면 현재 규칙의 부모 선택자를 참조&:last-child.parent { color: blue; &:last-child { color: red; }}&:last-child는 부모 요소의 마지막 자식 요소를 선택하는 CSS 의사 클래스입니다.&:last-child 는 .parent:last-child 로 해석&:last-child의 역할.background { display: flex; justify-content: space-between; width: 100%; height: 100vh; position: absolute; padding: 0 1rem; span { display: block; h.. 2024. 5. 5. [JS] 헷갈리는 querySelectAll과 Jqeury 포함 범위 .abc (클래스 abc) 를 가진 모든 div 포함 .abc 클래스를 가진 모든 것에 이벤트 리스너 달기제이쿼리$(".abc").on("click", function () {}); - [0] 이런 식으로 순서지정해줄 필요없음querySelectAll document.querySelectorAll('.abc')[0].addEventListner('click', function () {});- 한 번에 전부 다 선택하는 방법은 없음.$(.abc ) 셀렉터로 찾은 요소 중에 x번째 요소만 선택 제이쿼리$(".abc").eq(x).on("click", function () {});querySelectAlldocument.querySelectorAll('.abc')[x].addEventListner('clic.. 2024. 4. 27. [CSS] rem 또는 em 계산 방법 (변환) 폰트 사이즈가 19.2px 일 때, rem 으로 변환 하는 방법. ( html 의 font-size 는 16px 일 때의 경우 ) 참고 사이트 PX to REM converter (instantly and bidirectional) (nekocalc.com) PX to REM converter (instantly and bidirectional) PX ↔︎ REM conversion tables PixelsREM1px0.06rem2px0.13rem3px0.19rem4px0.3rem5px0.3rem6px0.4rem8px0.5rem10px0.6rem12px0.8rem14px0.9rem15px0.9rem16px1rem18px1.1rem20px1.3rem24px1.5rem25px1.6rem28px1.8rem32.. 2024. 4. 22. sort, map, filter 함수 (2) 준비물 - 버튼 누르면 - products 안에 있는 자료들을 다나가순 정렬하고 - 카드들 싹 지웠다가 products 순으로 다시 만들기 HTML 더보기 가격순 정렬 다나가순 정렬 #sort1 생성 가나다 순 정렬 방법 // 14-1) 가나다 순 정렬 var 어레이 = ["가", "다", "나"]; 어레이.sort(); // $("#sort1").click(function () {}); console.log(어레이); 변수(어레이) 에 .sort() 사용하면 됨. 콘솔에 출력 다나가 순 정렬 방법 // 14-1) 다나가순 정렬 var 어레이 = ["가", "다", "나"]; 어레이.sort(function (a, b) {}); $("#sort1").click(function () {}); console.. 2024. 4. 9. sort, map, filter 함수 (1) array 정렬하는 법 - .sort() 사용 array - 순서 개념 有 - 정렬 가능 .sort() - 문자 정렬 - .sort() 이거만 붙이면 됨. var 어레이 = ["a", "c", "b"]; 어레이.sort(); console.log(어레이); 문자 역순 정렬 var 어레이 = ["a", "c", "b"]; 어레이.sort(function(a, b) { if (a > b) { return -1; // a가 b보다 크면 a를 더 앞으로 배치 } if (a < b) { return 1; // a가 b보다 작으면 b를 더 앞으로 배치 } return 0; // 같으면 변경하지 않음 }); var 어레이 = ["a", "c", "b"]; 어레이.sort().reverse(); console.log(.. 2024. 4. 8. [JS] Ajax 정리 (3) 상품 더보기 버튼 누르면 상품3개(데이터) 가져오기 - get 이용 HTML 더보기 JS // -- 13-1) Ajax var products = [ { id: 0, price: 70000, title: "Blossom Dress" }, { id: 1, price: 50000, title: "Springfield Shirt" }, { id: 2, price: 60000, title: "Black Monastery" }, ]; products.forEach((a, i) => { var 템플릿 = ` ${products[i].title} 가격 :${products[i]["price"]} `; $(".row").append(템플릿); // console.log(a); console.log(products[i].. 2024. 4. 7. [JS] arrow function 문법 (화살표 함수) arrow function 문법 var pants = [28, 30, 32]; pants.forEach(function(a){ console.log(a) }); pants.forEach((a) => { console.log(a) }); 동일 pants.forEach( a => { console.log(this) }); arrow function은 파라미터가 하나면 () 소괄호 생략가능 함수 중괄호 안에 return 한 줄 밖에 없으면 { } 중괄호와 return 동시에 생략가능 let 함수 = function(){ console.log('안녕') } let 함수 = () => { console.log('안녕') } 주의) 이벤트리스너 콜백함수안에서 this를 써야하면 arrow function 쓰면 의도.. 2024. 4. 7. [JS] Ajax 정리 (2) 준비물 HTML Card title 가격 : 70000 JS// -- 13-1) Ajax var products = [ { id: 0, price: 70000, title: "Blossom Dress" }, { id: 1, price: 50000, title: "Springfield Shirt" }, { id: 2, price: 60000, title: "Black Monastery" }, ]; var 템플릿 = ` ${products[0]["title"]} 가격 : ${products[0].price} `; $(".row").append(템플릿); 3개 만들거니까 반복문 사용var products 변수가 array 로 시작하니까forEach 문을 써준다.products.forEach((a) => { v.. 2024. 4. 5. [JS] Ajax 정리 (1) GET / POST 비교GET요청 - 서버에 있던 데이터를 읽고싶을 때POST요청 - 서버로 데이터를 보내고 싶을 때 GET, POST 요청을 저렇게 날리면 , 브라우저가 새로고침된다.= Ajax 사용하기 AJAX란?- 서버에 GET, POST 요청을 할 때 새로고침 없이 데이터를 주고받을 수 있게 도와주는 브라우저 jQuery로 AJAX요청하기 GET 요청$.get('https://codingapple1.github.io/hello.txt');여기 경로 데이터 갖고옴$.get('https://codingapple1.github.io/hello.txt').done(function(data){ console.log(data)});데이터 확인하기= .done 아니면 .then 뒤에 붙이고 콜백함수넣.. 2024. 4. 3. 이전 1 2 3 4 5 6 7 8 다음 728x90 반응형
