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

안녕하세요 찐망고입니다오늘은 tab과 swiper슬라이드를 연결할 건데요.예전 jQuery때랑 코드 부분이 조금 달라져서 포스팅해 봅니다.  1. Tab과 슬라이더를 연결2. Tab클릭 시 슬라이더가 첫 시작위치로 로드 되어야 함3. Tab클릭시 슬라이더는 모두 loop처리되어야 함 이 세 가지 조건에 맞는 슬라이더를 구현해 보도록 합니다. Tab부분은 기본적인 리스트 형태로 마크업을 할 거고요.리스트 하나는 ALL버튼입니다.처음 로드 되었을 때와 ALL버튼을 누르면 전체 swiper-slide가 다 보이게 할 거예요. 아래는 html코드입니다. ALL EYE LIP BASE OTHERS  플러그인은 swiper를 이용하여 따로 ..

안녕하세요 찐망고입니다.ai플러그인 관련 포스팅을 해달라고 했는데..제 맘에 쏙 드는 플러그인이 없어 포스팅을 안 하려다가..숏츠나 릴스보고 혹 하신 분들에게 이 글을 전합니다. 이전에 추천한 플러그인 중에 html.to.design이라는 플러그인이 있었죠?문서 링크를 연결하면 피그마 파일로 짠 하고 만들어주는 플러그인이었죠. 하지만 완벽하지 않다고...  관련포스팅글 피그마 추천 플러그인안녕하세요 찐망고입니다.벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요.그래도 있으니까 편하다 하는 것들 위주로 포스팅 해uiweb.tistory.com   이번에 포스팅할 플러그인은 디자인 캡처이미지를 클론디자인해 주는 플러그인인데요.Codia Ai Design..

안녕하세요 찐망고입니다. 피그마가 업데이트 이후 툴바나 패널이 조금 바뀌었어요.오토레이아웃이나 컴포넌트, 베리언트, 컨스트레인트 등도 조금 바뀌었지요.영상을 만들면 조금 편할 거 같은데 왜 저는 아직도 텍스트로 포스팅을 하려고 하는 걸까요.옛날사람이라 그럼... 이전 글 참고 해주시고 포스팅을 이어할게요. 피그마 컴포넌트, 베리언트 (Component, Variants)안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일uiweb.tistory.com 피그마에서 컴포넌트와 베리언트는 디자인 시스템을 효율적으로 관리하고 재사용성을 높이는..

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

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

안녕하세요. 찐망고 입니다. 오늘은 보그코리아 웹사이트의 마지막 하단 섹션을 클론 해 볼 건데요. 보그 코리아 (Vogue Korea)컬렉션부터 스타일, 쇼핑, 뷰티, 라이프스타일, 셀러브리티까지 지금 가장 핫한 트렌드 소개www.vogue.co.kr 하단섹션은 왼쪽과 오른쪽으로 나뉘어서왼쪽 섹션은 grid나 flex를 이용한 리스트섹션, 그리고 오른쪽은 배너모양의 이미지가 한 장 있어요.스크롤 시 오른쪽 이미지가 고정되어 푸터섹션에 도착할 때까지 움직입니다.   오른쪽 배너이미지는 처음엔 absoulte였다가 다시 fixed로 변경할 예정이고,fixed변경 시 좌표값이 부모요소 기준에서 뷰포트 기준으로 변경되므로그 부분을 염려해서 CSS작업을 해볼 예정이에요 왼쪽과 오른쪽을 저렇게 fix클래스 요소로 ..

안녕하세요. 찐망고 입니다.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를 사용해야 합니다. 그렇다고 이전 코드에서 ..