📍codepen 링크 https://codepen.io/a6ovestudio/pen/QWVgRMy input & datalist ... codepen.io - 예시 📍1. 게이지 만들기 ✅type="range" 만 이용 - 예시 - 기본적인 게이지 형태 - min, max 값을 설정할 수 있음 📍2. 눈금이 있는 게이지 만들기 ✅type="range" 와 datalist를 활용 - input의 list 어트리뷰트와 datalist의 id를 동일하게 설정 - datalist 내에 option element 가 가진 value의 숫자 만큼 눈금이 정해진다 - 예시 📍3. 부제목이 있는 드롭다운 만들기 ✅type="range" 와 datalist를 활용, options의 value에 숫자 대신 문자열 입력 -..

📍타겟 이미지 📍문제 풀이 position: absolute로 모두 겹쳐서 가운데 정렬한 다음 nth child로 left 조절하기! 📍코드 📍결과 100% match 📍리뷰 :nth-child() 앞에 div를 생략해도 결과는 같다

position: absolute 를 통해서 가운데 정렬을 만드는 방법 canvas 엘리먼트가 있다고 가정 (div와 같음) #canvas1 { border: 5px solid black; position: absolute; top: 50%; left: 50%; } 여기까지만 하면, element좌상단 좌표를 기준으로 정가운데 정렬(top, left 50%) 된다. 여기에다 element를 왼쪽 오른쪽으로 이동시켜주면 가운데 정렬이 될것이다. transform: translate(-50%, -50%) 을 적용해주면 된다! #canvas1 { border: 5px solid black; position: absolute; top: 50%; left: 50%; transform: translate(-50%,..

타겟 이미지 flex 를 적용하고 flex-wrap: wrap 속성을 이용해서 width를 초과하는 element는 다음 행으로 내리자! 그리고 자식 태그는 3개만 만들기 내 코드 아웃풋 결과 Score: 600.69 {668 bytes}, 100% match 정리 flexbox가 정말 유용하다!

타겟 이미지 제일 먼저 떠오르는 것은 z-index 가운데 낀 요소를 relative position으로 주고 양쪽 요소들을 옮겨볼 수도 있을까 했지만 생각이 나질 않음 내 코드 코드 양을 줄여보려고 클래스도 딱딱 맞아 떨어지는 것이 아니게 조금 지저분하게 했다 아웃풋 결과 Score: 601.04 {625}, 100% match 정리 margin 대신 flex layout으로 중앙을 잡은 것으로 byte 수가 조금 늘어난것 같지만.. 이게 더 정확한 방법이라 본다

타겟 이미지 개별 요소를 골라 스타일 하기 vs grid 방식으로 6개 만들고 color on/off 하기? 방법이 떠올랐다. 내 코드 border-radius는 4가지를 사용할 경우 왼쪽 위 모서리부터 시계방향으로 적용됨 아웃풋 결과 Score: 602.26 {543}, 100% match 정리 다음에는 grid를 써서 6개의 아이템을 만들고 그 안에서 세분화해봐야겠다