hanol hanol

화살표 함수 (Arrow Function)렉시컬 스코프화살표 함수는 자신이 정의된 위치에서의 this 값을 상속받습니다.따라서 화살표 함수 내에서 this를 사용할 때, 이는 화살표 함수가 정의된 외부 스코프의 this와 동일합니다.문법적 특징function 키워드를 사용하지 않고, 더 간결한 문법을 사용합니다.const myArrowFunction = () => { console.log(this); }일반 함수 (Regular Function)동적 스코프 일반 함수의 경우, this는 함수가 호출될 때 결정됩니다. 이는 해당 함수가 어떻게 호출되었는지에 따라 달라집니다.문법적 특징function 키워드를 사용하여 정의합니다.function myRegularFunction() { console.log(t..

css Layout 대표적으로 flex와 grid가 있음 flex 가로축(row), 세로축(column) 주로 1차원적으로 정렬을 할 때 사용한다 grid 가로축, 세로축을 2차원적으로 정렬을 할 때 사용한다 flex가 보편적으로 쓰이지만 웹사이트 전체를 그리드로 잡는경우 더 유용하게 쓰임 적절하게 상황에 따라 조합해서 쓰면 좋음 display : grid grid를 사용하겠다!는 뜻 grid의 속성 display : grid grid-template-columns grid-template-rows grid-template-area grid-gap (grid-column-gap grid-row-gap) display : grid; padding : 10x; grid-template-columns: rep..

🥕 웹 브라우저란? 자바스크립트를 실행시켜주는 엔진이다. 즉, 브라우저가 코드를 해석해주는 것이다. ( HTML, CSS, JavaScript를 해석해주는 엔진) 🥕동기적 vs 비동기적 ? - 동기적 동기적인 작업은 순차적으로 실행됨. 한 작업이 시작되면 그 작업이 완료될 때까지 다음 작업이 대기. ex) 코스요리 : 차례대로 먹어야 다음을 먹을 수 있음 - 비동기적 비동기적인 작업은 순차적으로 실행되지 않음. 한 작업이 시작되면 다음 작업이 기다리지 않고 즉시 실행됨. ex) 고기집 : 목살,삼겹살 먹다가 라면 먹다가 동시에 다함. 🥕 자바스크립트 (싱글 스레드) 자바스크립트는 원래 동기적으로 처리되는 언어이다. ( 한 번에 한 가지 일 밖에 처리할 수 없다 ) => 이렇게 되면 브라우저에서 오래 걸리..

🥕 SCSS 란? ( Syntactically Awesome StyleSheet의 약어 ) Sass의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) => 웹에서는 직접 동작하지 않기 때문에 CSS로 컴파일(Compile)함 🥕 SCSS 왜 쓸까? 개발의 효율을 올리기 위해 등장한 CSS 전처리기 언어 1. 코드의 재활용성 2. 가독성 => CSS에서 보이던 단점을 보완함 🥕 중첩(Nesting) 상위 선택자의 반복을 피하고 가독성이 좋게 작성 가능 .box { margin: { top: 10vh; left: 20vw; }; padding: { bottom: 40vh; right: 30vw;..

💡 Flex란 무엇일까? 부모 요소인 div.container를 Flex Container라고 부르고, 자식 요소인 div.item들을 Flex Item이라고 부른다. 즉 , 컨테이너가 Flex의 영향을 받는 전체 공간이고 => 부모 요소 안에서 자식요소인 아이템들이 배치되는 것임. 이것들을 분리해서 적용하는 것이 가장 중요함!! 부모 속성(container) => flex-direction / flex-wrap / justify-content / align-items / align-content 자식 속성(item) => flex / flex-grow / flex-shrink / flex- basis / order Flex Container에 적용하는 속성들 일단 display : flex를 적용하자...

버튼2를 누르면 transform을 translate 시켜주어서 왼쪽으로 100vw만큼 이동시켜준다 애니메이션을 주자!! transition : transform 0.5s; transform 요소가 변경이 될때 서서히 변경해주기 = > 0.5초 float : left; => 가로로 나란히 inner 요소들을 정렬해줌.