$(".real_05 ul li a").click(function() { var i; var element = $(".real_05 ul li"); var len = element.length; for (var i=0; i{ $(this).parent("li").siblings("li").eq(i).find("img").attr("src" , $(this).parent("li").siblings("li").eq(i).find("a").data("off")); } $(this).find("img").attr("src", $(this).data("on")); });
// 이미지맵 속 링크 가지고 있도록 배열화 var imgmap_arr = new Array(); $(".tab05").find('a[data-toggle="tab"]').each(function ( index ){ var num = parseInt( index+1 ); var target = $("#det_0" + num ); var imgmap_pc = $("#m05_0" + num ); var imgmap_m = $("#mm05_0" + num ); var temp1_arr = []; $(target).find("map").each(function (m){ var temp2_arr = []; $(this).find("area").each(function (a){ temp2_arr.push( $(th..
#한번클릭시 내용이뜨며 두번클릭시 페이지 이동 function item_h(){ if ($(window).width() > 992) { $('.wr-img').mouseenter(function(){ $('.item_txt').removeClass('on'); $(this).closest('div.item-image').siblings('.item_txt').addClass('on'); }); $('.item_txt').mouseleave(function(){ $('.item_txt').removeClass('on'); }); } else { $('.wr-img').click(function(e){ if($(this).hasClass("open")){ } else { e.preventDefault(); ..
#스크립트로 호버된 이미지 변경하기 $(function(){ var list = $(".post-row .con_bt") list.mouseover(function(){ index = $(this).index(); list.find(".real_i").attr("src",$(this).find(".real_i").attr("src").replace("on","off")); $(this).find(".real_i").attr("src",$(this).find(".real_i").attr("src").replace("off","on")); }); list.mouseleave(function(){ index = $(this).index(); list.find(".real_i").attr("src",$(this..
.line-clamp { display : block; display : -webkit-box; -webkit-box-orient : vertical; position : relative; line-height : 1.2; overflow : hidden; text-overflow : ellipsis; padding : 0 !important; } /* .line-clamp:after { content : '...'; text-align : right; bottom : 0; right : 0; width : 25%; display : block; position : absolute; height : calc(1em * 1.2); background : linear-gradient(to right, rgb..
#테이블 See the Pen Untitled by Kim Mi Seon (@miseon920) on CodePen. *테이블 코딩 1.table은 기본적으로 thead,tbody,tfoot으로 구성되나 때에따라서 생략가능하다. 2.thead에는 보통 제목을 쓴다. tr은 행을 나타내며 열로는 제목을 가르키는 th태그를 사용하여 작성하면 된다. -th 태그는 자동으로 중앙정렬과 폰트를 두껍게 표편한다. 3.tbody에는 제목에관한 내용을 쓴다. 4.scope의 경우 웹접근성을 위하여 사용한다. ※웹접근성이란? 정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 ..
#반응형에서 한쪽에 고정메뉴가 있을경우 See the Pen Untitled by Kim Mi Seon (@miseon920) on CodePen. #calc calc() - CSS: Cascading Style Sheets | MDN calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. developer.mozilla.org *calc를 중첩으로 쓸경우 width:calc(100% - 24px / 3); 으로 작성하는 것이 아닌 width : calc(calc(100% - 24px) / 3); 로 작성해야 올바른 표현이다.
#아코디언 메뉴 $(function(){ var acodian = { click: function(target) { var _self = this, $target = $(target); $target.on('click', function() { var $this = $(this); if ($this.next('.real_content').css('display') == 'none') { $('.real_content').slideUp(); _self.onremove($target); $this.addClass('on'); $this.next().slideDown(); } else { $('.real_content').slideUp(); _self.onremove($target); } return fals..
#이미지맵 1.img의 usemap과 map의 name과 id를 일치시켜준다. 2.shape="속성값"은 영역의 모양을 의미한다. - react : 직사각형(왼쪽 상단 좌표와 오른쪽 하단 좌표) - circle : 원형 모양(원중심의 좌표와 반지름을 지정) - poly : 형 영역(다각형의 가장자리의 좌표를 지정) - default : 전체 영역 3.coords="정의"는 영역의 좌표를 의미한다. -이미지 맵의 좌표의 경우 그림판에 이미지를 띄운후 쉽게 확인 가능하다. *간단하게 좌표 확인하기 www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to..
