@mixin @mixin은 여러번 재활용 할 스타일들을 정의해서 필요한 곳에서 사용하는 개념이다. 만들어 둘 스타일을 @mixin 규칙으로 정의하고 필요한 곳에서 @include 규칙을 통해 사용할 수 있다. @mixin은 특정한 값을 인수로 보내고 매개변수로 받아서 사용할 수 있다. 이 매개변수에는 기본값을 지정해줄 수 있다. 조건문을 통해서 조건을 줄 수 있다. 조건문은 삼항 연산자를 사용해서 작성할 수도 있다. if(condtion, true, false) 참고로 if 뒤에 괄호를 쓸 때 띄어쓰기를 하면 expected "(" 라는 에러가 난다. @mixin은 단순히 css의 속성과 값만 적는 것이 아니라 Sass에서 정의할 수 있는 다양한 내용을 @mixin 내부에서 활용할 수 있다. @mixin..

변수 :root { --color-primary: royalblue; --color-danger: red; --color-success: yellowgreen; } .box { width: 200px; height: 70px; border: 4px solid; } .primary { background-color: var(--color-primary); } .danger { background-color: var(--color-danger); } .success { background-color: var(--color-success); } 사용자 지정 CSS 속성 사용하기 (변수) - CSS: Cascading Style Sheets | MDN 사용자 지정 속성(CSS 변수, 종속 변수)은 CSS 저작자..

Grid Items 1 .container { width: 300px; height: 300px; border: 4px solid; display: grid; grid-template-rows: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); } .container .item { border: 2px solid; background-color: orange; font-size: 20px; } 아이템의 위치를 변경하고 싶을 떄 사용할 수 있는 것이 위 그림의 그리드 컨테이너 주변에 있는 저 번호들, 즉 라인이다. 라인은 1부터 시작하는 양수 단위의 숫자와 -1부터 시작하는 음수 단위의 숫자를 동시에 가진다. gird-row / grid-column grid..

Float 색상을 따로 입력하지 않으면 그 요소가 가지고 있는 글자 색상을 참고하게 된다. 기본적으로 글자 색상은 검정색이기 때문에 color를 지정하지 않으면 border도 검정이 된다. 기본적으로 HTML의 요소들은 위에서부터 아래로 수직으로 쌓이게 되는데 float을 이용해서 수평 정렬을 시켜줄 수 있다. float을 사용하면서 가장 중요한 것은 float 속성이 더이상 사용되지 않는다는 것을 알려주기 위해 해제(clear)를 해줘야 한다는 것이다. 가상 요소란 가상의 요소를 만든 뒤 거기에 css 요소를 추가할 수 있는 선택자를 의미한다. 가상 요소는 필수적으로 content라는 속성이 있어야지만 동작한다. .clearfix::after { content: ""; display: block; cl..

TodoList Drag&Drop 더보기 더보기 import App from "./App.js"; const $target = document.querySelector(".App"); new App({ $target }); 더보기 const API_END_POINT = "..."; export const request = async (url, options) => { try { const res = await fetch(`${API_END_POINT}${url}`, options); if (!res.ok) { throw new Error("API 호출 오류"); } return await res.json(); } catch (e) { alert(e.message); } }; 더보기 import { req..