jeongah story 알고 싶은 코드가 있으시면,
게시글 아무대나 댓글주세요!

UI/UX 콘셉트 아이디어 도출하기 UI/UX 개발 과제의 목표 충족을 위하여 사용자 리서치 결과를 토대로 UI/UX 콘셉트 아이디어를 도출할 수 있다. 프로토타입 제작을 위하여 도출된 아이디어를 분석하고 UI/UX 개발(제품)에 적합한 아이디어를 선별할 수 있다. 패스트 프로토타입 제작을 위하여 선별된 아이디어를 문서화 할 수 있다. 요구사항분석 요구사항 분석은 제품 또는 서비스의 사용자를 포함한 이해관계자들의 요구사항을 파악하고 이를 고려하여 제품 또는 서비스가 이와 부합하도록 하기 위한 조건을 결정하는 과정이 주가 되는 업무로 이후 개발 생명주기의 시발점이 되며, 아래와 같이 정의됩니다. 시스템이나 소프트웨어 요구사항을 정의하기 위해 사용자의 요구 사항을 조사하고 확인하는 과정. 시스템이나 소프트웨..

스마트 웹 콘텐츠 디자인 - UI/UX 콘셉트 디자인 기획 pickple 꽃꽂이 꽃판매 사이트 가상으로 꽃꽂이를 할 수있는 콘셉트를 디자인 해본 영상입니다.

Animation - Dog See the Pen Dog Animation by jeongahlee (@jeongahlee) on CodePen. 이미지 출처 :https://cdn.dribbble.com/users/46302/screenshots/5562622/nice.png

Border-Radius border-radius : border-top-left-radius | border-top-right-radius | border-bottom-right-radius | border-bottom-left-radius border01 border02 border03 border04 border05 border06 border07 border08 border09 border10 .block {width: 140px; height: 140px; margin: 40px; text-align: center; line-height: 140px; color: #fff; float: left;} .block > div {transition: all 0.3s ease-in-out} .block..

Transform 변환은 엘리먼트의 좌표를 조작하여 위치나 크기, 회적 각도 등을 변경하는 기법입니다. 변환함수는 이동(translate), 확대(scale), 회전(rotate), 기울이기(skew) 등의 주용 4가지 함수와 행렬변환, 원근변환이 있습니다. 이동(translate) 확대(scale) 회전(rotate) 기울이기(skew) 2d변환 translate(x,y) scale(x,y) rotate(angle) skew(x-angle,y-angle) 3d변환 translate3d(x,y,z) scale3d(x,y,z) rotate3d(ax,y,z,angle) x축 변환 translateX(x) scaleX(x) rotateX(angle) skewX(angle) y축 변환 translateY(y) ..

Blend Efect Background-blend-mode normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity Porperty Description normal 배경색의 기본 값을 정의합니다. multiply 더 어두운 색으로 변경됩니다. screen 더 밝은 색으로 변경됩니다. overlay 원래 색상의 농도와 밝기를 변경합니다. darken 어두운 색으로 변경됩니다. lighten 밝은 색으로 변경됩니다. color-dodge 기본 색상을 밝게 합니다. saturation 채도의 변화로 색상이 변경됩니다. color 색을 통해 색상을 변경합니다. luminosity ..

Animation Sample Animation - Bar See the Pen Animation-bar by jeongahlee (@jeongahlee) on CodePen. Animation - Loading Circle 1 See the Pen Animation-Circle by jeongahlee (@jeongahlee) on CodePen. Animation - Loading Circle 2 See the Pen Animation - Circle Loading by jeongahlee (@jeongahlee) on CodePen. image 출처 : https://cdn.dribbble.com/users/46302/screenshots/4208056/cover.png

Animation animation : {name} {duration} {timing-fuction} {delay} {iteraction} {direction} {fill-mode} {play-state} Property Description animation-name @keyframes에 지정된 이름을 설정합니다. animation-duration 애니메이션이 실행되는 시간을 설정합니다. animation-timing-fuction 애니메이션이 키프레임 움직임을 설정합니다. animation-delay 엘리먼트가 로드되고 나서 언제 애니메이션이 시작될지 설정합니다. animation-iteraction 애니메이션 반복 횟수를 설정합니다. animation-direction 애니메이션 방향을 설정합니다...