스크롤 기능이 필요없을 때도 스크롤이 보임 투두리스트의 리스트가 박스에서 넘치는 경우 스크롤되는 기능을 넣었다. overflow-y: scroll 그런데 스크롤기능이 필요없을 때도(리스트가 많지 않을 때) 스크롤바가 보이는 것이 거슬렸다. 그래서 스크롤기능이 필요없을 때는 스크롤이 숨겨지고, 스크롤기능이 필요할 때는 스크롤이 보이도록 하는 디자인을 원했다. > ➡️ 직접 체험해보기 링크! 타입스크립트 학습을 위해 만든 Todo List 토이프로젝트입니다. ➡️ 깃허브 Skill: TypeScript, React, Styled-components, recoil --

Todo리스트를 만들면서 input창에 관련해서 겪었던 문제들, 해결방법들을 모아봤습니다. 토픽 별로 관련된 코드부분만 간략하게 표현했습니다! > ➡️ 직접 체험해보기 링크! 타입스크립트 학습을 위해 만든 Todo List 토이프로젝트입니다. ➡️ 깃허브 Skill: TypeScript, React, Styled-components, recoil placeholder가 아니라 value를 설정해서 그 값을 수정하기 placeholder는 클릭 시 사라지는데 value로 설정하면 그 텍스트에서 수정가능함. 할일을 입력하고 저장하면 그 입력값이 각각 리스트 input의 value초기값으로 들어감. value에 들어갔기 때문에 수정하려고 하면 입력된 값에서부터 수정이 가능. input 자동완성 끄기 할일 수정기

HTML에 CSS, JavaScript 파일을 연결하는데에는 두가지 방법이 있다. html에 style, script태그를 넣어 직접코드 작성하기(본 포스팅에서는 다루지 않는다) html과 css, javaScript 파일을 따로 만든 후 html에 연결하기 보통 2번의 HTML과 CSS, JavaScript 파일을 따로 관리하는 방법을 추천하는데 그 방법만 정리해보려고 한다! 과제를 하다가 열심히 CSS와 JavaScript 코드를 짜고 라이브서버로 확인했는데 적용이 안돼서 내가 잘못썼나하고 봤는데 알고보니 연결을 안했었다... 앞으로는 그러지 말자! 1. HTML파일에 CSS파일 연결하기 rel 속성 : 'stylesheet' href 속성 : 'css파일경로' type 속성 : 콘텐츠의 미디어 타입 ( HTML5에서는 태그의 type 속성의 기본값이 “text/css”로 설정되기 때문에, type 속성을 반드시 명시할 필요는

강의에서 미션을 주셔서 나만의 게임화면을 만들어보았는데 만들면서 살짝 애먹었던 부분들을 정리해보려고 합니다 start와 빨간 time바, time을 나란히 하는 것 배경이미지 안쪽 상단에 검을 5개 표시하는 것 html:상단 스타트부분과 배경부분 CSS:스타트부분 요소들 나란히 하기, 배경크기 정하기, 검5개 넣기 1. start와 빨간 time바, time을 나란히 하는 것 - Flex start, time바, time을 각각의 태그로 만들어준 후 나란히 배치하고 싶었는데 3가지(h1, div, h1)태그가 다 block태그여서 나란히 하는 것이 힘들었다. margin이나 넓이 등등 바꿔보다가 검색해서 해결 완료 flex : 레이아웃배치 전용으