땀나는 애

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 애니메..

[특이점] 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..

페이지나 박싱 넘어가는 글자 넘침현상 해결하기 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..

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

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

동래구청 홈페이지에 오신것을 환영합니다. /* 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..

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

아코디언 .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..