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

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 속성을 반드시 명시할 필요는

Margin은 요소의 가장 바깥영역이자 border의 바깥영역이다. 요소가 차지하는 너비에 포함된다. 음수를 가질 수 있으며, 내용들을 겹치게 할 때 사용할 수 있다. (padding은 음수불가능) background-color 반영되지 않고 투명하다. (padding은 배경색 반영) Margin의 속성값 length px, pt, cm 등의 길이단위 숫자. Default 값 : 0px % 부모 요소 너비에 대한 백분율 auto 브라우저 자동 설정. block요소를 중앙정렬할 때 유용하다 initial 이 속성의 기본값으로 설정 inherit 부모 요소의 속성값 상속 위, 아래, 오른쪽, 왼쪽 독립적으로 설정가능

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