헬로,재민

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다. 피그마 레이아웃 그리드그리드의 형태는베이스라인 그리드 - 텍스트가 놓일 위치를 결정하는 균일한 수평선 격자원고 그리드 - 단순히 페이지 위에 텍스트가 놓인 1단 그리드모듈 그리드 - 웹사이트에 많이 활용. 교차하는 열과 행으로 레이아웃을 만드는 그리드 그리드 용어컨테이너 - 사진 이미지 텍스트 등 디자인요소가 들어가는 부분 container , content width라고 부름 컬럼 - 열 또는 단 커터 - 컬럼과 컬럼 사이 마진 -좌우 여백그리드를 보기 안보기 단축키는 shift + G 레이아웃 그리드   권장 가이드라인은  모바일 화면 (375) 4컬럼 - 마진 16 -거터 16~20 ..

유데미 스나이퍼팩토리 2024. 11. 21. 18:02

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.  컬러를 이용하여 효과적으로 메세지를 전달하고, 궁극적으로는 더 나은 사용자 경험을 만든다  컬러 플러그인 플러그인 Foundation Color Generato명도 추출 / 명암비 알려주는 플러그인  플러그인 Tailwind CSS Color Generator명도 추출 / 스타일과 베리어블로 만들어 주는 플러그인   컬러 대비 검사 플러그 인웹접근성 검사 플러그 Use Contras Color Contrast 색상 참고 사이트 https://www.colourlovers.com http://pantone.krhttp://design-seeds.comhttps://colorhunt..

유데미 스나이퍼팩토리 2024. 11. 20. 23:16

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다. 오늘은 UX에 관한 개념을 듣게 되었다.사용자의 경험을 바탕으로 개선안을 찾는 방법이라 할 수 있다. 서비스를 이용하며, 각자의 서비스에 대한 생각과 경험을 지니고있는 사람들을 사용자라고 일컫는다.페르소나도 비슷한 유형이다. 사용자의 경험은 연령, 성별, 시간, 장소, 맥락에 따라 다양하다. 예를 들어 , 뱅킹 이용시 누구는 돈을 보내기 위해 가입했고, 펀드를 위해 가입했고, 적금 상품을 알아보고 가입했다 등이 있다. 경험요소는 What 과 How로 구분된다  What - 어떤 은 정보 기능 형태를 말한다. 약간 눈에 보이는것들이고How - 어떻게 는 이용과정, 절차, 안내를 말하면서 추상..

유데미 스나이퍼팩토리 2024. 11. 19. 20:36

본 후기는 본 후기는 [유데미x스나이퍼팩토리] UI/UX 포트폴리오 과정 2기(B-log) 리뷰로 작성 되었습니다.   1일차 디자인 직무의 이해디자인에서도 업무 범위가 있다  서비스기획 - 디자이너 - 개발자 이렇게 구성되 있는데  서비스 기획은 전략을 짠다고 생각하면된다전략,서비스, 상품 기획과 리서치,스토리보드를 짠다고 보면 된다.디자이너는 리서치와 와이어프레임 프로모션 디자인등을 한다 개발자는 디자인을 퍼블리싱 하거나 스토리보드를 짠다. 직무별 디자이너의 업무에는 웹다자인(GUI) / UI디자인 / UX디자인 / 프로덕트 디자인이 있고, 업무와 툴사용도 직무마다 다르다. 웹페이지나 이벤트 페이지, 제품페이지 등을 제작하는 웹 디자인UI의 문제를 파헤치고 기획과 UI개선 구축등을 하는  UI디자인 ..

유데미 스나이퍼팩토리 2024. 11. 18. 17:27

" 선배 드래그해주세요~ 드롭도 같이? "   자 오늘 필자는 저 카드를 드래그하여 빈곳에 드롭하여 적용시키는 일을 저지를거다 이곳에 많은 기능을 모아두었으니 참고하면 좋을 거 같다!https://inpa.tistory.com/entry/드래그-앤-드롭-Drag-Drop-기능#  🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는inpa.tistory.com 페이지 안에 먼저 다 구현하고 나중에 컴포넌트를 따로 만들 예정이다, 먼저 초기 구성된 사진을 보면   이렇게  컴포넌트는 만들어..

유데미 스나이퍼팩토리 2024. 7. 21. 21:57

매번 나오는 API 호출에서 나오는 이 친구  '비동기 처리' 이것이 무엇인가? 자바스크립트에서 비동기처리가 가능한 이유? Event Loop - Task Queue 와 Call Stack   자바스크립트는 싱글쓰레드이지만 논블로킹 I/O로 작동함으로써 비동기로 실행이 가능합니다  Call Stack 코드가 실행될 때 호출 스택이 쌓인다.함수를 실행하면 해당 함수의 기록을 스택 맨 위에 추가(Push)함수를 결과 값을 반환하면 스택에 쌓여있던 함수는 제거(Pop)Task QueuesetTimeout 이나 Setinterval 같은 비동기 함수의 콜백 함수, 이벤 트 핸들러가 일시적으로 보관되는 영역Callback Queue, Macrotask Queue 라고도 불린다.Microtask QueuePromi..

프론트엔드 2024. 5. 26. 22:59

24년 5.24일 첫날 수업으로는 OT를 듣고 점심부터 자바스크립트의 기본을 공부하게되었다.이미 아는 내용들이 많았지만 그래도 복습하는 차원으로 학습한 것들을 기록해 놓는다.! 자바스크립트의 역사최초로 공개된 모질라 -> 모자이크 브라우저가 나옴 1994년 -> 모질라에서 나와 넷스케이프 -> 넷스케이프 내비게이터를 만듬1995년에 넷스케이프에서 넷스키에프 내비게이터 안에 라이브스크립트를 공개 후 홍보를 위해 자바스크립트로 명명함1996년 ->마이크로 소프트사 -> 인터넷 익스플로우 와 그안에 jscript 출시 1997년 cma에 이름 의뢰 -> ecmascript1 1998-> ecmascript2 ~ 2000->ecmascript4 2006- 웹개발자들의 열광의 j-quary등장 호환성 통일 3사 ..

유데미 스나이퍼팩토리 2024. 5. 26. 20:54

이 챕터는 10장 객체 리터럴과 긴밀한 연결이 되어있습니다객체리터럴에 의한 객체생성 방식도 있지만 이외에도 생성자 함수를 이용해 객체를 생성하는 방식을 살펴보아요!17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다.빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다.프로퍼티?? - 키와 값으로 구성되있다 , 객체의 상태를 나타내는 값 , 프로퍼티를 참조하고 조작하면 매서드// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'Lee';생성자 함수란 new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수를 말한다. 생성자 함수에 의해 생성된 객체를 ..

모던 자바스크립트 2024. 5. 15. 16:14