분류 전체보기191 2024 웹디자인기능사 필기 + 실기 후기 (D-3 푸른마을) 1. 서문현역에서 웹디자이너로 일해오면서 그동안 자격증을 딸 생각을 한번도 하지 않았다.참고로 나는 비전공자이고 국비 학원 다니다가 취직해서 웹디자이너로 일한 고인물이다. 사실 대기업이 아니라면 디자이너는 비전공자이고 자격증이 하나도 없어도 포트폴리오만 준비가 잘 되어 있다면 취직하는데 별 어려움이 없다. 그래서 그동안 자격증 딸 생각을 한번도 하지 않았던 것이다. 그러다 이번에 퇴사와 창업을 준비하면서 각종 국가지원사업에 수행기업으로 신청을 한다던가, 또 앞으로 누군가를 가르칠 일이 있을 때를 대비해서 디자인 관련 자격증들을 취득하기로 하였다. 2. 필기 후기 어차피 60점이 커트라인이라서 따로 교재없이 유튜브에서 필기 교육하는 부분 화면 캡쳐하여 10장 내외의 프린트물을 혼자 만들어 2일 정도 공부했.. 2024. 6. 11. 작은사무실 디자인 참고 사진 모음 작은 사무실 인테리어 어떻게 할지 참고 사진 모음 2024. 5. 31. table thead sticky 적용시 보더 투명해지면서 tbody 겹쳐 보일때 원인 : border-collapse해결방법 : border-collapse: separate; border-spacing: 0; .tableScroll{overflow: auto; height:calc(100vh - 340px)}.tableScroll::-webkit-scrollbar{width:8px;height:8px;background-color:#131538}.tableScroll::-webkit-scrollbar-thumb{border-radius:2px;background:rgba(28,79,151,0.7);border:1px solid #2b89d6}.tableScroll::-webkit-scrollbar-track{border-radius:2px}.tableScro.. 2024. 5. 22. 앱아이콘 한번에 만들기 https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html#foreground.type=image&foreground.space.trim=0&foreground.space.pad=0&foreColor=rgba(96%2C%20125%2C%20139%2C%200)&backColor=rgb(28%2C%2075%2C%20240)&crop=0&backgroundShape=square&effects=none&name=ic_launcher Android Asset Studio - Launcher icon generator romannurik.github.io 2024. 5. 21. input radio 라디오버튼 값으로 특정 css 변경 라디오 버튼을 텝 대용으로 사용할때 표 그래프 $("input[name='viewDmd']").on("click", function () { var selec = $("input[name='viewDmd']:checked").val(); if(selec == 1){ $('.tableSection').removeClass('disable'); $('.grpSection').addClass('disable'); }else if(selec == 2){ $('.grpSection').removeClass('disable'); $('.tableSection').ad.. 2024. 5. 13. VScode 디자이너를 위한 플러그인 세팅, CSS 위주 설치할 플러그인Live Server - 실시간 미리보기css-compact - 어지러운 css 를 한줄로 정리 단축키 : shift+alt+f PostCSS Sorting - 협업을 위한 CSS 정리 단축키가 중복일 경우가 많아 직접 입력시킴 postcss 세팅 방법 - 설정 아이콘 클릭 - Extension Settings 클릭 Edit in settins.json 클릭 아래처럼 순서 복붙 "postcssSorting.config": { "properties-order": [ /* Layout */ "display", "grid", "grid-column-gap", "grid-row-gap", "grid-auto-flow", "gr.. 2024. 5. 12. input radio 라디오버튼 모양 바꾸기 시간대 30분 15분 .selTimeRadio input { border: 4px solid #A0A0A0; outline:none; width: 36px; height: 36px; background-color: transparent; border-radius: 50%; appearance: none; } .selTimeRadio input:checked { border-color: #1CC8FF; position: relative } .selTimeRadio input:checked::after { display: block; position: abs.. 2024. 5. 8. input date icon 달력 모양 바꾸기 날짜 선택 .dateBox input { border: 1px solid #69789F; position: relative;width: 185px; height: 34px; background: url('../img/icon_date.svg') no-repeat right 10px center; font-size: 1rem; color: #fff; border-radius: 4px; } .dateBox input[type="date"]::-webkit-calendar-picker-indicator,.dateBox input[type="date"]::-webkit-inner-spin-button { opacity: 0; appearance: none; } 2024. 5. 8. animation 애니메이션 css div { width: 100px; height: 100px; background-color: red; position: relative; animation: myfirst 5s linear 2s infinite alternate;}div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate;}@.. 2024. 5. 5. header nav logo menu menu menu menu header {position: absolute;top: 0;left: 0;width: 100%;padding: 20px 0;z-index: 3; } header h1 {position: relative;height: 40px;margin:0;float: left;z-index: 3; } header h1 img {display: block;position: relative;top:10px; } .main-navigation {float: right; } .main-navigation a {colo.. 2024. 5. 5. 팝업 popup 팝업 열기 content 닫기 $(document).ready(function(){ var $openBtn = $('.open-btn'), $closeBtn = $('.close-btn'), $modal = $('.modal-container'); $openBtn.click(function () { modalShow(); }); $closeBtn.click(function () { modalHide(); }); function modalShow() { $modal.addClass('active'); $dimLayer.show(); console.log('show button c.. 2024. 5. 5. 일러스트레이터 위고 가토니(Ugo Gattoni) 2024. 5. 5. 로컬에서 작업중 부트스트랩 등 cdn 연결 안될때 갑자기 작업중에 부트스트랩 아이콘들이 다 사라져 버렸다. 부트스트랩 뿐만 아니라 제이쿼리 등 cdn으로 불러오는 모든 파일들이 차단된 것 같았다.개발자모드에서 보니 부트스트랩이 이렇게 보였다. 해결 방법은 간단했다. 브라우저 설정가서 인터넷 사용 기록을 삭제해주고 재부팅 해주었다. 2024. 5. 2. 까페24 웹호스팅 -> 매니지드 워드프레스 호스팅으로 이전하기 기존 카페24 웹호스팅을 매니지드 워드프레스 호스팅으로 이전하였다.가장 큰 이유는 ssl 인증서 비용을 줄이고, 관리를 편하게 하기 위함이었다. 1. All-in-One WP migration 이용하여 아래 링크대로 진행하였다. https://cafe24.zendesk.com/hc/ko/articles/5880853209753 2. 첫번째 문제 - 용량 문제 아직 용량을 50%도 사용하지 않고 있음에도 불구하고 남은 용량이 부족하다고 에러가 났다. 그래서 phpmyadmin 도 삭제하고 파일을 정리했다. 3. 로티 파일이 날라감 용량을 정리한 뒤 플러그인을 써서 이전을 완료하였으나 로티 파일이 날라가서 기존 백업 받아놓은 파일을 찾아 다시 업로드하였다. 4. ssl 인증서가 계속 실패함 ssl이 안되.. 2024. 5. 1. 유튜브 영상을 배경으로 넣고 싶을 때 아래 오픈소스를 사용하면 된다. https://github.com/stamat/youtube-background GitHub - stamat/youtube-background: ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links.ESM / jQuery plugin for creating video backgrounds from YouTube, Vimeo or video file links. - stamat/youtube-backgroundgithub.com사용법 1. cdn으로 사용할 js파일을 가져온다. 2. 스타일 css와 js 코드를 넣는다. 2024. 5. 1. 워드프레스에서 패럴랙스(배경 시차) 효과 주기 랜딩페이지에 슬라이딩 넘어갈때 래럴랙스 효과를 주는 방법이다. https://pixelcog.github.io/parallax.js/ Parallax.js | Simple Parallax Scrolling Effect with jQueryNotice: Hello mobile user. Unfortunately, this parallax effect is not reliably achieved on mobile devices, so all you will see on this demo page are static backgrounds. Please visit this page on a desktop browser to see its full effect. Parallax.js is a dipixelcog... 2024. 5. 1. 워드프레스에서 fullpage.js 사용 fullpage.js 주소 : https://alvarotrigo.com/fullPage/ fullPage scroll snapping. Create full screen pages fast and simpleMouse wheel snap to sections. Fast and simple to use.alvarotrigo.comcdn css 주소 link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.20/fullpage.min.css" integrity="sha512-otONSJGv1l0LjJXcgyqi2MeKXtnthkiXAleeQjFJOKYcVD5u+mOuPb7xCnlsb74Ld+N0ONbP7KY.. 2024. 5. 1. 워드프레스 멀티사이트 만들기 구현은 했으나 특정 플러그인들이 막히거나 충돌이 나서 결국 삭제하였다. 그래도 멀티사이트 만드는 방법 정리해둔다.[ 사전준비 ]1. 고유주소를 기본이 아닌 파머링크(게시글주소)로 바꾼다. 2. 아래의 코드를 wp-config.php 파일에서 /* That's all, stop editing! Happy blogging. */ 바로 위에 추가한다./* Multisite */define( 'WP_ALLOW_MULTISITE', true );3. 모든 플러그인들 활성화를 해제한다. 그러면 관리자 - 도구 - 네트워크 설치 메뉴가 나타난다. [ 네트워크 설치 ]도구 - 네트워크 설치를 클릭하면 나오는 소스를 보고wp-config.php 및 .htaccess 파일을 수정한다. (혹시 모르니 작업전 백업 필수).. 2024. 5. 1. 까페24 호스팅에서 500에러 뜨면서 저장 안될때 우연인지는 모르겠으나, 다른 호스팅에서는 문제가 없었던 것이 까페24 호스팅 저렴한 버전에서는 항상 무언가가 막힌다. 가끔 엘레멘토 수정후 저장이 안되면서 500 에러가 뜰 때가 있는데 이때는 아래 2가지를 입력해준다. .htaccess 파일에서 아래 코드를 주석 바로 아래 넣어준다. php_value memory_limit 512Mwp-config.php 파일에서 아래 코드를 마지막에 넣어준다. define('WP_MEMORY_LIMIT', '512M'); 이렇게 해도 안되면php_value memory_limit 1024M 까지 올려본다. 2024. 5. 1. 워드프레스에서 Swiper.js 적용하기 function.php function seven_style_sheet() { wp_enqueue_style( 'swiper-style', 'https://cdnjs.cloudflare.com/ajax/libs/Swiper/9.3.2/swiper-bundle.css' ); }add_action('wp_enqueue_scripts', 'seven_style_sheet');function seven_script_enqueue(){ //wp_enqueue_script('jquery-js', get_template_directory_uri() . '/js/jquery-3.6.0.min.js', array('jquery')); wp_enqueue_script( 'swiper-script'.. 2024. 5. 1. 케이보드 컨텍 스킨 1:1 문의 권한 관리 고급설정주의! 고급설정에서 글쓴후 이동화면을 상식적으로 '작성글 화면'으로 하면 에러가 난다. '글쓰기화면'을 선택해 준다. ----------------------------------------------------캡챠부분캡챠 표시 조건1. 비로그인 사용자2. KBoard 대시보드 페이지에서 "모든 게시판에서 비로그인 사용자 CAPTCHA 기능" 사용3. KBoard 게시판 설정 -> 입력 필드 페이지에서 캡차 (보안코드) 필드 추가 2024. 5. 1. 로티파일 제작하여 워드프레스에 올리기 에프터이펙트로 로티 파일을 만들어 워드프레스 사이트에 올리기 위해선아래 사이트에서 회원가입하고 zxp 플러그인을 다운받아야 한다. https://lottiefiles.com/plugins/after-effects?utm_medium=web&utm_source=footer-after-effects LottieFiles plugin for Adobe After EffectsCreate stunning Lottie animations easily with the LottieFiles plugin for Adobe After Effects. Export Lottie from After Effects, preview animations instantly and more. Download now.lottiefile.. 2024. 5. 1. 워드프레스에서 파티클을 배경으로 넣고 싶을 때 https://codepen.io/Saramazal/pen/ZEejVxj particles.js demoMade with particles.js, a lightweight JavaScript library for creating particles...codepen.io 나의 경우 일부 호스팅에서는 문제 없이 동작하였으나, 까페24의 매니지드 워드프레스 호스팅에서는 위험한 주소로 인식하여 차단이 되었다. 그래서 그냥 파일을 다운받아 ftp로 올려 사용하였다. function.php에서 해당 파일들을 불러와 사용한다.(파일 불러오는 순서는 아래와 같다)/* 파티클 */function seven_script_enqueue(){wp_enqueue_script( 'particle2-script', get_sty.. 2024. 5. 1. 워드프레스 사용자정의 CPT, ACF 플러그인 1. CPT로 포스트 타입을 만들고 2. ACF로 커스텀 필드를 만들어 3. 위에서 만든 CPT의 포스트로 글자나 이미지를 등록후 4. 원하는 페이지에 넣어 자유롭게 사용자 입력 내용을 가져온다. 예시 1 'copywriters', // 위에서 만든 Custom Post Type 이름 'posts_per_page' => 1, // 보여줄 항목 수 (1로 설정하면 최신 정보를 하나만 보여줍니다) 'order' => 'DESC', // 최신 정보를 보여주기 위해 내림차순으로 정렬);$copywriter_query = new WP_Query( $args );if ( $copywriter_query->have_posts() ) { while ( $copywriter_query->have_.. 2024. 5. 1. 이전 1 2 3 4 ··· 8 다음
