sunny

안녕하세요. ^-* 지난번에 이어 [ animation ]두 번째입니다. 예제는 같은 것으로 준비했어요. 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 Document section{ padding:100px; } .box{ width:100px; height:100px; background:#343434; margin:auto; } @-webkit-keyframes bounce { 0%, 100%, 20%, 50%, 80% {-webkit-transform: translateY(0);transform: translateY(0)} 40% {-webkit-tra..

안녕하세요. ^-^ 오늘은 조금 어려운 animation을 해볼까 합니다. [ css ]만으로 animation을 만들 수 있답니다. animation은 만들기에 따라 무수히 많이 만들 수 있어요. 그래서 animation은 몇 번에 걸쳐 포스팅을 해볼게요. 그리고 기본적으로 많이 쓰는 대표적인 몇 가지만 소개해 볼게요. 우선 animation에 대해서 알아보겠습니다. [ css ]로 애니메이션을 만들려면 animation속성과 그 하위 속성을 지정해야 합니다. 이 속성은 중간 상태를 기술하지 않으며 중간 상태는 @keyframes를 이용하여 지정할 수 있습니다. animation 하위 속성을 알려드릴게요. animation-delay : 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 지정합니다. ..

안녕하세요. ^-^ 오늘은 안 예쁜 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..

안녕하세요. ^-^ 오늘은 css 하면서 정~~말 맘에 들지 않았던 input의 type중 checkbox와 radio 버튼을 커스텀 !! 내 맘대로 만들어 볼게요. checkbox와 radio버튼 만들어보신 분들 아시겠지만 참 커스텀이 어렵습니다. 색깔 바꾸기도 어렵고 말이죠. 그래서 저는 input은 그냥 감춰두고 lable을 이용해서 커스텀을 해볼 거예요. 일단 [ html ] 과 [ 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 Document input{ display:none; } input + label{ display:block; color:#39..

안녕하세요. ^-^ 오늘은 퍼블리싱을 하면서 가장 중요한 반응형을 해볼 거예요. 반응형은 정말 중요하지만 좀 어렵더라고요. bootstrap을 쓰는 것도 좋긴 하지만 내 맘대로 안 될 때가 많아서 생짜로 코딩하기도 하는데요. 넓이를 체크해서 web과 mobile을 알아서 구분해 주면 참 좋아요. 오늘은 jquery부분만 보면 될 것 같아요. 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 Document $(function ($) { onresize_header(); }); var check_header = true; $(window).on('resize', functio..

안녕하세요. ^-^ 오늘은 늘 필요하지만 막상 사용하려고 하면 한참을 찾아 헤매는 클립보드를 이용한 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 ]은 전과 동일합니다. 하지만 기억 안 나실지도 모르니 [ html ] 올려드립니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Document 그라데이션 배경을 만들어 봐요!! Colored by Color Scripter cs [ css ]도 빠르게 올려드립니다. [ css ]도 크게 변한 것을 없습니다. 한 가지를 추가했습니다. border에 투명도를 주면 조금 이상해질 수 있어요. 그래서 많은 검색 끝에 찾아냈답니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 *{ ma..

안녕하세요. ^-^ 전에는 선형그라데이션을 만들어 보았습니다. 오늘은 원형 그라데이션을 만들어 보겠습니다. 오늘도 아주 간단합니다. 간단한 [ 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..