퍼블리싱 (179) 썸네일형 리스트형 마우스우클릭방지 / 선택방지 / 드래그방지 body태그에 oncontextmenu="return false;" onselectstart="return false;" ondragstart="return false;" contextmenu가 우클릭 방지 selectstart가 선택방지 dragstart가 드래그방지! css rwd grid 반응형을 위한 그리드. 보통 12개의 칼럼으로 나뉘며, 칼럼중 1개만 차지할때, 2개를 차지할때 이런 식으로 넓이를 지정해 주면 된다. 각각의 col들은 모두 float: left; 되어야 한다. .col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;} [class*="col-"] { fl.. CSS - flexbox 아직 한번도 코딩할때는 적용해 보지 못한 flexbox. 레이아웃을 위해 CSS3부터 생긴 속성이다. IE11부터 적용되어 아직은 대중적으로 사용하기엔 크로스 브라우징 문제가 있을듯 하다. display속성의 값으로 사용된다. display: flex; display: -webkit-flex; //크롬을 위한것. flex속성에는 다 써주기. 이 값을 가지고 있는 부모 div 안에 있는 자식들은 자동으로 flex된다. ● flex-direction을 이용하여 가로로 정렬할지, 세로로 정렬할지도 정할수 있다.물론 이 값은 여전히 부모에게 주는것. flex-direction : row; //가로정렬 flex-direction : row-reverse; flex-direction : column; //세로정렬 .. 글자 아이콘, fontawsome 홈페이지를 만들다보면 아이콘을 넣을 일이 굉장히 많다. 이런 짜잘짜잘한 아이콘을 다 포토샵에서 잘라가지고 저장해가지고 업로드해서 경로쓰고.....때에따라선 크기도 일일이 css로 조절하고... 얼마나 귀찮은지 ;ㅅ; 이런 귀찮음을 줄여주는 Font Awesome! http://fontawesome.io/ fontawsome은 한마디로 font icon이다. 우리가 웹상에서 쓰는 텍스트와 똑같이 아이콘을 만드는것. 그래서 css로 color지정도 굉장히 쉽다. 폰트어썸을 사용하려면, 직접 파일을 업로드 하는 방법도 있겠지만 역시 가장간편한건 cdn주소를 사용하는거다 :) 사이에 이것만 써주면 끝! 그리고 필요한게 있으면 폰트 어썸에서 아이콘을 검색해서 태그만 복붙하면 된다 ㅎ.ㅎ class명을 줌으로써 크.. background animate W3Cschool을 보다가 발견! css3의 animate를 이용해서 백그라운드를 animate할수도 있다 ㅋㅋㅋㅋ IE에서는 IE10버전부터 작동하는거 같다. animate를 하도 사용하지 않다보니 다 까먹었긴한데, animate할 대상에 백그라운드를 주고, -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation: mymove 5s infinite; 이렇게 기본적인 mymove라는 animate를 써준다. animate를 정의하는 방법은 /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 50% {background-position: center;} } /* Standard.. 메인 화면에 게시판 리스트 통째로 출력하기 1. index.php 파일 전체를 수정 2. bbs/board.php 파일 상단부분 수정 include_once('./_common.php'); 아래 줄부터 내용이 추가되었습니다. (notice가 게시판id 부분입니다. notice 부분만 원하는 게시판으로 수정) include_once('./_common.php'); if(defined('_INDEX_')) { $bo_table = 'notice'; $write_table = 'g5_write_notice'; $board = sql_fetch(" select * from {$g5['board_table']} where bo_table = '$bo_table' "); if (G5_IS_MOBILE) { $board_skin_path = get_skin_.. 게시판에서 캡챠 (자동등록방지) 사용하지 않기 1-1. 그누보드5 / bbs / write.php 에서 아래 내용 삭제 또는 주석처리 if ($is_guest) { $captcha_html = captcha_html(); $captcha_js = chk_captcha_js(); } 를 아래와 같이 변경 if ($bo_table=="sms") { } else { if ($is_guest) { $captcha_html = captcha_html(); $captcha_js = chk_captcha_js(); }} 1-2. 그누보드5 / bbs / write_update.php 에서 아래 내용 삭제 또는 주석처리 if ($is_guest && !chk_captcha()) { alert('자동등록방지 숫자가 틀렸습니다.'); } 를 아래와 같이 변경 if (.. 그누보드 메인화면에 원하는 게시판의 최신글만 추출 그누보드를 기본으로 사용하면, 메인 최신글에 모든 게시판이 다 보입니다. 물론, latest 함수를 이용하여, 보이고 싶은 게시판만 선택적으로 보이게 할 수 있습니다. 하지만, 게시판이 추가될 때마다 latest 를 추가해 주는 것이 귀찮을 수도 있습니다. ^^ 그누보드 기본 index 에 있는 쿼리문을 조금 수정하여 보이는 게시판을 제한하는 방법입니다. 최신글을 가져오기 위한 디폴트 쿼리문입니다. // 최신글 $sql = " select bo_table from `{$g5['board_table']}` a left join `{$g5['group_table']}` b on (a.gr_id=b.gr_id) where a.bo_device 'mobile' "; if(!$is_admin) $sql .= " .. 그누보드 list , write 수정하기 그누보드 게시판을 사용한다면 나에게 가장 중요한 것은 커스터마이징 일것이다. 웹 프로그래밍으로 게시판을 만들지 못하고, admin화면을 따로 개발하지 못하는 나는 개인적으로 웹페이지를 만들 경우에는 필연적으로 그누보드를 사용할 수 밖에 없는데, 고객이 원하는대로 쓰는내용과 보이는 내용을 수정하지 못하면 말짱 꽝이겠지? 먼저, 가장 중요한 write부분. write부분은 사용자가 입력한 값을 받는것이다. 하나의 form이라고 보면 된다. 여기서 가장 중요한 개념은, write한 값은 반드시 저장되는 필드가 있어야 한다는 것이다. 그누보드 자체적으로 있는 wr_name 등의 필드등은 보통 게시판 스킨에도 알아서 써져 있지만, 새롭게 내가 사용자가 쓰는 값을 받고싶은 경우엔 여분필드에다가 값을 받는 방법밖에 .. 그누보드 여분필드 사용법 어떤 input의 값을 여분필드에 담을때 (viewer에 보일때 필요함) 해당 input은, write.skin.php에서 >단순출력(방문수령) 그누보드 5 회원가입 차단하기 extend 폴더에 signup_no.php (파일명은 원하는대로 만들어도 됨) 파일 작성 후 아래 내용 복사 - 붙여넣기 - 저장 출처 http://day.cu.cc/220475361119 jquery-ui 2 1. Add Class addclass도 animate하자! Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. 이런 구조의 html에, css에서 .toggler { width: 500px; height: 200px; position: relative; } #button { padding: .5em 1em; text-decoration: none; } #effect { width: 240px; padding: 1em; border: 1px solid #000; background: #eee; color: #333; } .newClass { text-indent: 40px; letter-spacing: .4em; width: 4.. jquery-ui 1 jquery-ui.js를 지금까지 animate에서 색깔도 바꿀수 있게 쓰려고 사용했던 나 자신을 굉장히 반성합니다 OTL jquer-ui.css도 있다는걸 오늘 알았다. 빠가사리. jquery-ui로 할수 있는게 굉장히 많은데, 일단 cdn주소부터 살펴보면 이렇다. 유용하게 쓸수있을것 같은 effect를 살펴보자. 물론 http://jqueryui.com/ jQuery UI jqueryui.com 여기서 데모까지 볼수 있다. 1. Draggable 선택자를 드래그 할수 있게 하려면 $( function() { $( "선택자" ).draggable(); } ); 물론 여러가지 옵션이 있으므로 잘 보고 사용하면 된다 :) 2. Resizable 크기를 줄이고 늘릴수 있게 하려면 $( function() {.. click이벤트에 여러 효과 동시에 주기 :p 초간단! A라는 버튼 하나를 click함으로써 어떤 경우에는 무슨 이벤트가 동작되게, 다른 경우에는 무슨 이벤트가 동작되게 하고싶은 경우가 많다. toggle을 사용하면 되긴 하지만.... 여튼 간단하게 if문으로 제어할수 있는 방법! $('.comm li a').on('click' , function(){ //.text() 또는 .html() 로 문구 검사해서 적용 if($(this).text() == "착용샷 보기 >"){ $(this).parent().parent().find('img').css('opacity','0'); $(this).parent().parent().find('.imgh').animate({'opacity':'1'},500); $(this).text('원래대로 보기 >'); }else{ .. select box를 제이쿼리로 외형제어 HTML 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 2017 2017 2018 2019 년 1 1 2 3 월 1 1 2 3 일 10 10 11 12 시 00 00 10 20 30 40 50 분 Colored by Color Scripter cs 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 #select_box{ float: left; position: relative; height: 25px; min-width: 80px; border.. (링크) 마우스를 돋보기 처럼 쓰는 플러그인 아마도 쇼핑몰 같은데서 쓰기 적절한것 같다. http://www.elevateweb.co.uk/image-zoom/examples 마우스 오버시 이미지 크기조절 심화편! 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 알톤스포츠의 자존심을 담은 대표 브랜드 스피드를 위한 스타일리쉬 자전거 쉐보레의 공학기술이 적용된 퍼포먼스 자전거 전거전 거전.. 마우스 오버시 이미지가 자동으로 커지고 작아지고 하는 효과! 초간단 :P 언뜻 복잡할거 같은데 진짜 겁나 쉬운 방법이다. 먼저 style에서 class로 정의해 준 다음 addClass와 removeClass를 사용하는 방법이다. 세상간단. 진짜 세상에서 제일 간단. HTML 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98.. google map api 사용법 (한 페이지에 다수의 구글맵 가능) 진짜 겁나 헤맸던 google map api 사용법. 직접 발급받은 key를 사용하는 법이 있고 왜인지 모두가 쓸수있는 key를 사용하는 법이 있는데, 진짜 모두 쓰는 그 방법이 훠어어어엉어어어어어얼씬 낫다 진짜..후... 1. 직접 발급받은 key사용법 - key를 발급받는 절차부터 복잡하다. 이건 naver에 검색하면 많이 나오므로 패스. 키를 발급받은다음, 스크립트 선언을 먼저 한다. 빨간부분은 내가 발급받은 api 키를 넣으면 된다. map을 넣을 공간을 마련해준다. 이때, #map은 width와 height값을 준 상태여야 한다. 이 #map에 width와 height값을 준다. 그리고 body가 닫히기 직전, 이렇게 써준다.후... 그런데 이방법을 사용하면 1p에는 하나의 구글맵밖에 업로드 하.. 버튼스타일 2 https://codepen.io/TryHardHusky/pen/KdQQVq HTML ...이랄 것도 없고, 하나의 a에 스타일 주는것이다. 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106.. 이전 1 ··· 5 6 7 8 9 다음