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

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

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

안녕하세요 찐망고입니다.더보기진짜 제가 CSS도 그렇구 HTML도 그렇구 피그마도 그렇고꽤 포스팅을 하는데왜 폰트만 검색되는거죠? 😭😭😭😭하지만 수업 내용을 공유하는게 목적인 블로그니까..  sticky 포스팅을 작년에 했는데요또해요.. 또맞아요 먼가 적용방법을 쉽게 설명하지 않은 것 같아 또..이건 이전에 쓴 포스팅입니다. CSS position: sticky 완벽 사용법 & 적용 가능한 사이트예시안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요..position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다.잘 쓰면 너무 좋은 데 absoluuiweb.tistory.com  sticky는 본인 요소를 고정할때나 (..

안녕하세요 찐망고 입니다. VScode는 익스텐션이 많은데요.그중 open in browser를 설치하면 단축키를 이용하여 HTML파일을 브라우저로 열 수 있습니다. 익스텐션 아이콘을 클릭하고, Open In Default Browser를 검색합니다.  설치하면 되겠죠? 설치 후 마우스 우클릭 해보면 Open In Default Browser메뉴가 생겼습니다.  Alt + B는 현재 열려 있는 HTML 파일을 기본 브라우저에서 열기 위한 단축키이고,Shift + Alt + B는 브라우저를 선택해서 HTML 파일을 열 수 있는 단축키입니다.

안녕하세요 찐망고입니다.CSS의 너무 기초적인 부분을 포스팅하려고 합니다. CSS(Cascading Style Sheet)란 웹 페이지의 겉모습을 정의하고 꾸미는 데 사용되는 스타일 시트 언어인데요. 주요 기능은 다음과 같습니다:  레이아웃 정의: 페이지의 구조와 배치를 지정합니다.스타일 설정: 텍스트의 글꼴, 색상, 크기 등을 지정합니다.디자인: 배경, 테두리, 여백 등을 설정하여 페이지의 시각적 디자인을 조정합니다.반응형 디자인: 다양한 장치(데스크톱, 태블릿, 스마트폰 등)에 맞게 레이아웃과 스타일을 조정합니다.   CSS는 기본적으로 선택자(Selector)와 선언(Declaration)으로 구성되며, 선언은 속성(Property)과 값(Value)으로 이루어집니다. h1 { color: ..

안녕하세요 찐망고입니다.오늘은 favicon에 대해 포스팅 할겁니다.  파비콘이란?  모든 브라우저의 탭엔 제목이 있고 그옆엔 저렇게 파비콘이 붙어요.물론 없어도 큰일 나지는 않지만, 있으면 이뻐! 파비콘은 브라우저 탭, 북마크, 즐켜찾기 목록에서 웹사이트를 대표하는 작은 아이콘입니다.이를 통해 사용자는 쉽게 웹사이트를 인식하고 찾을 수 있어요.일관된 브랜드 이미지 구축에도 도움이 되구요. 파비콘의 중요성사용자가 여려개의 탭을 열어놓았을때, 탭이 아주 작아지는 경험들 다들 있으시잖아요?파비콘이 있으면 제목이 뭔지 몰라도 웹사이트를 빠르게 식별할 수 있습니다. 또한, 일부 검색 엔진은 파비콘을 검색결과에 표시하기도 합니다.당연히 사용자의 클릭률(CTR)을 높이는데 기여할 수 있죠 제일 중요한건 파비콘이 없..

안녕하세요찐망고 입니다. 오늘은 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..

안녕하세요 찐망고입니다. 오늘은 position속성 중 sticky를 써볼 건데요..position관련 CSS를 포스팅 해놓은 게 없네요? 이런;; html에서 포지션역할은 여러 가지가 있습니다.잘 쓰면 너무 좋은 데 absolute를 남발하는 개발자들 보면 단전에서부터 화가..요즘은 그러신 분 안 계시죠?  sticky를 아직 안 써본 분이 계시려나..아마 ie에선 지원을 안 해서 쓰고 싶어도 못쓰는 그런일들이 있었죠. sticky속성은 relative와 fixed가 같이 적용된다고 생각하면 되는데요.   W3Schools online HTML editorThe W3Schools online code editor allows you to edit code and view the result in you..

안녕하세요 찐망고입니다.오늘은 강조를 뜻하는 인라인요소인 요소와 요소, 요소에 대해 포스팅해볼 건데요.  html마크업을 하면서 주의할 점은 요소의 의미를 파악하는 것입니다.브라우저에서 글자가 두꺼워지고 기울어지고 여백이 생기고 하는 것들은 css로 수정이 가능하니까요.  요소와 , 모두 강조의 의미를 뜻할 때 사용하는 요소인데요.각각 다른 방식으로 강조를 나타내요   요소 요소는 주로 중요한 텍스트의 의미를 나타내는데,해당 텍스트가 문서의 중요한 부분임을 강조하는 데 사용합니다.예를 들어, 금융상품의 가격이나 경고메시지와 같이 중요한 정보를 강조하는 데 사용하죠그리고 스크린 리더등 보조기술을 사용하는 사용자에게 중요한 내용임을 전달합니다.논리적으로 중요한 텍스트를 강조하죠주의: 이 상품은 ..