분류 전체보기 (224) 썸네일형 리스트형 식품업체 홈페이지 메인시안 식품업체라서 이미지가 꽤 많긴 했는데 ㅠ.ㅠ 고르기가 힘들었다...;ㅅ; 마우스우클릭방지 / 선택방지 / 드래그방지 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.. 메인밖에 못만들었던 세번째 포트폴리오, 동물보호 관리시스템 리뉴얼 두번째 포트폴리오 까지 하고 뭔가 시간이 남았던걸까? 짧은 시간안에 만드느라 메인페이지밖에 못했던 ㅋㅋㅋ 정말 아무 의미없던 작업. 디자인은 금방 했는데, 유기동물 공고/찾기 부분을 코드를 짜는데 지금도 마찬가지지만 그때는 정말...제이쿼리......너무너무너무 못하던 때라 엄청 오래걸렸다..;ㅅ; 두번째 포트폴리오, 아쿠아스퀘어 선생님께 컨펌 받지 않고 개인적으로 했던 작업물. 완전반응형으로 제작했는데 이걸 만들때 까지만 해도 반응형에대해 전혀 이해하지 못한 상태였고...ㅎ.... 코딩보면 진짜 부끄럽다. 그런데 선생님이 반응형 예시로 학원생들한테 보여주신다고 개인호스팅에 올려놓으라고 하셔서 8ㅅ8 울면서 올렸다 진쨔.... 이미지 구하는게 상당히 힘들었던걸로 기억난다. 무료 이미지로는 그지같은것만 많아서...;ㅅ; uming2.dothome.co.kr에 올렸을거다, 아마도. 나중에 보면 이불 뻥뻥 찰 내 첫 포트폴리오- SPC 리뉴얼 나의사랑 mira 언니에게 여백의 미와 각종 코칭을 받아 겨우겨우 완성했던 SPC 메인시안. 처음으로 기획 짜고 디자인 들어가고 했던거라 엄청 헤맸던거 같다. ㅎ.ㅎ 디자인은 진짜 어어어어엄청 오래하고 코딩은... 스크립트 입히는거까지 해서 일주일도 안걸려서...8ㅅ8...후... 서브 몇개 보면. 회사소개 페이지도 나름 공..?들였고.. 그럭저럭 마음에 들었던 홍보갤러리. 횡~한 브랜드 세부페이지.. uming.dothome.co.kr에 아직 올려져 있다. 플러그인도 엉망이고 코딩도 엉망이고 (나름 시멘틱 마크업은 했다..!) 무엇보다 반응형도 아니구. 엉망진창으로 했지만 그래도 첫 포트폴리오라 그런지 꽤 애착이 가는 작업이었다 ^__^ 2016.12월에 마친 작업! 메인 화면에 게시판 리스트 통째로 출력하기 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 ··· 7 8 9 10 11 12 다음
