기록저장소

자주 쓰일듯 한 css n번째 요소 선택 :nth-child(3)//3번째 하위 요소 :nth-child(n+3)//3번째 하위 요소부터 끝까지 모두 :nth-child(-n+3)//첫번째부터 3번째까지 모든 하위 요소 :nth-child(n+3):nth-child(-n+5)//3번째부터 5번째까지의 하위요소 :nth-child(2 of .highlight)//.highlight 클래스를 가진 하위 요소 중 두번째 요소 .highlight:nth-child(2) //두번째 요소이면서(and) highlight 클래스를 가진 요소 특정 요소 선택 @scope (.card){ img{ border-color: red; } } //card 클래스 내부에 있는 img 만 선택 @scope (.card) to (..

css li { float: left; } /* one item */ li:first-child:nth-last-child(1) { width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { wid..

https://blog.hivelab.co.kr/%EA%B3%B5%EC%9C%A0-vertical-align-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0-1%EB%B6%80/ [공유] Vertical-align 파헤치기! – 1부 | Hivelab Blog [공유] Vertical-align 파헤치기! – 1부 들어가며 안녕하세요. 하이브랩 UI개발2팀 도재경, 우현주입니다. 각자 UI개발1팀과 SEP실에서 열심히 과제를 진행했지만 서로 같은 고충을 느꼈던 저희!!! 그 blog.hivelab.co.kr https://blog.hivelab.co.kr/%ea%b3%b5%ec%9c%a0-vertical-align-%ed%8c%8c%ed%97%a4%ec%b9%98%ea%b8%b0-2%e..

에서 기본으로 생기는 카운트 버튼 제거하기 input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } 해당 css 를 추가해주면 우측 버튼이 없어지고 별도의 처리없이 숫자값을 받아올 수 있음

디자인을 입히려고 selectbox를 ul, li로 만들어줬다. 다른 화면의 select는 괜찮은데 특정 화면에서만! 테이블에 들어있는 select에서! option리스트가 흐릿하게 보이는 현상 ㅠ 무슨문제인지 감이 안잡혀서 f12에서 css를 하나씩 제거해봄, 결론은 overflow때문! overflow는 option 종류가 많을경우에 무한으로 늘어질수없으니 height와 overflow-y:auto를 같이 적용했었음.. 이문제를 해결하려고 css overflow cloudy, css overflow blur, css overflow blurry 등등 검색했는데 https://stackoverflow.com/questions/49349337/chrome-text-blur-with-overflow-ysc..

https://okayoon.tistory.com/entry/input-%ED%83%80%EC%9E%85-range-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0%EC%BB%A4%EC%8A%A4%ED%85%80-%EC%8A%A4%ED%83%80%EC%9D%BC input 타입 range 스타일 수정하기_커스텀 스타일 ++ 추가 사항 태그로 제작한 부분이 모바일에서 터치 이동이 안되는 이슈가 있었습니다. 그래서 어쩔수 없이 태그를 사용하여 커스텀하는 형식으로 작업했습니다. 기록상 글을 작성합니다. 글 okayoon.tistory.com

https://wazacs.tistory.com/34 select 태그 커스텀 하기, 혹은 직접 만들기 (feat. javascript) 1. Select CSS Customizing Select 태그의 외형은 주로 각 브라우저에서 정의 합니다. 보다 시피 크롬(왼쪽), IE(오른쪽) 이 똑같이 보이면서도 미세 하게 다름니다. 공통적으로 둘 다 그리 예쁘게 생기진 wazacs.tistory.com

https://shubamba.tistory.com/65

https://codepen.io/aaroniker/pen/ZEYoxEY?editors=0100 2020 Toggles ... codepen.io

브라우저 크기에 따라 테이블 반응형 표현하기 https://codepen.io/jyvujtky/pen/bGYbegB bGYbegB ... codepen.io