본문 바로가기

전체보기

 (119)
210404 wordpress jquery error 워드프레스에서 제이쿼리 load 에러 워드프레스에서 jquery 파일을 로드해도 중복이라고 에러나고 안 해도 $가 뭔지 모른다 난리여서 뭔가 싶었다. 구글링 해보는데 외국놈들 헛소리 가득 담긴 광고를 위한 글만 잔뜩 써놨다. 다행히도 한국어로 된 글에서 방법을 찾았다. 워드프레스는 무거운 친구니까 이미 jquery도 가지고 있다. 다만 내가 사용하기 위해 원래 jquery 로드하는 방식이 아닌 워드프레스에서 정한 방법으로 해줘야 한다. 수정 작업 중인 theme의 경로에서 functions.php 파일을 찾아 맨 하단에 아래 스크립트 추가. add_action('wp_enqueue_scripts', 'my_enqueue_scripts'); function my_enqueue_scripts() { wp_enqueue_script( 'jquer..
210404 상단 메뉴에서 로고를 수직 기준 가운데 정렬하기 방법 HTML 1. 그누보드에서는 이 방법이 100%로 잘 먹힌다. 근데 다른 데서 하면 안 됨. 아마도 그누보드에서 기본적으로 세팅해둔 css 에서 이 방법이 가능하도록 되어 있겠지?? CSS #head {position:relative;margin:0 auto;height:100px;margin:0 30px 0 30px;} #logo_wrap {float:left;height:100px;line-height:100px;width:120px;} 2. 그 외 다른 데서 작업할 때 사용. CSS #head {width:1000px;height:180px;} #logo_wrap {height:180px;display:flex;justify-content:center;align-items:center;}
카페24 상품 리스트 옵션 네 가지 : 목록형, 이미지형, 갤러리형, 확대보기 카페24 디자인 편집하면서 상품 리스트 부분을 하려고 하는데 product/list.html 파일을 아무리 수정해도 화면에 적용이 안되는 거다. 그래서 경로가 이상한가? 하고 이것 저것 확인해 봤는데 어떤 리스트 옵션을 사용하느냐에 따라 경로가 다르고 경로의 기본 파일은 list.html이 아니라 이미지형 리스트인 list_thumb.html 이다. 아래는 모바일 카페24 쇼핑몰 화면이과 카페24에서 제공하는 네 가지 list 옵션이다. 1.목록형 : list.html 2.이미지형 : list_thumb.html 3.갤러리형 : list_gallery.html 4.확대보기 : list_zoom.html (작동 안됨) 끝
210331 가운데 정렬된 ul에서 li 가운데 정렬 HTML CSS 원래 내가 알고 있어서 거의 항상 사용하던 방식은 ul 너비를 li 아이의 width*(li 개수)로 해서 ul 통째로 가운데 정렬하는 거였는데 확실히 이 방식은 쓰기 어려운 곳이 많다. 그래서 찾아보니 아래의 내용 중 ul class css의 끝 부분 display 부터 margin-right 부분까지가 키임. 그리고 li class의 width 지정도 하면 li 사이 간격 조절됨. overflow:hidden 은 float:left가 이 다음 요소(ul, li 다음)에 영향 주지 않게 하려고 넣은 것(일 것..) .menuCategory {height:120px;line-height:120px;overflow:hidden;padding:15px 0 70px 0;display:table..
210325 카페24 메뉴 카테고리 컨트롤 category.js 파일 파악하기 + 나를 위한 코멘트 : 내가 사용하려고 수정한 category.js 파일은 category_sub.js 라는 이름으로 올려놨으니 찾으면 됨. category.js 는 아래와 같이 load 되어 있는 파일이다. category.js 는 카페24 쇼핑몰 기능 중에서 사용자가 관리자 페이지에서 구성해둔 메뉴 내용에 따라 화면에 내용을 뿌려주는 부분을 컨트롤하는 파일이다. 나는 지금 처음 카페24 작업을 해 보는 거라 이것 저것 뒤져 보고 엄청 헤매고 있는데 category.js 는 그냥 두고 사용하면 되긴 하는 거 같다. 왠만하면 굳이 저 파일에 손 대지 않아도 관리자 페이지에서 메뉴 설정을 따로 하고 어쩌고 하면 원하는 메뉴 관련 기능을 사용할 수 있다. 내가 저 파일을 수정해야 겠다고 생각했던 이유는 상..
210322 카페24 모바일 슬라이더 swiperjs 카페24 작업하고 있다. 처음 해보는 건데 쭉쭉 잘 나간다 싶다가 모바일 슬라이더에서 막혔다. 메인 슬라이더에 swipe 가 되도록 추가하려고 하는데 계속 import 부터 에러가 났다. 원래 mobile jquery 쓰려면 추가로 mobile jquery 파일을 로드해야 하는데 카페24 에서 로드해둔 파일이랑 충돌이 되는 거 같다. 해결 해보려고 했는데 결국 포기하고 제작되어 있는 슬라이더를 사용하기로 했다. 그래서 고른 것이 swiperjs.com Swiper - The Most Modern Mobile Touch Slider Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazi..
210319 게시판 글 목록 더 보기(more 버튼 달기) JS $('.list_item').hide(); $('.list_item').slice(0, 12).show(); $("#list_item_btn").click(function(e){ // Load More를 위한 클릭 이벤트e e.preventDefault(); $(".list_item:hidden").slice(0, 12).show(); // 숨김 설정된 다음 n개 표시 if($(".list_item:hidden").length == 0){ // 숨겨진 DIV가 있는지 체크해서 없으면 more 버튼 숨기기 $('#list_item_btn').hide(); } }); 출처 : www.thewordcracker.com/jquery-examples/add-load-more-button-jquery/ 'Lo..
210319 탑버튼 화면 top 부분부터 어느 부분까지는 보이지 않게 되어 있다가 스크롤 다운해서 지정한 위치에 가면 보이도록 HTML CSS 위치 고정 #q_menu { display:none; position: fixed;top:85%; -webkit-transform: translateY(-85%); -ms-transform: translateY(-85%); transform: translateY(-85%); right:calc(50% - 700px); } JS1 스크롤 다운 위치에 따라 보여주기, 숨기기 $(window).scroll(function() { if($(this).scrollTop() > 900) { $("#q_menu").fadeIn('fast'); } else { $("#q_menu").fadeOut..
210315 메뉴 아이콘 클릭시 전환 효과주기 원래는 i_toggle fadeOut 으로 시작하는 부분 바로 밑에 있는 css bacgkround 부분만 각각 들어가 있었다. 버튼을 클릭하면 배경이미지만 변경 되어 클릭할 때 아이콘이 왔다 갔다 바뀌는 효과가 나도록. 그러다가 아이콘이 바뀔 때 효과가 들어가면 좋겠다 해서 추가. $('#show_menu').click(function() { if ($('#bd_sub_wrap').css('display') == 'none') { $('#i_toggle').fadeOut('fast', function() { $('#i_toggle').css({'background': 'url("/img/toggle_x.png") no-repeat center center','background-size':'18px'}..
210315 text-align center not working in span text-align center가 안 될 때 뭔가 말이 안 되게 text-align:center가 안 먹는다 하면 아마도 그 겉에는 span 태그가 있을 것이다. 그 때는 display: inline-block; 를 같이 넣어주면 된다고 해서 해보니 된당

티스토리툴바