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

안녕하세요. 찐망고 입니다.swiper의 pagination은 여러 가지로 커스텀할 수 있는데요.오늘은 fraction타입으로 숫자에 "0"을 추가할 거예요. 물론 구글링 하면 많은데 이 포스팅은 최신버전!! 기준으로다...var swiper = new Swiper(".mySwiper", { pagination: { el: ".swiper-pagination", type: "fraction", },}); 기본적인 fraction은 현재 슬라이드 번호 / 전체 슬라이드 개수 형식으로 이루어진다.숫자 10 미만으로 01,02 이런 식으로 넘버링이 붙으려면 따로 작업을 해줘야 하는데  아래 코드를 확인해 보면 된다. var swiper = new Swiper(".mySwiper", { pagi..

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

안녕하세요 찐망고 입니다.오늘은 함수에서 중요한 return을 이해해보도록 포스팅 할건데요 return이란?return은 함수의 결과를 함수 밖으로 돌려주는 역할을 하는데, 함수 내부에서 어떤 값을 계산하거나 처리한 후, 그 결과를 다른 곳에서 사용할 수 있게 해주는 것을 뜻합니다. 쉽게 말하면:함수를 하나의 기계라고 볼 때, 기계에 무언가를 넣어서 (입력값, 인자) 작업을 하고 나면, 기계는 그 작업의 결과(출력값)를 내놓는데, 그 결과를 밖으로 내보내는 게 바로 return입니다~~~~function addNumbers(a, b) { return a + b;}const result = addNumbers(5, 3); // 함수의 결과가 result에 저장됨console.log(result); // ..

안녕하세요 찐망고입니다.저번 포스팅엔 기본슬라이드에서 버튼을 눌렀을 때 fade효과가 나오는 슬라이드를 만들어 보았는데요 swiper effect) fade와 slide동시에 구현하기안녕하세요 찐망고입니다.오래간만에 swiper 관련 포스팅을 하네요.생각보다 고민을 많이 한 코드라 공유하고자 같이 포스팅해봅니다  클론 한 사이트는 노보셀바이오입니다.http://novocellbio.com/uiweb.tistory.com 무한슬라이드는 loop의 형태를 false에서 true로 변경해 주면 됩니다. 슬라이드가 loop형태로 바뀌면 슬라이드가 무한 반복되도록 복제된 슬라이드가 추가되어, 실제슬라이더의 인덱스 위치가 바뀌므로realIndex대신 activeIndex를 사용해야 합니다. 그렇다고 이전 코드에서 ..

안녕하세요 찐망고입니다.오래간만에 swiper 관련 포스팅을 하네요.생각보다 고민을 많이 한 코드라 공유하고자 같이 포스팅해봅니다  클론 한 사이트는 노보셀바이오입니다.http://novocellbio.com/ 노보셀바이오 novocellbio.com   탭을 누르면 fade효과가 적용되는 탭형태의 슬라이드입니다. 기존 웹사이트는 owl플러그인을 사용했는데요저는 그거 안 쓰고 싶으니까요.. 저분자 아미노산 탁월한 배양기술 고품질 세포치료제 ..

안녕하세요 찐망고입니다. 이전에 쓴 SVG애니메이션에 스크롤이벤트를 이용하여 원하는 스크롤 위치에서 SVG애니메이션이 진행되게 작업해 보려고 합니다. 이전글 참고 SVG Animate: stroke-dashoffset, SVG Gradient안녕하세요 찐망고입니다.오늘은 SVG 애니메이션 관련 포스팅을 시작해 볼게요 SVG애니메이션의 핵심은 stroke-dashoffset인데요.stroke-dashoffset은 SVG에서 경로(패스)의 테두리에 적용할 수 있는 속성uiweb.tistory.com  를 먼저 걸어줍니다.  스크롤 관련 js를 추가합니다.window.addEventListener("scroll", function() { const svgElement = document.querySelect..

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

안녕하세요 찐망고입니다.오늘은 피그마를 이용하여 말풍선 컴포넌트를 만들어 볼 건데요.하나 만들어 놓으면 어떤 텍스트를 써도 어떤 방향으로도 사용하기 편한 말풍선이 가능합니다.일단 기본적인 Auto Layout과 Variant 정도만 알면 될 것 같아요 이전에 썼던 포스팅을 읽으면 피그마 말풍선을 쉽게 만들어 볼 수 있는데,컴포넌트로 만들기 위해선 몇 가지 작업이 더 필요해서 새로 포스팅해봅니다.   기본적으로 도형을 이용해서 툴팁박스를 만들 때아래쪽 꼬리 부분은 방향이 top, right, bottom, left로 바뀔 수 있으니 Auto Layout을 이용하여 만들 거예요.   도형 두 개를 합치고 꼭 해야할 것꼭 constrain을 맞춰주셔야 해요. 이후 컴포넌트로 등록합니다.컴포넌트 크기 확인해보세..

안녕하세요 찐망고입니다. 웹에서 자주 사용 되는 말풍선(툴팁, 채팅 말풍선 등)을 피그마로 만들어 볼 건데요.Auto Layout과 Constraints를 이용해서 만들 수 있습니다.  일단 말풍선 모양을 만들 건데요.사각형 도형과 삼각형 도형을 합치고컴포넌트로 등록해야 합니다.   텍스트를 쓰고 섹션 프레임을 씌워서 Auto Layout을 먼저 해줍니다.말풍선과 Auto Layout을 해줄 건데요말풍선 컴포넌트를 잘라서 Frame1안에 붙여 넣어줄 거예요 둘이 겹쳐야 하는데 겹쳐지지 않고 저렇게 따로 놀아요그래서 저 Union컴포넌트를 앱솔처리해줄 거예요. 위 아이콘을 누르면 Union컴포넌트 아이콘 모양이 달라지면서 텍스트와 겹쳐집니다.참고로 오토레이아웃방향은 세로나 가로나 상관없고요중요한 건 레이어..

안녕하세요 찐망고 입니다.이포스팅은 Apple의 기본 영문 글꼴인 SF-Pro폰트를 Windows환경에서 사용할 수 있도록 돕기위해 작성하였습니다.디자인을 하다보면 Windows에서 Apple폰트가 필요할때가 있잖아요. https://developer.apple.com/fonts/ Fonts - Apple DeveloperGet the details, frameworks, and tools you need to use system fonts for Apple platforms in your apps.developer.apple.com 물론 이사이트에서 폰트를 다운 받을 수 있지만,dmg파일은 또 따로 zip프로그램을 받아 압축을 풀어야 하는 점.. ttf파일을 공유합니다      otf파일은 용량이 큰 ..