sunny

안녕하세요. ^-^ 오늘은 안 예쁜 scroll bar를 커스텀 해보겠습니다. 아주아주 간단하게 가능합니다. 일단 scroll이 생겼을 때 가장 기본적인 모양을 보실까요? 이렇게 생겼죠. 좀 더 예뻤으면 좋겠어요. 바꿔 볼까요? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 Document section{ width:1000px; height:1000px; } ::-webkit-scrollbar { width: 5px;height:5px } ::-webkit-scrollbar-track { background-color: #dddddd; } ::-webkit-scrollbar-thumb {background: #000000;border-r..

안녕하세요. ^-^ 오늘은 늘 필요하지만 막상 사용하려고 하면 한참을 찾아 헤매는 클립보드를 이용한 a태그 내용 복사입니다. 많이들 보셨을 거예요. 이메일이나 주소 옆에 이모티콘을 누르면 주소 내용이 복사되는 것 말이에요. 자바스크립트로 만들 수도 있지만 내용이 참으로 복잡하더라고요. 그래서 간단하게 라이브러리를 이용해서 만들어 볼까 합니다. 오늘은 아주 간단하게 [ html ] [ css ] [ jquery ] 나누지 않고 [ html ]에 한방에 써보겠습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 4..

안녕하세요. ^-^ 전에는 선형그라데이션을 만들어 보았습니다. 오늘은 원형 그라데이션을 만들어 보겠습니다. 오늘도 아주 간단합니다. 간단한 [ html ]을 보실까요? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Document 그라데이션 배경을 만들어 봐요!! Colored by Color Scripter cs 짠 저번이랑 [ html ]은 동일합니다. [ css ]도 거의 동일합니다. 핵심이 되는 background만 조금 달라요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 *{ margin:0; padding:0; box-sizing:border-box; } body{ background:url(cat.jpg) no-repea..

안녕하세요. ^-^ 오늘은 배경색을 하나가 아닌 그라데이션으로 깔아 볼까 합니다. 버튼에도 쓰이고 배경색도 쓰이고 쓰임새가 참 다양하답니다. 먼저 [ html ] 코드 보여드릴게요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Document 그라데이션 배경을 만들어 봐요!! Colored by Color Scripter cs [ html ] 코드는 무척 간단하죠? [ css ]도 무척이나 간단하답니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 *{ margin:0; padding:0; box-sizing:border-box; } body{ background:url(cat.jpg) no-repeat center center; b..

안녕하세요. ^-^ 오늘은 전에 했던 거에 이어서 배경이미지를 blur를 줘서 흐릿~~ 하게 만들어 보겠습니다. [ html ]은 전과 동일합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 어서오세요 백그라운드 이미지 채도를 조절해 봅시다!! Colored by Color Scripter cs [ css ]도 비슷합니다. 일단 블러가 들어가지 않은 상태를 먼저 보여드릴게요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 *{ margin:0; padding:0; box-sizing:border-box; } section{ height:500p..

안녕하세요 ^-^ 오늘은 배경이미지의 채도를 [ css ]로 조절해 볼게요. 이미지를 일일이 [ 포토샵 ]으로 하려면 너무 일도 많고 귀찮아요. 우리는 디자이너가 아니니 더 힘들잖아요~~ [ css ]로도 아주 간단하게 조절할 수 있답니다. 저번에 했던 [ after ]를 이용해서 간단하게 만들어 볼게요. [ html ] 은 간단하게 이정도만 만들어 볼까요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 어서오세요 백그라운드 이미지 채도를 조절해 봅시다!! Colored by Color Scripter cs 저번에 만들었던 [ html ]과 동일합니다. [ css ]를 한번 볼까요? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1..

안녕하세요. ^-^ 오랜만에 코딩을 일기를 쓰네요. 오늘은 [ CSS ]를 해볼까 합니다. 사실 제가 쓰는 언어가 [ HTML ]과 [ CSS ] 거든요. 하지만 전문적으로 배운 것은 아니니 틀린 부분은 말씀해주시면 감사합니다.!! 오늘은 백그라운드 이미지에 투명도를 줘 볼 거예요. 백그라운드에 투명도를 주게 되면 그 위에 글씨마저도 투명도가 함께 들어가게 되는데 제가 이번에 보여드릴 것은 백그라운드 이미지에만 투명도는 주는 방법입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 어서오세요 백그라운드 투명도 조절해 봅시다!! Colored by Color Scripter cs [ HTML ] 코드는 간단하게 만들어 봤어요. 이제 [ CSS ]를 만들어 볼까요? ..

안녕하세요:) 오늘도 만들기는 쉽지만 찾아보기는 귀찮은 [ 스크립트 ]를 적어볼까 합니다. 바로 [ 원페이지 ]에서 사용하는 스크롤 부드럽게 이동하기입니다. 원페이지에서는 메뉴에 [ a ] 태그에 링크를 걸고 아래쪽으로 이동시키는 방법을 많이 쓰죠 [ a ] 링크를 눌렀을 때 뿅~~ 하고 뜨는 게 아니라 밑으로 스크롤이 부드럽게 내려가면~~ 얼마나 자연스러울까요~~ 1 2 3 4 5 6 $('a').click(function(){ $('html, body').animate({ scrollTop:$($.attr(this, 'href')).offset().top }, 500); return false; }) Colored by Color Scripter cs 스크립트 내용은 아주 간단합니다. 이 내용만 넣어..

안녕하세요:) 오늘은 웹페이지를 만들면서 늘 헷갈려하는, 찾아보게 만드는 [ ScrollTop ] 버튼을 만들어 봐요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('.scrollup').fadeIn(); } else { $('.scrollup').fadeOut(); } }); $(".scrollup").on('click', function (e) { e.preventDefault(); $('html, body').animate({ scrollTop: 0 }, 600); return false; }); Colored by Color Scripter cs 사실 저도 엄청 ..

안녕하세요 :) 오늘부터 코딩을 한번 시작해 보려 합니다. 이글은 공부를 정말 열심히 해도 다음날 되면 기억안나는 나를 위한 컨닝노트와 같은 용도로 제작이 되어졌음을 미리 양해 구해봅니다. 혹, 틀리거나 정말 너 답답해! 라고 생각하시는 분들은 댓글로 알려주시면 감사하겠습니다. 정말 답답하다고 해도 심한말은 하지 않기! 약속후에 댓글 부탁드려요 !! 처음 코딩을 배울때는 [ html ]과 [ css ]면 끝이었다. 웹퍼블리셔라는 직업을 목표로 공부하면서 --> ~그래 자바스크립트는 엄청 많이 쓰지! 라는 생각으로 [ 자바스크립트 ]도 공부했다. 물론 이렇게만 해도 웹페이지 만드는데는 문제가 없지만 프로그램은 날이 갈수록 많아지고 [ html ] 만으로는 부족해짐을 느끼게 된다. 요즘 [ React ], ..