hanol hanol

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를 적용하자...