휘몰아치는 잡생각

웹사이트를 돌아다니면 쉽게 볼 수 있는 이 스위치 버튼. 나는 이번에 처음 만들었다. 코드펜 뒤져보니 저 쪼끄만 거에 들어가는 코드의 양이 무수하던데 나중에 내가 수습하기 어려울까봐 최대한 줄여서 구현했다. 웬만하면 자바스크립트도 안 쓰고 싶어서 html과 css만 사용했다. 스위치도 만드는 데에 버튼이나 태그를 활용하는 등 여러 방법이 있지만, 나는 일단 태그의 type="checkbox" 를 활용해서 만들어 보려고 한다! 기본 구조는 이렇다. 크게는 input과 label, 스위치 가운데에 움직이는 버튼을 그려줄 span 태그도 넣었다. div를 기준으로 둘의 위치도 고정해두려고 묶어놨다. .wrapper { position: relative; } #switch { position: absolute;..

내가 필요해서 저장해두는 사이트 https://uigradients.com/ uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com 임의로 지정되어 있는 그라데이션 스타일을 css 코드로 받아낼 수 있는 사이트. 전체적으로 마음에 드는 색감이 많아서 좋다... 컬러가 조금 맘에 안 드는 부분은 임의로 조정하면 되겠다. 그라데이션 스타일은 liner-gradient로 고정이고, 코드가 심플한 게 장점이자 단점이지만 간단하고 있어보이게 배경을 깔 때 좋을 것 같다. 어떤 색이 좋을지 마땅..

CSS 윤곽선 둥글게~ 이런 폼을 만들어 보던 도중에... 의 아웃라인에는 border-radius 스타일이 먹히지 않는다는 걸 알게 되었다. LOREM IPSUM Alias ipsa labore veritatis quos Include HTML 부분 /* RESET */ * { box-sizing: border-box; padding: 0; margin: 0; } body { background: #36384f; } body, a, p, input, button, span { font-size: 14px; text-decoration: none; color: #36384f; } li { list-style: none; cursor: pointer; } button { cursor: pointer; bo..

CSS 연습 안에 정렬 워낙 레이아웃을 야매로 짜다 보니 나중에 요소를 추가 할 때마다 정렬이 제대로 들어맞지 않는 경우가 있다. 그냥 안 되는 건 아닐 것이다. 컴퓨터랑 코드는 잘못된 게 없다. 당연하게도 내가 코딩을 잘못한 거다... 여러 이유가 있겠지만 내가 주로 빼먹고 실수하는 것은 float를 지정해주지 않아서. 이번에도 한참 작업하다가 왜 이래? 이랬는데 찬찬히 살펴보니 또 같은 실수를 하고 있었다. 아주아주 기초적인 거지만 더이상 까먹지 말자는 다짐으로 글을 남긴다. 😣 Lorem ABC DEF * { box-sizing: border-box; padding: 0; margin: 0 auto; } li { list-style: none; } a { font-size: 14px; text-de..

아주 기본적으로 외워야 하는 기본 세팅 css, jqeury, js파일 연결 어딜 가든 비슷한 HTML jquery 링크는 헤드 안에, script 파일 링크는 본문 뒤 앞에. 나중에 내용이 길어지면 헷갈리기 때문에... 주석처리는 큰 틀부터 확실하게 해둔다. @charset "UTF-8"; * { padding: 0; margin: 0 auto; box-sizing: border-box; } a, p, span, button { text-decoration: none; color: #616161; } li { list-style: none; cursor: pointer; } button { cursor: pointer; border: 0; background: transparent; } ::select..