2022-07-18

조지성·2022년 7월 18일
0

TIL

목록 보기
57/78
post-thumbnail

HTML / CSS

포지셔닝

TIL Position property

  • position 속성은 요소들이 화면에 어떻게 배치될지를 지정합니다.
    특이사항으로는, 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있습니다.
  • static은 기본값으로, 전적으로 페이지의 흐름을 따르며
    top, bottom, left, right, z-index 속성의 영향을 받지 않습니다.
  • relative 값은 원래 위치를 기준으로 top~right 속성값이 적용되도록 합니다.
    요소의 위치는 이동하지만 요소가 차지하는 공백의 위치는 유지됩니다.
  • absolute 값은 static이 아닌 첫 부모 요소를 기준으로 top~right을 사용하여 위치를 조정할 수 있습니다. 요소는 페이지의 문서 흐름에서 벗어나, 자리를 차지하지 않게 됩니다.
  • fixed는 부모 요소가 아닌 viewport를 기준으로 위치를 지정합니다.
    스크롤에 영향을 받지 않으므로, 다이얼로그 팝업처럼 움직이지 않는
    요소들에 유용하게 사용될 수 있습니다.
  • sticky는 요소가 스크롤로 이동할 수 있는 공간을 top~right 속성으로
    제한할 수 있습니다.

API

인터페이스

상호간에 소통을 위해 만들어진 접점

UI

사용자가 소통하기 위한 접점

API

애플리케이션에서 데이터를 읽거나 쓰기 위해 사용하는 인터페이스

이벤트 버블링&캡쳐링

JavaScript 25 이벤트 캡쳐와 버블링

  • event.stopPropagation() 을 통해서 이벤트 버블링을 막는다.
  • event.preventDefault() 는 해당 태그의 기본동작을 막는다.

JavaScript 유용한 Array API

  • map() : 메서드는 배열 내의 모든 요소 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

    "use strict";
    
    import { numbers,students } from './data.js';
    
    const result = numbers.map((number)=>number*2);
    
    console.log(students.map((student)=>student.eng));
    console.log(students.map((student)=>student.name));
    
  • some() : 메서드는 배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트 합니다.

    "use strict";
    
    import { fluits,students,numbers } from './data.js';
    
    console.log('some',fluits.some((fluit)=>{
        return fluit === '배';
    }));
    
    console.log('숫자에 7이상? ', numbers.some((number)=>{
        return number >=7;
    }));
    
    console.log('100점 이상',students.some(student=>{
        return student.math === 90;
    }));
  • every() : 메서드는 배열 안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트 합니다.

    "use strict";
    
    import { fluits,students,numbers } from './data.js';
    
    console.log('숫자가 모두 8이히? ',numbers.every(number=>number<=8));
    
    console.log('숫자가 모두 8이히? ',numbers.every(number=>number<=6));
    
    console.log('학생들의 수학 점수가 모두 80점 이상?',students.every(student=>student.math >= 80));
  • filter() :메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

    "use strict";
    
    import { fluits,students,numbers } from './data.js';
    
    console.log('짝수출력', numbers.filter(number=>number%2 ===0));
    console.log('홀수출력', numbers.filter(number=>number%2 ===1));
    console.log('영어 점수 90점 이상',students.filter(student=>student.eng>=50));
  • reduce() : 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

    리듀서 함수는 네 개의 매개변수를 갖습니다.

    • 누적 값 (acc)
    • 현재 값 (cur)
    • 현재 인덱스 (idx)
    • 원본 배열 (src)
    "use strict";
    
    import { fluits,students,numbers } from './data.js';
    
    numbers.reduce((acc,cur,idx,src)=>{
        //acc = 0
        console.log(acc,cur,idx,src);
        return acc + cur;
    }, 0)
    
    console.log(fluits);
    const result = fluits.reduce((arr,cur)=>{
        if(arr.includes(cur)===false){
            arr.push(cur);
        }
        return arr;
    },[]);
    console.log(result);
profile
초보 개발자의 성장기💻

0개의 댓글