<현록/>

딴짓을 하게된 계기를 기록하고 대처하는 차원에서 딴짓 원인을 기록하기로 하였다. 사용자는 아래와 같이 3가지 항목중 하나를 드롭박스 옵션에서 골라 선택할 수 있다. 내부계기(딴짓을 하게 된 원인이 나로부터 발생한 경우: 피로감, 스트레스 등) 외부계기(딴짓을 하게 된 원인이 외부로부터 발생한 경우: 스마트폰 알림, 전화 등) 잘못된 계획(딴짓을 하게 된 원인이 잘못된 계획으로부터 발생한 경우) [배운점] 1. 콜백함수의 선언과 호출 // createNote.js // 메모 레이아웃 그리기 export function createNote(noteValue, selectValue) { const notesContainer = document.querySelector('.notesContainer'); // ..

(진행배경) 메모를 추가하고 엔터 버튼을 누른 뒤 창을 새로고침하면, 메모 컨테이너 안에 있던 이미지가 아래 사진과 같이 밖으로 벗어나는 오류가 발생하였다. [문제 - Enter 이벤트 발생에 따른 요소 간 충돌문제] (문제 상황) 엔터를 치지 않았을 때는 해당 문제가 발생하지 않고, 엔터를 치고 웹을 재로드 하면 문제가 발생하는 것으로 보아 엔터 이벤트 발생과 관련된 오류인 것으로 추정되었다. (문제 원인) 원인은 사용자가 내용을 편집할 때 'Enter' 키를 누르면 웹 브라우저는 내부적으로 태그를 삽입하여 줄 바꿈을 처리하는 문제였다. 메모를 기록하고 엔터를 치면 로컬스토리지에 해당 내용이 저장 되도록 소스 코드를 작성해 놨는데, 이 과정에서 이미지를 감싼 div가 p태그 내부에 새롭게 만들어지며 충..

Shadow 기능 .white-box { box-shadow: 0.5px 0.5px 2px 1px #eee; --> 1번째 2번째 값: 그림자의 x,y 축 이동량 --> 3번째 값: blur --> 4번째 값: spread 테이블 박스 테두리를 왼쪽만 주고 싶으면 CSS로 border-left : 1px solid black 이런거 넣으면 됩니다. [div의 속성-복습] ㅇ div는 가로행을 전부 차지한다. (display: block의 속성) ㅇ 기본 정렬은 왼쪽 정렬이다. 111 222 333 따라서, 화면에서 이렇게 보임. 111 222 333 따라서, bootstrap을 활용해 이렇게 코드 짜면 1111 2222 md 사이즈 이하일 때는, 1111 2222 md 사이즈 이상일 때는 이렇게 보인다...

.box { width: 200px; 박스 넓이 background-color: cadetblue; 박스 색깔 margin: 30px; 상하좌우 여백 padding: 40px; 박스 내부 여백 border: 2px solid grey; 박스 테두리 및 색깔 border-radius: 10px; 테두리 두께 display: block; 가운데 정렬 margin-left: auto; 왼쪽 여백 자동 가운데 정렬 margin-right: auto 오른쪽 여백 자동 가운데 정렬 } 부모태그 width만 단독사용하면 보이지 않는 테두리 생성 자식태그에서 width:20% 이면 부모태그의 20% 너비만 차지하겠다는 뜻 div는 기본적으로 display:block 내재되어 가로로 한 행을 전부 차지한다 --> 방지하..