차마시는 개발자

😸 Vue TIL 😽 Done it 😼 Vue 시작 vue는 data가 바뀌면 화면이 바뀌는 반응성 프레임 워크입니다. (반응성을 가진 data를 반응형 data라고 합니다.) vue를 살펴 보기 전에 this에 대해 조금 더 공부하면 좋을 것 같습니다. {{counter}} v-model , 요소 같은 양식을 지정하는 html 요소에 연결하는 디렉티브(양방향) v-if 조건문, v-for 반복문 😼 Vue Application & instance createApp : Application instance를 반환하며 이 instance는 application 컨테스트를 제공합니다. mount : Application 루트 컴포넌트의 템프릿을 렌더링하여, 제시된 DOM element의 innerHTML을 ..

Airbnb 후기(SCSS) 해당 과제는 scss를 이용하여 원하는 home page를 0부터 만들어 보는 것입니다. (많은 JS는 들어가지 않았습니다.) 우선.... css를 자유롭게 다루지 못하고 이론만 엄청 공부한 상태 였습니다. 그래서 미리미리 잠을 줄여가며 진행을 하였고 뭔가 빠른 시간 내에 빠르게 제작을 해봐라 라는 의미가 있는 과제인 것 같아 심플하고 명확하게 작성하도록 노력했습니다. 재미있게 봐주세요!!! 아하 저는 🛫Airbnb 사이트를 만들었습니다.🛬 * 맨 마지막에 영상도 있으니 마지막까지 ㅋㅋㅋㅋ * 이 사이트를 선택한 이유는 여행에 관심이 많고 사이트가 엄청 이뻤습니다. 그리고 초반 공유 경제가 뜰 때 관심이 많아서 사업도 할려고 했었다는 무서운 이야기 👹 🤡 1. 어디까지 js❓..

😸 CSS TIL 😽 Done it 😼 @extend 이미 작성해 놓은 선택자 가져오기 but!! @mixin을 주로 사용합시다. 추가로 @media에서는 @extend를 내부에서 선언해야만 사용가능합니다. 또한 선택자 폭발이라는 부작용이 있는데 중첩을 할 때 선택자 부분도 상속이 되면서 문제가 발생한는 것입니다. //1. .a { } .b { @extend a; }%: placeholder로 오로지 @extend 규칙을 확장해서 사용할 수 있는 것 %a { } .b { @extend a; }@mixin 사용 방법 // @mixin 사용법 @mixin a { } .b { @include a; }😼 함수 js에서의 function과 매우 유사합니다. 다만 @를 붙여줘야 합니다. @function a() {..

😸 CSS TIL 😽 Done it 😼 Sass 중첩 .container { &:hover { // &: 상위 선택자 } @at-root .item { // @at-root: root 선택자] } //flex-grow, flex-shrink, flex-basis 편리하게 사용하기 flex: { grow: 1, shrink: 0; basis: auto; } } 😼 Sass 변수 선언 $를 붙여서 사용합니다. 😼 유효볌위 변화시키는 flag !global: 전역 변수로 변환 $w: 200px !global; !default: 기존에 있는 변수 값 사용 유효범위 내에서 이미 있는 변수에 값을 재지정 했을 때 재지정 값을 사용X $w: 500px !default; 😼 보간 "#{변수, 값}" 을 사용합니다. 선..

😸 CSS TIL 😽 Done it 😼 다단 : 한페이지를 여러 조각으로 나누는 것 column-count: auto: 조각낼 갯수(= 1) column-width: auto: 지정된 값을 기준으로 최적의 너비를 자동으로 판단한다. column-rule:: 단과 단 사이에 선을 넣어주는것(border와 유사) column-gap: normal: 단과 단사이의 gap 😼 Filter blur(0): 흐림 처리 grayscale(100%): 무채색 invert(100%): 색상 반전 drop-shadow(x축거리 y축거리 그림자흐림정도 그림자색상): 그림자(배경색상이 없는 경우 설정된다.) brightness(1): 명도 contrast(100%)..

😸 CSS TIL 😽 Done it 😼 Grid container :2차원 layout에서 사용 justify-content: normal : column 위치 조작 align-content: normal : row 위치 조작 (normal == stretch) 명시적 딱 정해 놓고 있는 부분 grid-template-rows, grid-template-columns 암시적 명시적 이외의 부분 grid-auto-rows, grid-auto-columns grid-auto-flow grid-auto-flow: row: row 방향으로 쌓이게 만들겠다. grid-auto-flow: column: column 방향으로 쌓이게 만들겠다. grid-auto-flow: (row) dense: 빈공간 제거하며 row..

😸 CSS TIL 😽 Done it 😼 Float : 뜨다라는 의미이며 웹 page에서 어떻게 띄어서 텍스트와 함께 배치할 것 인가에 대한 속성(대부분 block요소로 변경(flex, grid 제외)) => 각 item에 float속성을 넣은 후 마지막 item의 형제에서 float요소를 해제 해줘야지 container가 item을 제어 할 수 있다. float control 마지막 item을 만들어 float이 없는 곳에다가 clear를 주어 float 요소 제거 .container에 overflow:hidden을 준다. (근본 없음) ::after로 가상으로 item을 만들어서 clear:both(flaot의 left, right 속성 제거)를 부여 .container 부분에 추가 flaot요소가 해..

TIL Done it drag & drop 처음 한 보게 된 부분이라서 신기한 부분이었습니다. 여기서 가장 중요한 부분은 결국 다시 rendering을 해줘야 한다는 것이었습니다. dragstart -dragover-> drop 이런 느낌입니다. 자세히 코드를 보면 요런 느낌입니다. $.addEventListener('dragstart', (e) => { e.preventDefault(); //drag이외의 event를 막기 위해 꼭!! 사용 e.dataTransfer.setData('~'); }); $.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; //'copy'도 된다. }); $..