찐망고'S 퍼블리싱그리고디자인

안녕하세요 찐망고입니다.이번에 CSS 레이아웃 수업을 진행하면서 학생들이 개념을 눈으로 직접 보면서 익힐 수 있도록 인터랙티브 강의자료를 만들었습니다.슬라이더로 값을 바꾸면 레이아웃이 실시간으로 바뀌는 방식이라 "이 값이 바뀌면 어떻게 되지?"를 직접 확인하면서 배울 수 있습니다. 강의자료 바로가기 https://jjinmanggo.github.io/frontend-lecture/ Frontend Lecture📏 CSS 단위 px, em, rem, %, vw, vh 등 CSS 단위 개념을 확인해요. 퀴즈jjinmanggo.github.io 수업 구성CSS Grid (9챕터)display: grid / repeat() / fr 단위minmax() / auto-fill vs auto-fitgrid-col..

안녕하세요, 찐망고입니다! 오늘은 새롭게 개편된 웹디자인 개발기능사 필기 출제기준을 기반으로, 필기시험의 핵심 내용을 한눈에 정리해보겠습니다. 주요 개념과 예상 문제 유형을 함께 살펴보면서, 시험 대비에 효과적으로 활용하길 바랍니다. 1. 프로토타입 기초 데이터 수집 및 스케치1-1. 기초 데이터 및 레퍼런스 수집웹디자인 프로젝트를 기획할 때 필요한 기초 데이터를 조사하고, 레퍼런스를 통해 디자인 방향성을 설정하는 과정입니다. 올바른 기초 데이터 수집 방법1. 사용자 설문조사 (User Research)웹사이트의 주요 타겟 사용자(연령, 성별, 관심사 등)를 분석하기 위한 방법인터뷰, 온라인 설문조사, 사용자 피드백 수집 등을 활용2. 경쟁사 웹사이트 분석 (Benchmarking)경쟁사 및 유사한 웹사..

안녕하세요, 찐망고입니다.올해부터 웹디자인기능사 자격증이 웹디자인 개발기능사로 개편되었습니다. 이에 따라 시험 방식과 과목 구성에도 변화가 생겼습니다. 기존보다 실무 중심의 평가 방식이 적용되었으며, 실기 시험 시간이 단축되었습니다.1. 시험 개요웹디자인 개발기능사 시험은 필기와 실기로 구성되며, 다음과 같은 방식으로 진행됩니다.필기시험: 객관식 60문항, 60분100점 만점 기준 60점 이상 합격CBT(Computer-Based Testing) 방식으로 진행실기시험: 3시간(기존 4시간에서 단축)실무 중심으로 진행되며, HTML, CSS, UX/UI 설계 등이 포함2. 필기시험 과목 변경기존의 디자인일반, 인터넷일반, 웹그래픽디자인에서 다음과 같이 변경되었습니다.웹디자인 구현웹페이지 제작주요 학습 항목..

안녕하세요 찐망고입니다.오늘도 클론 프로젝트를 하던 중 귀찮지만 막상 구현하면 보기 좋은 헤더 애니메이션작업과정을 공유해 드릴 건데요. 디테일은 귀찮아서 못하는 거지 막상 하면 만족도가 높..조만간 이런 공유들을 영상으로 보여드리고 싶은데.. (말만 몇 년째) 해당사이트 학생이 클론작업한 링크입니다 (3개월 유지예정) KRDS대한민국 정부 디자인 시스템 KRDS는 누구나 쉽게 정부 서비스를 경험할 수 있도록 가이드라인과 디자인 리소스 및 디자인 시스템 구축을 위한 모든 자료와 최신 정보를 제공한다.www.krds.go.kr  KRDS 클론 코딩  이 애니메이션의 핵심은 헤더를 줄이거나 헤더를 이동하는 게 아니고전체적인 콘텐츠를 위로 당긴다고 생각하면 되는데요처음 스크롤할 때 배너가 사라지고 헤더가 fix..

안녕하세요 찐망고입니다.CSS에서 min(), max(), clamp() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요. 이 함수들을 활용하면 보다 유연하고 직관적인 스타일링이 가능합니다. 특히 vw 단위를 많이 사용하는 요즘, CSS 속성 값을 동적으로 계산할 수 있다는 점에서 큰 장점이 있습니다.CSS비교함수관련 포스팅을 작년에 했었는데 해당사이트를 번역하고자 추가 포스팅을 해봅니다. 일단 이전글 링크 CSS min(), max(), clamp() 함수로 반응형 웹 디자인 완성하기안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게u..

안녕하세요 찐망고입니다.2025년도 벌써 두달이 지나갑니다.이번에는 반응형 웹을 위한 해상도 트렌드를 분석하면서,디자인 & 개발할 때 반응형 작업을 어떻게 하면 좋을지 정리해볼게요. 해당링크는 Statcounter입니다. Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage ShareTracks the Usage Share of Search Engines, Browsers and Operating Systems including Mobile from over 5 billion monthly page views.gs.statcounter.com PC해상도부터 비교해볼까요? (2024 vs 2025) 1920 × 1080의 ..

안녕하세요 찐망고입니다.간만에 swiper관련 포스팅을.. 이번반 학생이 클론 하는 사이트인데요.이 사이트에서 세로형태로 슬라이딩되는 섹션을 swiper를 이용해 구현했습니다.이를 통해 배경이 부드럽게 전환되며, 동시에 탭 버튼이 해당 배경과 연동되도록 만들었죠사용자는 텍스트 버튼을 클릭해 직접 원하는 슬라이드로 이동할 수 있습니다.   지금은 충전중 │ 현대자동차모두의 삶이 한층 더 편해지는 현대자동차 ACR을 통해 여행의 행복을 선물합니다. 현대자동차와 자유로운 제주로 지금 바로 떠나보세요.acrtrip.com 아래 캡처된 이미지는 Swiper를 활용해 세로방향으로 슬라이드 되는 섹션을 구현한 모습이구요텍스트버튼(탭)은 Swiper와 연동되어 해당 슬라이드에 맞는 텍스트가 강조됩니다.선택된 버튼은 배..

안녕하세요 찐망고입니다. CSS에서 min() 함수와 max() 함수는 반응형 웹 디자인에서 매우 유용하게 사용할 수 있는데요.vw단위를 많이 쓰고 있는 이 시점에서 CSS속성 값을 동적으로 계산할 수 있게 도와줍니다.  min() 함수 역할: 주어진 값들 중에서 가장 작은 값을 반환합니다. 주로 너비나 높이 혹은 폰트사이즈에서 최솟값을 지정할 때 사용합니다.사용예시:.tit { font-size: min(3vw, 20px)} min(3vw, 20px)은 3vw와 20px 중 더 작은 값을 폰트 크기로 사용한다는 뜻으로, (vw는 뷰포트 너비의 1%를 의미합니다.) 화면이 너무 넓어서 3vw가 20px보다 크게 된다면, 폰트 크기는 20px로 고정될 거고, 반대로 화면이 좁아서 3vw가 20px보다..

안녕하세요 찐망고입니다.오랜만에 reset문서를 수정해 봅니다.  1. 기본 HTML 요소의 초기화목적: 모든 기본 HTML 요소의 여백과 패딩을 제거하고, 기본 글꼴 스타일을 초기화.코드:html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strong, sub, sup, var,b, u, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,arti..

안녕하세요찐망고 입니다. 오늘은 navi요소에서 많이 쓰는 해당 요소를 클릭했을 때만 클래스를 추가하고나머지 요소들은 클래스를 제거하는 코드를 볼 건데요..탭이랑 비슷하죠? 1. 기본코드const navMenus = document.querySelectorAll(".navi > ul > li");navMenus.forEach(navMenu => { navMenu.addEventListener("click", () => { navMenu.classList.toggle("on"); })})  일단 위 코드는 클릭한 li요소들에게 on클래스가 추가됩니다.다시 클릭을 해야 제거되겠죠? 2. 개선된 코드const navMenus = document.querySelectorAll(".nav..