qwef

scss에서 반복문도 쓸 수 있음. .container{ @include box(800px, royalblue); @include center; @for $i from 1 to 5{ .item:nth-child(#{$i}){ @include center; @include box(100px * $i); } } } @for 인덱스이름 from 1부터 to n까지 참고로 .item:nth-child(#{$i}) 여기서 #{$i} 이거는 저렇게 뭔가 값을 계산용도가 아니라 인덱스 용도로 쓸 때는 #{변수명} 이렇게 접근 해야 함. 보간법이라고 함. background-image: url('https://picsum.photos/200/300?random=' + $i); 이런 식으로도 가능함.

브라우저에서 제공하는 클라이언트의 컴퓨터에 데이터를 저장할 수 있는 저장소이다. localStorage.getItem(key); localStorage.setItem(key, value); localStorage.removeItem(key); localStorage.clear(); clear()는 모두 지우는 것이다. LocalStorage는 쿠키보다 많은 용량, 그리고 문자열 뿐만 아니라 객체와 원시타입도 저장할 수 있다. LocalStorage는 사용자의 개인정보말고 . 아무래도 쿠키도 그렇고 이것도 그렇고 보안에 민감하다. 사용성을 위한 저장이나, 로그인 정보도 여기에 저장하려는 사람이 있기는 있다. 한다면 패스워드는 해시화 해서 저장하려나. 서버에서도 같은 해시 쓰고. 서버에서 패스워드는 해시값으..

const $img = document.querySelector('img'); $img.addEventListener('contextmenu',(e)=>{ e.preventDefault(); }); prevent가 막다. 라는 뜻임. contextmenu에 관한 이벤트가 넘어오고, 그것의 기본을 막으라는 것이니, 콘텍스트메뉴가 나오지 않음.

split('@') @ 기준으로 자름, 나눠서 배열로 나옴 replace('@','%'); @를 %로 바꿈

@mixin center{ display: flex; justify-content: center; align-items: center; } @mixin box($size : 150px) { width:$size; height: $size; background-color: aqua; } .container{ width: 400px; height: 400px; background-color: orange; @include center; .item{ @include center; @include box(200px); background-color: royalblue; } } 미리 정의해 두는.. 마치 예전에 따로 중복되는 속성 재사용 하려고 클래스 만들어서 썼었던 것 처럼.. 근데 얘네는 인자도 넣을 수 있음..

div{ width: 20px + 20px; height: 40px - 20px; font-size: 30px * 2; margin: (20px / 2); padding: 30px % 7; } 연산자와 피연산자 끼리 붙여도 떨어뜨려도 상관없다. 인지해야 할 것이, / 나누기는 ()괄호로 묶어줘야 한다. 왜냐하면, 우리 css 쓸 때 생각해보면 background : url(~~~~) no-repeat center / cover 이런 식으로 '구분자'로 /를 쓴다. 그래서 나누기는 괄호로 묶어야 한다. 아니면 calc() 속성 그냥 쓰던지.. (단, calc() 사용할 때는 연산자와 피연산자 끼리 떨어뜨려 놔야 함.)

.box{ $size : 100px; position: fixed; top: $size; .item{ $size:200px; width: $size; height: $size; transform: translate($size); background-color: orange; } } 이렇게 지역변수로 쓸 수 있음. 또, 재선언도 가능함. 참고로 얘는 호이스팅이 안됨.

.box{ font : { weight: bold; size: 40px; family: sans-serif; } margin : { top:100px; left:200px; left: 200px; } background: { color: orange; } } 이렇게 네임스페이스로, font-weight, font-size 등 그렇게 되는거임.

// 이 주석은 컴파일 시 삭제 /**/ 이거는 유지

"liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", "savePath": "/css", }, { "format": "compressed", "extensionName": ".min.css", "savePath": "/css", } ], "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.includeItems": [ "/scss/*.scss" ] .min.css 는 공백, 줄바꿈 없는 형식으로 저장된다. "extensionName": ".css", 는 exports 될 파일. "liveSassCompile.settings.in..