휘몰아치는 잡생각

웹사이트를 돌아다니면 쉽게 볼 수 있는 이 스위치 버튼. 나는 이번에 처음 만들었다. 코드펜 뒤져보니 저 쪼끄만 거에 들어가는 코드의 양이 무수하던데 나중에 내가 수습하기 어려울까봐 최대한 줄여서 구현했다. 웬만하면 자바스크립트도 안 쓰고 싶어서 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..

jQuery 연습 메뉴 펼치기 / 접기 아이콘 변경 addClass / removeClass / hasClass / if문 홈페이지 같은 데서 흔히 보이는... 리스트에 아이콘을 넣어서 메뉴를 펼치면 아이콘이나 스타일이 변하고 어쩌고 저쩌고... 그런 리스트를 만들고 싶었다. 간단해 보였는데... 처음에는 slideToggle(), toggleClass() 이 두 개로 뻘짓하다가 이건 뭔가 아니다 싶었다. 그 위치에 있는 요소를 바꿔치기 하고 싶은 거라 원래 있던 클래스는 없애고 새로운 클래스를 넣어줘야 했고, 슬라이드 옵션과 스타일 바꾸기를 동시에 구현, 그리고 클릭할 때마다 이벤트가 발생해야 됐다. 무작정 저기다 클래스를 넣는다고 능사가 아니더라(당연하지만...). 그래서 다른 방법을 찾아보았다. C..

jQuery 연습 3단 메뉴 slideToggle로 펼치기/접기 메뉴 슬라이드라고는 마우스 올리면 튀어나오고 치우면 숨겨주는 것밖에 모르고 있었던 나... 이번엔 메뉴를 클릭하면 나오게 구현하고 싶은데 2단 메뉴는 그렇다 치고 3단을 만들려니 이유도 모르게 자꾸 꼬여서 하루종일 머리를 굴렸다. slideToggle도 처음에 써봤을 때 자꾸 서브 메뉴를 누르면 엉뚱한 메뉴까지 말려들어가버려서 if문으로 한참 뻘짓하다가 드디어 방법을 찾았다. WEB Design Hue Saturation Value Share INTERIOR MARKETING POSTER 3단 메뉴 HTML 구조 nav { width: 150px; } ul { padding: 0; } li { list-style: none; line-hei..

태그가 들어간 요소를 누를 때마다 화면 번쩍번쩍 새로고침 되는 게 열 받아서 스크립트를 찾아봤다. 나한테 필요해서 박제해둔다. $('a').click(function(e) { e.preventDefault(); }); 잠시 헤맨 게 어이없을 정도로 아주 초간단...😉 웹디자인기능사 시험의 영향으로 이미지건 뭐건 일단 a 태그부터 박고 보는 버릇이 생겼는데, 여러모로 찾아보니까 그게 꼭 필수는 아닌 것 같다. 오히려 불필요하게 남발된 a 태그가 웹페이지 동작에 불편함을 주기도 하고 코딩도 복잡해지고... 아무 생각 없이 넣다가도 이게 왜 필요하지? 싶을 때가 많았다. 그래도 아직까진 태그 넣고 보는 게 권장사항인가? 몰겠다..... 언젠간 알게 되겠지

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..