우당탕탕 개발일기

모달창 배경 만들기 https://penguingoon.tistory.com/249 [CSS] 모달창 + 어두운 배경 반드는 기본적인 방법 안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄 penguingoon.tistory.com 모달창 화면 크기에 맞춰 중앙에 위치하게 하는 css position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-tr..

기존 체크박스, 체크되었을 때 체크박스, 비활성화일때 체크박스의 CSS가 전부 다른 상황이었다. 기존 체크박스와 체크되었을 때는 여기를 참고하여 쉽게 작성을 했지만, disabled는 css가 먹히지 않는 상황! @import "../../../asset/css/_variable.scss"; input[type="checkbox"] { &#check-box { display: none; + label { cursor: pointer; /* 기본 */ &::before { /* 생략 */ } } /* 체크했을 때 */ &:checked { + label::before { /* 생략 */ } } /* 여기 안됨!!!!!!! */ &:disabled { content: ""; background-color: ..

redux를 설치했더니 store를 생성하는 createStore에 취소선이 그어져있었다. 최신 버전의 redux가 redux-toolkit을 추천하고 redux-toolkit에서는 createStore가 사용되지 않기 때문이라고 했다. 프로젝트에서도 redux-toolkit을 쓸 예정이라, redux-toolkit을 드디어 배워보기로 했다. redux로 골머리를 앓았던 기억이 생생하여... 😇 조금 겁이 났으나, 조금 만지작거리고나니 redux보다 훨씬 쉬운 것 같다..! 나는 붕어라서, 내가 했던 거를 기록해보려고 한다. 설치 // NPM npm install @reduxjs/toolkit 폴더 구조는 📂 src |-- index.js |-- App.js |-- store |-- store.js |-..

HTML 파일 작성시에 JS파일(외부 파일) 연결하려면 태그 안에서

padding-top을 %로 주면 해당 비율에 맞는 크기로 직사각형이 그려진다. 즉, 가로만 수정하면 가로 비율에 맞게 height 영역이 잡힌다.