HTML&CSS (5) 썸네일형 리스트형 [CSS] 양쪽 이미지 opacity처리하는 슬라이드 위이미지와같이 양쪽 opacity가 깔리고 그 아래로 슬라이드가 보여지는 디자인 작업시 마크업과 css 슬라이드 마다 다르겠지만 swiper의 경우 슬라이드를 감싸는 div에 overflow:hidden이 걸려있어 양쪽이 안보임. 그럴 경우 overflow:inherit !important; 로 대체했다. HTML CSS .banner_wrap{width:100%;height:530px;margin-top:45px;} .banner_wrap .banner{position:relative;font-size:0;width:1120px;margin:0 auto;height:530px;overflow:inherit} .banner_wrap .banner .banner_slider{position:relative.. [CSS] hover시 부드러운 효과 HTML 1 css .item{position:relative;overflow:hidden;width:150px;height:150px;background:#fff;border:1px solid #ccc;text-align:center;border-radius:50%;cursor:pointer;} .item .num{padding-top:50px;} .item .desc{opacity:0;position:absolute;left:0;top:0;bottom:0; z-index:10; width:100%;color:#fff; background-color:rgba(0,0,0,.6); transition:all .2s;} .item:hover .desc {opacity:1;} .item .desc p {pos.. [CSS] label for을 이용한 라디오, 체크박스 버튼 on, off 라디오버튼과 체크박스를 이미지로 대체해야할 경우 label에 for을 이용하여 사용 HTML CSS input[type="radio"]{display:none;} input[type="checkbox"]{display:none;} label{display:inline-block;width:20px;height:20px;background-repeat:no-repeat;background-size:20px auto;} .r{background-image: url("images/r.gif");} input:checked + label.r{background-image: url("images/r_on.gif");} .ck{background-image: url("images/c.gif");} input:che.. [CSS] font awesome 아이콘 쉽게 사용하기 fontawesome : http://fontawesome.io/ Loading... List icons can be used as bullets in lists [HTML/CSS]간단한 페이징 css HTML 첫 페이지 이전 페이지 1 2 3 4 99 다음 페이지 마지막 페이지 css .pagination{margin-top:20px;white-space: nowrap; text-align: center; height: 37px; line-height:37px;} .pagination a{display:inline-block; border:1px solid #f7f7f7; height:35px; width:35px; vertical-align:middle; text-align:center; text-decoration:none; font-size:15px; color:#898989;background:#f7f7f7;} .pagination .on{color:#fff; font-weight:bold; .. 이전 1 다음
