본문 바로가기

분류 전체보기316

플러그인 없이 패럴렉스 효과 1-5 1-1 1-3 1-6 2-1 2-2 2-3 2-4  $(function(){ var section = $('#contents > .parallax > div'); var sectionInfo = []; var objectInfo = []; section.each(function(i){ var tg = $(this); sectionInfo.push(tg.offset().top); objectInfo.push([]); var child = tg.children(); child.each(function(j){ var t = $(this); objectInfo[i][j] = t.position().top; }); }); section.c.. 2024. 6. 29.
offset().top 메뉴 스크롤하기 paper works email  $(function(){ var menu = $('#top_menu > ul > li'); var contents = $('#contents > div'); menu.click(function(e){ e.preventDefault(); $(this).addClass('on').siblings().removeClass('on'); var tg = $(this); var i = tg.index(); var section = contents.eq(i); var tt = section.offset().top; $('html, body').stop().a.. 2024. 6. 29.
썸네일이 있는 갤러리 생략 생략  $(function(){ var current = 1; var thumbListSize = 6; var thumbnail = $('#thumbnail'); var prev = thumbnail.find('> .left'); var next = thumbnail.find('> .right'); var container = thumbnail.find('> .container > ul'); var containWidth = thumbnail.find('> .container').width(); var thumb = container.find('.. 2024. 6. 29.
연속된 이미지들 스크롤이나 슬라이더로 조절하기 이미지를 120장 뿌려놓고 스크롤이나 슬라이더로 조절하기 Scroll 이미지 120장 생략 Scroll $(document).ready(function(){ var imageList = $('#slideList > p'); $('#slider').slider({ slide:function(event, ui){ var max = $('#slider').slider( "option", "max" ); var min = $('#slider').slider( "option", "min" ); var start = 0; var end = imageList.size() - 1; var imgI.. 2024. 6. 29.
웹디자인기능사 실기 제이쿼리 부분 $(function(){ //slide var count = 0; function slide(){ if(countul>li").mouseenter(function(){ $(this).find(".sub").stop().slideDown(); }) $("nav>ul>li").mouseleave(function(){ $(".sub").stop().slideUp(); }) //menu tab key $("nav>ul>li>a").focusin(function(){ $(this).next().slideDown(); $(this).parent().addClass("on"); }) $(".sub li.. 2024. 6. 29.
[p-book] admin alt text-delete '', 'alt' => '',]; // Initialize image array$errors = [ 'alt' => '', 'warning' => '',]; // Initialize error messageif ($id) { // If valid article id $sql = "SELECT i.id, i.file, i.alt FROM image AS i JOIN.. 2024. 6. 28.
[p-book] admin image-delete fetch(); // Get image data}if (!$image) { // If no image redirect('article.php', ['id' => $id]); // Redirect}$path = '../uploads/' . $image['file']; // Path to fileif ($_SERVER['REQUEST_METHOD'] == 'POST') { // If form was submitted $sql = "UPDATE article SET image_id = null WHERE id = :art.. 2024. 6. 28.
[p-book] admin article-delete 'Article not found']); // Redirect with error}$article = false; // Initialize article$sql = "SELECT a.title, a.image_id, i.file AS image_file FROM article AS a LEFT JOIN image AS i ON a.image_id = i.id WHERE a.id = :id;"; // SQL to get article data$article = pdo($pdo, $sql,.. 2024. 6. 28.
[p-book] admin article id 없을때 id 있을때  $id, 'title' => '', 'summary' => '', 'content' => '', 'member_id' => 0, 'category_id' => 0, 'image_id' => null, 'published' => false, 'image_file' => '', 'image_alt' => '',]; // Article data$errors = [ 'warning' => '', 'title' => '', 'summary' .. 2024. 6. 28.
[p-book] admin articles fetchAll(); // Get article summaries?> Articles Add new article ImageTitleCreatedPublishedEditDelete " alt=""> " class="btn btn-primary">Edit " class="btn btn-danger">Delete 2024. 6. 28.
[p-book] admin category-delete 'Category not found']); // Redirect with error}$sql = "SELECT name FROM category WHERE id = :id;"; // SQL to get category name$category = pdo($pdo, $sql, [$id])->fetchColumn(); // Get category nameif (!$category) { // If no category redirect('categories.php', ['failure' => 'Category not found']); // Redirect with error}if ($_SERVER['REQUEST.. 2024. 6. 28.
[p-book] admin category $id, 'name' => '', 'description' => '', 'navigation' => false,]; // Initialize category array$errors = [ 'warning' => '', 'name' => '', 'description' => '',]; // Initialize errors array// If there was an id, page is editing the category, so get curren.. 2024. 6. 28.
[p-book] admin categories fetchAll(); // Get all categories?> Categories Add new category Name Edit Delete " class="btn btn-primary">Edit " class="btn btn-danger">Delete 2024. 6. 28.
[p-book] admin index fetchColumn(); // Get number of articles$sql = "SELECT count(id) FROM category"; // SQL$category_count = pdo($pdo, $sql)->fetchColumn(); // Get number of categories?> Admin CountCreateView Categories Add View Articles Add View 2024. 6. 28.
[p-book] header Skip to content Menu " > Search  document.body.classList.add('js');var toggle = document.querySelector('#toggle-navigation');var menu = document.querySelector('#menu');var menuItems = document.querySelectorAll('#menu li a');toggle.a.. 2024. 6. 28.
[p-book] search fetchColumn(); // Return count if ($count > 0) { // If articles match term $arguments['show'] = $show; // Add to array for pagination $arguments['from'] = $from; // Add to array for pagination $sql = "SELECT a.id, a.title, a.summary, a.category_id, a.member_id, c.name .. 2024. 6. 28.
[p-book] member fetch(); // Get member dataif (!$member) { // If array is empty include 'page-not-found.php'; // Page not found}$sql = "SELECT a.id, a.title, a.summary, a.category_id, a.member_id, c.name AS category, CONCAT(m.forename, ' ', m.surname) AS author, i.file AS ima.. 2024. 6. 28.
[p-book] article fetch(); // Get article dataif (!$article) { // If article not found include 'page-not-found.php'; // Page not found}$sql = "SELECT id, name FROM category WHERE navigation = 1;"; // SQL to get categories$navigation = pdo($pdo, $sql)->fetchAll(); // Get navigation categories$section = $article['ca.. 2024. 6. 28.
[p-book] category fetch(); // Get category dataif (!$category) { // If category not found include 'page-not-found.php'; // Page not found}$sql = "SELECT a.id, a.title, a.summary, a.category_id, a.member_id, c.name AS category, CONCAT(m.forename, ' ', m.surname) AS author, i.file A.. 2024. 6. 28.
[p-book] index fetchAll(); // Get summaries$sql = "SELECT id, name FROM category WHERE navigation = 1;"; // SQL to get categories$navigation = pdo($pdo, $sql)->fetchAll(); // Get navigation categories$section = ''; // Current category$title = '제목'; $description = '메타설명'; ?> "> " .. 2024. 6. 28.
toggle menu, 햄버거 토글 document.body.classList.add('js');var toggle = document.querySelector('#toggle-navigation');var menu = document.querySelector('#menu');var menuItems = document.querySelectorAll('#menu li a');toggle.addEventListener('click', function(){ if (menu.classList.contains('is-active')) { this.setAttribute('aria-expanded', 'false'); menu.classList.remove('is-active'); } else { menu.clas.. 2024. 6. 28.
PC에 XAMPP용 Imagick, ImageMagick 설치 하는법 여기대로 하니까 됨. (한국어로 바꿔놓고 했음)https://phpandmysql.com/extras/install-imagemagick-and-imagick-xampp/?utm_source=notesre&utm_medium=redirect IMAGEMAGICK 설치1. 필수 정보 얻기ImageMagick을 설치하려면 Windows 버전이 32비트인지 64비트인지 알아야 합니다.확실하지 않은 경우 Windows 시작 메뉴로 이동하여 설정 > 시스템 > 정보를 선택하여 정보 설정을 엽니다.장치 사양 제목 아래의 시스템 유형은 버전이 32비트인지 64비트인지를 나타냅니다.2. 소프트웨어 다운로드ImageMagick을 다운로드하려면 http://imagemagick.org 다운로드 페이지로 이동하세요 . 귀하.. 2024. 6. 27.
2024 웹디자인기능사 필기 + 실기 후기 (D-3 푸른마을) 1. 필기 후기 어차피 60점이 커트라인이라서 따로 교재없이 유튜브에서 필기 교육하는 부분 화면 캡쳐하여 10장 내외의 프린트물을 혼자 만들어 2일 정도 공부했다. 이때는 회사를 다닐 때라서 주말 이틀에 몰아서 공부하고 시험치는 당일인 월요일 오전에 벼락치기로 한번 더 훑었다. 시험은 휴대폰 전원을 끄고, 가방은 교실 뒤편으로 다 몰아놓고, 수험번호별로 앉아서 컴퓨터로 클릭하는 방식으로 쳤다. 나는 내 수험번호도 모르고 수험표도 출력할 생각을 못해서 급 당황했으나 어째어째 내 자리 잘 찾아서 쳤다. 수험표는 없어도 되지만 자기 수험 번호 정도는 포스트잇에 적어가야 할 듯하다.시험 시간 1시간인데 20분 만에 다 풀었고 모르는 건 대충 찍고 마쳤더니, 바로 점수가 떴다. 90점 맞았다. TMI : 나는 내.. 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.

티스토리툴바