Hello.
안녕하세요,웹 퍼블리셔 '이정아' 입니다.
사용자를 위해 친화적인 인터페이스를 구성하여 쉽게 페이지를 찾아볼 수 있도록 하며
꼼꼼함과 열정을 바탕으로 성장하는 디자이너, 퍼블리셔가 되도록 노력할 것입니다.
안녕하세요,웹 퍼블리셔 '이정아' 입니다.
사용자를 위해 친화적인 인터페이스를 구성하여 쉽게 페이지를 찾아볼 수 있도록 하며
꼼꼼함과 열정을 바탕으로 성장하는 디자이너, 퍼블리셔가 되도록 노력할 것입니다.
90
90
70
70
80
웹 표준을 준수한 사이트를 만들어 보았습니다.
사이트에는 메뉴, 슬라이드, 탭기능, 동영상, 팝업기능 등
여러기능을 넣어서 작업하였습니다.
| Category | Source | Related keywords |
|---|---|---|
| HTML | index.html Click! | HTML5 |
| CSS | style.css | CSS3 |
| CSS | reset.css | CSS3 |
| CSS | lightgallery.css | CSS3, lightgallery |
| JS | jquery.js | jQuery, slick |
웹 표준을 준수한 반응형 사이트를 만들어 보았습니다.
사이트에는 팝업 갤러리 형식 사진보기 기능, 슬리이드,
탭기능, 동영상, 마우스 오버 효과 등 다양한기능을
넣어서 작업하였습니다.
| Category | Source | Related keywords |
|---|---|---|
| HTML | index.html | HTML5 |
| CSS | style.css | CSS3 |
| CSS | reset.css | CSS3 |
| CSS | lightgallery.css | CSS3, lightgallery |
| JS | jquery.js | jQuery, slick |
메가박스 사이트를 만들어 보았습니다.
사이트에는 포토샵으로 디바이스별로 그리드를 나눈다음, 메인페이지를
포함하여 큐레이션, 고객센터, 멤버쉽 페이지 등을 작업하였습니다.
| Category | Source | Related keywords |
|---|---|---|
| HTML | index.html | HTML5 |
| CSS | style.css | CSS3 |
| CSS | reset.css | CSS3 |
| CSS | bootstrapTheme.css | CSS3, bootstrapTheme |
| JS | jquery.js | jQuery, slick |
“꽃집” 사이트를 만들어 보았습니다.
사이트에는 NCS의 UI/UX Engineering 과정을 참고하여 작업하였습니다.
| Category | Source | Related keywords |
|---|---|---|
| HTML | index.html | HTML5 |
| CSS | style.css | CSS3 |
| CSS | reset.css | CSS3 |
| CSS | lightgallery.css | CSS3, lightgallery |
| JS | jquery.js | jQuery, slick |
CSS 효과를 이용한 "rocket"애니메이션입니다.
HTML에서 구조를 잡은 후 HTML에서 작업한 각각의 class에 맞게 CSS효과를 적용하여 로켓, 불꽃, 스파크, 배경(우주), 별의 모습을 표현했습니다. 또한, animation(keyframes)과 transition 속성을 이용하여 로켓과 별의 움직임이 자연스럽게 보이도록 했습니다.
캔버스 요소(canvas element)를 이용한 "snow"애니메이션입니다. 캔버스요소는 HTML5의 일부로서 2차원 모양과 비트맵 그림의 스크립트 작성이 가능하여 동적이게 눈이 내리는 스크립트를 써서 표현하였습니다.
벡터 그래픽스(Scalable Vector Graphics, SVG)는 2차원 벡터 그래픽을 표현하기 위한 XML 기반의 파일 형식을 사용하여 SVG Text Animation을 표현하였습니다. text안에는 keyframe을 사용하여 선값에 애니메이션을 주고 색상을 black & yellow를 사용하여 대비효과로 더욱 글이 강조 되어 보이도록 작업하였습니다.
GSAP "JET" Animation을 표현하였습니다. GSAP는 기존 CSS Animation이나 자바스크립트 Animation보다 탁월한 퍼보먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리입니다. 애니메이션 안에는 TweenMax의 TimelineMax 기능과 CSS 속성인 transform의 translateY, scale, ease를 이용하여 자연스러운 움직임의 애니메이션을 구현하였습니다.
Mouse Hover Effect animation 입니다.
마우스를 오버했을 때, 문구가 나타나도록 표현하였으며,
추가적으로 jquery를 사용하여 이미지와 어울리도록
꽃눈이 떨어지도록 작업하였습니다.
Parallax image animation 1 노을진 산 입니다.
포토샵으로 하나하나 그린다음, 제일 가까운 부분의 그룹부터 먼 그룹까지 그림을 그룹으로 묶은다음 마우스 휠을 내렸을 때, 원근감이 느껴지도록 표현하였습니다.
Parallax image animation 2 겨울 산 입니다.
포토샵으로 하나하나 그린다음, 제일 가까운 부분의 그룹부터 먼 그룹까지 그림을 그룹으로 묶은다음 마우스 휠을 내렸을 때, 원근감이 느껴지도록 표현하였습니다.
Whether you’re looking for answers, would like to want to let me know how I did,
you’ll find many ways to contact me right here.
