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

안녕하세요 찐망고입니다. 관리자 페이지를 만들 때 차트 작업이 항상 고민되시죠?오늘은 디자이너와 퍼블리셔의 관점에서 어떻게 차트를 효과적으로 만들 수 있는지 알아보겠습니다. 1. 디자이너를 위한 차트 설계 가이드 1) 먼저 물어보세요! "이 차트의 목적이 뭘까? - 데이터 시각화의 목적전달하려는 정보: "누가 볼 차트인가요?" (일반 사용자? 전문가? 관리자?) 타겟 사용자: "어떤 내용을 전달하고 싶나요?" (매출 증가? 사용자 패턴?)"데이터 관계 표현: 데이터를 어떻게 비교하면 좋을까요?" (시간별? 항목별?) 2) 차트 종류 골라보기 - 적합한 차트 타입 선정라인 차트: 시간 흐름을 보여주고 싶다면? 바 차트: 항목을 비교하고 싶다면?파이 차트: 비율을 보여주고 싶다면? 스캐터 플롯: 데이터 간 ..

안녕하세요 찐망고 입니다. 어떤 버튼을 강조하고 싶거나,시선을 자연스럽게 유도하고 싶거나,전체 디자인에 시각적 리듬감을 주고 싶다면 포인트 컬러가 써 볼 수 있는데요. 레이아웃은 주로 중립적인 배경 색상(흰색이나 회색등)을 사용하고,포인트 컬러로 특정 요소(제목, 버튼, 활성화된 카드)만 강조하는 거죠.   포인트 컬러를 선택할 때는 다음의 요소를 고려하는 것이 좋습니다.1. 브랜드 컬러: 포인트 컬러는 보통 브랜드의 주 컬러를 반영하거나, 브랜드의 핵심 이미지를 표현하는 색이 가장 적합합니다. 브랜드 컬러를 포인트 컬러로 사용하면 사용자에게 일관된 인상을 주고, 브랜드 인지도를 높이는 데 도움이 됩니다. 브랜드 컬러는 주로 로고색으로 많이 쓰죠? 2. 보색 대비: 배경 색상과 대비되는 색을 사용하면 시..

안녕하세요 찐망고입니다.드디어..드디어 CSS가 추가로 지정되는 속성 없이 코드 한 줄로 요소를 수직정렬하는 기능이 생겼네요. 과거 요소들을 수직정렬하기 위해(특히 center) 행했던 수많은 수직정렬의 역사들이 주마등처럼 스쳐 지나가네요. 새로 코드가 생긴 건 아니고, 원래 flex나 grid에서 사용했던 CSS코드였는데요.flex나 grid 없이 사용이 가능하게 되었습니다. (와! 짝짝짝)align-content: center; 테스트를 여러 번 해보니 기본 좌우 정렬해서 수직정렬하는 건flex나 grid를 사용하면 될 것 같고a링크요소들처럼 버튼처리해서 만드는 요소들은 수직정렬하기가 편하겠어요. center 외 start, end로 값을 지정할 수 도 있겠지만 안 쓸 거 같죠..?크롬 123, 파이..

안녕하세요 찐망고입니다. 이번 포스팅에서는 자바스크립트의 getAttribute() 메서드와 HTML5의 data- 속성을 활용하여,마우스 이벤트에 반응하는 탭 구조를 만드는 방법을 소개하겠습니다. 아래 그림을 볼까요? 오른쪽 탭에 마우스를 올릴 때마다 왼쪽의 이미지가 바뀌는데요.HTML5의 data속성과 자바스크립트의 getAttribute() 메서드를 이용한 코드를 포스팅해볼까 해요 일단 getAttribute()는 JavaScript에서 사용되는 메서드로, HTML 요소의 속성(attribute)을 가져올 때 사용되는데요. 예를 들어, HTML 태그에 id, class, href 같은 속성이 있을 때, 해당 속성의 값을 가져오는 데 유용합니다.element.getAttribute(attributeN..

안녕하세요 찐망고입니다.오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요 SVG애니메이션의 핵심은 stroke-dashoffset인데요.stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성 중 하나로,stroke-dasharray와 함께 사용되며 경로를 따라 선을 그릴 때의 시작지점을 조정하는 역할을 합니다.  stroke-dasharray는 선을 일정한 패턴의 대시와 공백으로 나누는 속성인데,  위와 같은 코드인 경우 설정된 선의 5px만큼 그 뒤로 10px만큼의 공백을 반복하는 형태를 뜻합니다.  stroke-dashoffset은 기본적으로 0으로 설정되어 있으며, 을 증가시키면 대시패턴이 이동하여 경로를 따라 선이 그려지는 위치가 변경됩니다. JS를 이용하면..

안녕하세요 찐망고 입니다. 히어로 섹션에 동영상을 삽입하는 건 이젠 기업 웹사이트의 트렌드가 되었잖아요?그만큼 동영상은 웹사이트의 첫인상을 좌우하는 중요한 요소가 되었습니다. 그래서 제가 관련 포스팅도 몇 개 했었죠? iOS 에서 동영상 재생이 안되나요?안녕하세요 찐망고입니다.아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.요즘 기업사이트 추세가  히어로섹션에 영상을 많이 넣더라구요.거의 국룰이랄까..영상을uiweb.tistory.com  youtube iframe 연결하여 자동 재생하기안녕하세요 찐망고입니다. 전에 ios에서 동영상 재생 관련 포스팅을 했었는데요. 읽어보시는 걸 추천합니다. iOS 에서 동영상 재생이 안되나요? 안녕하세요 찐망고입니다. 아주 간단하지만 제법uiweb..

안녕하세요 찐망고입니다. 이전에 그라디언트를 이용하여 마우스 hover할때 밑줄 애니메이션 효과를 적용하는 포스팅을 한적이 있는데요. 마우스 호버 CSS 밑줄 효과, CSS hover 밑줄 애니메이션안녕하세요 찐망고입니다. 오늘은 마우스 hover시 텍스트에 밑줄이 들어가는 작업을 해볼 거예요 https://hobancf.or.kr/ 호반문화재단 Creating culture, connecting hearts. www.hobancf.or.kr https://www.yesan.go.kr/chusa.duiweb.tistory.com 오늘은 텍스트에 배경색이 아래서 위로 채워지는 효과를 포스팅 할 예정입니다. 예시 사이트를 보면 스크롤 이동시 텍스트에 배경색이 채워집니다.     CSS코드h2 { color..

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

안녕하세요 찐망고입니다.작년 여름에 개인정보취급방침에 대해서 포스팅했는데요. 개인정보처리방침안녕하세요 찐망고 입니다. 웹사이트에서 푸터에 해당하는 부분을 보면 꼭 들어가는 내용이 있죠?카피라이트, 사업자정보, 그리구 개인정보처리방침!!!!   개인정보처리방침이란?개인정보보uiweb.tistory.com 오늘은 웹사이트 저작권 표시 관련 포스팅을 해볼까해요네 맞아요 그친구 © ㅎㅎ  웹사이트 저작권표시란? 웹사이트 저작권 표시는 웹사이트의 콘텐츠가 저작권법에 의해 보호받고 있음을 알리는 역할을 합니다. 이는 법적 보호뿐만 아니라, 사용자들에게 콘텐츠를 무단으로 복제하거나 배포하지 않도록 경고하는 역할도 합니다.   저작권 표시의 중요성  법적 보호: 저작권 표시는 저작권 소유자가 콘텐츠에 대한 권리를 주장..

안녕하세요. 찐망고입니다. 오늘은 Apple Touch Icon 관련 포스팅을 해볼까 하는데요. Apple Touch Icon은 iOS기기에서 웹 사이트를 홈 화면에 추가할 대 사용하는 아이콘 입니다.이 아이콘을 설정하면 사용자가 웹 사이트를 홈 화면에 추가했을 때 표시되는 아이콘 이미지를 지정할 수 있습니다. 물론 Apple Touch Icon을 웹 사이트에 추가하는 것이 필수는 아니지만,홈화면 추가시 iOS 기기의 홈화면에 아이콘이 깔끔하게 표시됩니다.만약 이 아이콘이 없다면 기본 웹 브라우저 아이콘이나 웹사이트의 축소된 화면이 표시될 수 있는데 그거 정말 너무나 별로겠죠?또한 Apple Touch Icon을 설정하는 것은 최신 웹표준을 따르는 좋은 관행 중 하나입니다.   Apple Touch Ic..