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

안녕하세요 찐망고 입니다. 오늘은 Form요소를 CSS를 이용하여 디자인하는 포스팅을 해볼건데요. Form요소들은 기본적으로 본인들의 스타일이 적용되어있는데요 잘 살려서 작업해 보도록 하죠 기본 예시는 selecto웹사이트를 참고하였습니다. 수업 예제로 셀렉토 사이트를 클론코딩 해봤는데요. 오른쪽에 지역검색과 매장명, 매장서비스검색에 체크박스를 디자인해보려구 합니다. // HTML 지역검색 도/시선택 강원 경기 서울 인천 구/군 선택 매장명 02 매장 서비스별 검색 무선인터넷 기능 흡연시설 보유 주차가능 야외테라스 보유 모바일 가맹점 select요소를 이용해서 드롭다운 목록을 만들었는데 처음 보이는 부분의 디자인을 위해 span요소를 감싸주었구요 체크박스는 체크박스형태는 CSS가 가능하지만 체크모양 자체..

안녕하세요 찐망고입니다.벌써 5번째 카테고리인 플러그인 포스팅으로 넘어왔네요 저는 피그마 플러그인을 많이 사용하는 편은 아닌데요.그래도 있으니까 편하다 하는 것들 위주로 포스팅 해볼게요.  일단 이전글.. 0. styles등록 (text, color) - 이전글 참조2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHuiweb.tistory.com1. Layout grid2023.07.05 - [피그마] - 피그마 Layout grid 피그마 L..

안녕하세요 찐망고입니다  오늘은 피그마의 Component와 Variants에 대해서 포스팅 해볼까 해요일단 피그마 이전글들을 참고해주시구요  0. styles등록 (text, color)  피그마 ui-스타일가이드, 스타일 등록하기안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHuiweb.tistory.com1. Layout grid 피그마 Layout grid안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을uiweb.tisto..

안녕하세요 찐망고입니다 포스팅 순서가 지금 두서없긴 한데 양해를... HTML에서 FORM은 사용자로부터 입력을 받기 위해 사용되는 요소이고 웹페이지에서 데이터를 전송하거나 처리하기 위한 컨테이너 역할을 하는데요 일반적으로 폼은 텍스트입력, 체크박스, 라디오버튼, 드롭다운 목록등과 같은 다양한 입력요소를 포함할 수 있죠. Select요소는 FORM요소에서 드롭다운 목록역할을 하는 요소인데 사용자에게 선택할 수 있는 옵션 목록을 제공합니다. 제자들이 많이 하는 질문 중 하나는 모바일에서 꼭 Select요소를 사용해야하는지에 대한 질문이었어요 이 질문이 왜 나왔냐면 현재 드롭다운 목록형태의 구조를 가지는 디자인요소들이 생각보다 꽤 많이 Select요소 대신 다른 구조로 작업 되고 있거든요 이런 디자인들 많이..

안녕하세요찐망고입니다 오늘은 피그마의 Constraints에 대해서 포스팅 해볼까 해요피그마 이전글들을 참고해주시구요 피그마의 constraints는 디자인 요소의 크기와 위치를 프레임안에서 제어하는 기능인데요. 컨스트레인트를 사용하면 디자인요소(예: 프레임, 그룹, 컴포넌트 등)를다른 요소나 프레임에 상대적으로 맞출 수 있습니다. 이를 통해 디자인 요소의 크기를 유지하거나, 요소 간의 간격을 일정하게 유지하거나, 요소를 중앙에 정렬하는 등의 작업을 수행할 수 있어요. 아래 그림을 볼까요? 모바일 사이트를 디자인 하는 중인데 당연히 모바일 viewport도 하나의 사이즈는 아니잖아요?해당 사이즈에서 각각의 디자인요소들이 viewport의 크기에 따라 어떤식으로 보여줘야 할지컨스트레인트기능을 사용하여 보여..

안녕하세요 찐망고입니다.아주 간단하지만 제법 많이 질문하는 부분이라 미리 포스팅을 해볼까해요.요즘 기업사이트 추세가  히어로섹션에 영상을 많이 넣더라구요.거의 국룰이랄까..영상을 넣을거다 라고 하면HTML요소로는 VIDEO요소가 있고내가 다른 서버에 있는 영상을 좀 가지고 쓸거다 라고 하면  IFRAME요소로도 가능합니다  // VIDEO요소 메인에 영상만 넣으면 멈춰있는 상태로 들어가요그래서 자동재생(autoplay) 하는게 좋은데 자동재생 속성을 넣어도 멈춰있단 말이죠.사용자입장에서 처음  가보는 페이지에 접속하자마자시끄러운 소리와 함께 (나름 고르고고른 bgm이라 할지라도) 영상이 재생되면 당황하겠죠?그래서 음소거(muted)를 하는 거고, 음소거가 되야 자동재생이 됩니다.한번 재생하고 멈출거 아니..

안녕하세요 찐망고입니다 오늘은 피그마의 Auto Layout에 대해서 포스팅 해볼까 해요 엄청 편리하고 좋은 기능이라 생각합니다요!! 일단 피그마 이전글들을 참고해주시구요 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그마 Layout grid 피그마 Layout grid 안녕하..

안녕하세요 찐망고입니다. 얼마전 setInterval()을 이용하여 숫자 카운팅하는 포스팅을 했었는데요 2023.06.28 - [WEB/JS코드] - JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); JS) 숫자 카운트 setInterval(), setTimeout(), toLocaleString(); 안녕하세요 찐망고 입니다. 이전 포스팅에 숫자 카운팅 하는 코드를 올려봤는데요.. 이번엔 한개가 아닌 두개나 세개의 요소에 동시에 숫자가 카운팅되게 코드를 짜볼거에요 일단 이전포스팅을 uiweb.tistory.com 아무래도 저런 작업을 main문서에 넣다보면 스크롤 이벤트도 막 하고 싶잖아요? 다알아요 하고싶은거.. 물론 스크롤이벤트가 가능한 플러그인..

안녕하세요 찐망고입니다. 할게 많은 와중에 피그마 포스팅 중이고 피그마는 진짜 딱 몇개의 키워드만 공부하시면 끝나는 그만큼 기능은 적지만 알찬 프로그램이에요. 참고로 너무 많은 기능을 지원하는데 그런건 나중에 따로 썰 풀도록 하고 0. styles등록 (text, color) - 이전글 참조 2023.07.03 - [피그마] - 피그마 ui-스타일가이드, 스타일 등록하기 피그마 ui-스타일가이드, 스타일 등록하기 안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESH uiweb.tistory.com 1. Layout grid 2023.07.05 - [피그마] - 피그..

안녕하세요 찐망고 입니다. 웹을 어느정도 정리하고 피그마강의를 써볼까 했는데.. 이렇게 두서가 없어??? 피그마도 순서대로 업로드해야하는데 일단 급한것부터 올려볼게요.. 수업시간에 CJFRESHWAY사이트를 작업하면서 기본적인 스타일가이드도 만들어보았습니다. 스타일가이드가 필요한 이유는 앞으로 진행될 디자인과 마크업(퍼블리싱)때문인데요. 특히 퍼블리싱할땐 자주 사용하는 컬러와 폰트, 폰트사이즈를 미리 CSS로 셋팅해놓고 작업을 하면 아주 편리하기 때문에 디자인과 따로 이렇게 가이드를 만들어주면 좋습니다. 포토샵으로 디자인을 하다가 피그마로 디자인을 하면 참 편한게 일단 피그마는 텍스트 선택시 폰트의 정보가 바로 뜨는데요. Headline/30px Title Bold라고 되어있는 부분은 이런식으로 피그마에..