목록쭈구리 코딩 (38)

땀나는 애

[css] animation _애니메이션 사용하

Animaiton https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations CSS 애니메이션 사용하기 CSS3 애니메이션은 엘리먼트에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜 줍니다. 애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어집니다. developer.mozilla.org CSS animaiton CSS스타일을 다른 CSS 스타일로 부드럽게 전환 - 키프레임 : 중간 상태를 나타내준다 자바스크립트보다 더 활용성이 좋을때가 있다. 브라우저 최적화 가능, 브라우저 부하 줄여줌 animation-하위속성 animation-delay 애니메..
쭈구리 코딩/내가 공부하려고 보는 것 2020. 1. 22. 11:17
[css] hover_ 모양 확대 (transform:scale)

[특이점] 1. 도트점 원의 모양을 after로 만듬 :after {content:"";display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;box-sizing:border-box;border:1px dashed #bedcdd;border-radius:50%;-webkit-border-radius:50%;} 2. transform:scale 사용 [transform] CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다. 시각적 서식 모델 씨에스에스 시각적 서식 모델 ( visual formattin..
쭈구리 코딩/내가 보고 쓰려고 모은 것 2020. 1. 22. 10:13
[Error] 태그 글자 넘침 현상, 말줄임표

페이지나 박싱 넘어가는 글자 넘침현상 해결하기 width:500px;overflow:hidden;word-wrap:break-word;word-break:break-all; (영어 넘침 해결 위에서는 word-break:break-all 넣음) 말 줄임표 1줄 말 줄임표 width:500px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap N줄 말 줄임표 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; line-height: 1.2e..
쭈구리 코딩/내가 보고 쓰려고 모은 것 2020. 1. 9. 09:59
[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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 @media all and (max-width:600px){ /* 모바일 테이블 가로스크롤 */ .mb_scroll{position:relative} .mb_scroll .tbBox{position:relative;padding-top:30px;width:100%;overflow:auto} .mb_scroll table{width:640px} .mb_scroll::before{position:absolute;top:0;left:5..
쭈구리 코딩/내가 보고 쓰려고 모은 것 2019. 12. 31. 13:16
[html+css] hover_ 이미지hover시 올라가기up

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 .imgUp a {height: 100%; transition: transform .2s ease, padding .2s ease;display:inline-block} .imgUp a:hover {padding-bottom: 50px; transform: translate(0,-50px);} http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
쭈구리 코딩/내가 보고 쓰려고 모은 것 2019. 12. 31. 11:43
[html+css]hover_이미 hover시 다른 이미지 바뀜

동래구청 홈페이지에 오신것을 환영합니다. /* mc_often */ #mc_often { width:900px; height:290px; transition:height 2s ease-in-out; box-shadow:0 10px 20px rgba(0,0,0,0.2); } #mc_often li span {background-image:url(mc_quick_icon1.png)} #mc_often { background:#fff; } #mc_often li { float:left; width:180px } #mc_often li a {position:relative; display:block; height:145px; border-top:1px solid #e0e0e0; border-right:1px s..
쭈구리 코딩/내가 보고 쓰려고 모은 것 2019. 12. 31. 11:38
[Script] dropdown menu_드롭다운메뉴 2,3뎁스

.zeta-menu li { float: left; list-style: none; position: relative; } .zeta-menu li:hover { background: pink; } .zeta-menu li.expand { background: white; } .zeta-menu li.expand>a { color: hotpink; } .zeta-menu a { color: black; display: block; padding: 10px 20px; text-decoration: none; } .zeta-menu ul { background: #eee; border: 1px solid silver; display: none; padding: 0; position: absolute; lef..
쭈구리 코딩/내가 보고 쓰려고 모은 것 2019. 12. 31. 11:26
[script] toggle_아코디언+옆에 화살표 바뀜

아코디언 .join1_box{position:relative;border:1px solid #bbb;padding:20px;margin-bottom:10px} .join1_box input{display:none} .join1_box h4 {position:relative;font-size:18px;font-weight:bold;color:#292929;width:100%} .join1_box h4 strong{;font-size:16px;font-weight:bold;color:#ef1c26;} .join1_box h4 label{position:absolute;top:0;right:0;width:31px;height:30px;background:url(../../images/join/chk_off.g..
쭈구리 코딩/내가 보고 쓰려고 모은 것 2019. 12. 31. 11:24
Prev 1 2 3 4 5 Next