코딩기록

input range를 커스텀 하려고 한다.인풋 버튼이 인풋 밖으로 튀어나오지 않으면 css만으로도 가능하지만여차저차해서 테스트로 만들어봤다. 이미지 보통  .range_fill 인풋 색깔 채워주기 위해 만들었다. .state_image { transition: .2s all; background: salmon; width: 40px; height: 40px; text-indent: 100%; white-space: nowrap; overflow: hidden;}.emotion_state.bad .state_image {background: skyblue;}.emotion_state.good .state_i..

HTML 삽입 미리보기할 수 없는 소스 day 6 챌린지는 hover 연습 같다. 기존 챌린지에서는 원 말고도 다른 컴포넌트드이 더 있지만 원 움직이는 것만 해도 연습이 될 것 같다. https://100dayscss.com/days/6/ Day 6 - 100 Days CSS Challenge 100 Days CSS Challenge Profile: Who of you knows how many social media profiles you have already created? For a refreshing twist, you can also create one yourself. 100dayscss.com

HTML 삽입 미리보기할 수 없는 소스 alternate - 애니메이션이 끝났을 때 자연스럽게 반대방향으로 이동하게 함. https://developer.mozilla.org/ko/docs/Web/CSS/CSS_animations/Using_CSS_animations CSS 애니메이션 사용하기 - CSS: Cascading Style Sheets | MDN CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프 developer.mozilla.org

https://100dayscss.com/about/ What is this? - 100 Days CSS Challenge 100 Days CSS Challenge For 100 consecutive days, I've written HTML and CSS snippets as a creative learning process for myself. I used CodePen to write and save my code and published my results every day on this website. After accomplishing my project on da 100dayscss.com 좋은 사이트를 발견했다. 하루에 뭐라도 2개 이상 하기에서 후보지가 늘었다.. HTML 삽입 미리보기할..

프로젝트 완성하고 얼른 회고록 쓰고싶어서 쓰는 기록 ㅎㅎ 프로젝트 링크 주소입니다! https://yyeojung.github.io/pixel_art_maker/html/paintBoard.html Pixel Art Maker Grid Width Reset Eraser yyeojung.github.io ❤️ 개발 의도 간단하게 그림판을 만들어보고 싶어서 찾아보던 중 픽셀아트로 만들면 좀 더 특별하게 만들 수 있을 것 같아 선정하게 되었습니다. 📅 개발 기간 총 1일(디자인, 개발) 🖥️ 사용 기술 Design tool: Figma Editor: VScode Lang: css, javascript 배포: Github.io 🎨 디자인 💡 그림판이 픽셀아트인 만큼 배경도 그와 어울리는 배경으로 하고싶었습니다...

1. 중첩, 상위선택자 참조 .container {background: yellow; h1{background:none; color: #000; &:hover{color:#fff} } p{color:tomato; font: { size: 20px; weight:bold; } span{background:burlywood;} } } - &가 상위선택자를 가리키는 일을 함. - font-size, font-weight와 같이 중복되는 속성도 묶어서 스타일 주기 가능. .container { background: yellow; } .container h1 { background: none; color: #000; } .container h1:hover { color: #fff; } .container p { ..