I like JavaScript I'm Publisher I try and try and try
I'm Front-end
call:
82+10-2964-6913 e-mail:
kjy_1998@naver.com
resume bright-mode
I like
taking picture
traveling & activities

my skills

HTML 96%
CSS 96%
JavaScript 94%
jQuery 96%
PHOTOSHOP 94%
ILLUSTRATOR 96%
XD 96%
UI DESIGN 94%

project1 casio Korea

overview

casio Korea

카시오는 세이코, 시티즌, 놋토를 비롯해 일본을 대표하는 시계 브랜드입니다. 기존의 정적인 디자인에서 동적이고 다양한 레이아웃으로 리뉴얼했습니다.
color
primary
#333333
point
#003296
secondary
#ADADAD
secondary varient
#EFEFEF
typo

noto sans kor

무에서 유를 창조하다

open sans eng

creating something from nothing

explore casio

RENUAL RESPONSIVE STANDARDS

HTML CSS JAVASCRIPT JQUERY SLIDE TAB SCROLL

coding epilogue

HTML/CSS

플렉스, 그리드를 이용해 다양하고 유지보수 가능한 레이아웃을 구성하였습니다. %로 작업하여 기본적으로 다양한 해상도에 반응할 수 있으며 768px 이하의 모바일에 최적화되었습니다. 가상선택자, 트랜스폼을 이용한 다양한 위치인지 효과를 구현했습니다.

JavaScript/jQuery

스크롤에 반응하여 변형되는 헤더와 수동 슬라이드를 구현하였습니다.

project2 shallWe

overview

shallWe

셸위는 현지가이드의 특색을 살린 가이드매칭 O2O 플랫폼입니다. 가이드 플랫폼으로서의 기능에 충실한 구성과 사용자를 위해 다양한 필터와 탭 메뉴, 레이아웃을 구현하여 브랜딩 하였습니다.
color
primary
#2D2D2D
primary varient
#757575
point
#DD6571
point varient
#48689A
typo

noto sans kor

가이드를 넘어서, 여행객을 넘어서 함께 즐겨요

noto sans eng

Not as a guide, not as a tourist, just enjoy it together

explore shallwe

TEAM BRANDING RESPONSIVE STANDARDS

HTML CSS JAVASCRIPT JQUERY SLIDE TAB SCROLL

coding epilogue

HTML/CSS

접근성을 고려하여 헤딩태그 아웃라인을 구성하였고 플렉스, 그리드, %, rem를 활용하여 모든 해상도에 반응하여 변형되는 레이아웃을 구성하였습니다. 딤처리, 트랜스폼을 이용하여 사용자 위치인지 효과를 구현하였으며 CSS와 HTML을 모듈화하여 유지보수를 쉽게 하였습니다.

JavaScript/jQuery

스크롤에 반응하여 나타나는 아이템과 변형되는 필터박스, 메인동영상을 구현하였습니다. 메인동영상에는 확장, 닫기, 정지/재생, 자동재생 효과를 구현하였습니다.

project3 osan City

overview

osan City

주요 타겟층의 연령층이 높고 "신뢰"가 중요한 관공서 사이트 특징을 고려한 정적인 디자인에 조금의 동적인 효과를 구현하여 브랜딩 하였습니다.
color
primary
#1D1D1D
primary varient
#999999
point
#334B7D
primary varient
#ADADAD
typo

noto sans kor

교육도시 오산시

noto sans eng

Educational City of Osan

explore osancity

RENUAL ADAPTIVE STATIC

HTML CSS JAVASCRIPT JQUERY SLIDE TAB

coding epilogue

HTML/CSS

접근성을 고려하여 스킵메뉴를 구현하였으며 시멘틱 태그의 제목을 입력해주었습니다. 새창이 열리는 a 요소의 경우 title 속성에 "새창열기"를 입력하여 사용자가 미리 인지할 수 있도록 하였습니다. 색상반전, 트랜스폼을 활용한 가벼운 동적효과와 긴 문장에 말줄임 효과를 적용하였습니다.

JavaScript/jQuery

3개의 각기 다른 탭 메뉴를 구성하였습니다. 슬라이드의 전체 아이템 개수와 현재 슬라이드 위치를 유동적으로 받아오는 스크립트를 구현하였습니다.

project4 pixar

overview

pixar

픽사는 세계에서 제일 멋진 애니메이션 제작사로 평가받고 있습니다. 대표 캐릭터와 애니메이션을 사진과 동영상으로 담아냈습니다.
color
primary
#1D1D1D
primary varient
#ADADAD
point
#3B5998
primary varient
#EFEFEF
typo

nanum gothic kor

애니메이션을 통해 삶을 이야기하다

nanum gothic eng

talk about life through animation

explore pixar

RENUAL RESPONSIVE STANDARDS

HTML CSS JAVASCRIPT JQUERY SLIDE TAB SCROLL

coding epilogue

HTML/CSS

유동적인 반응형을 위해 %로 작업하였으며 모든 해상도에 반응하여 레이아웃이 구성되도록 하였습니다. 새 창이 열리는 a 요소의 경우 title 속성에 "바로 가기"를 입력하여 사용자가 미리 인지할 수 있도록 하였습니다. background-attachmenet: fixed, 가상 선택자, 트랜스폼, 색상 반전을 이용한 효과를 적용해 주었습니다.

JavaScript/jQuery

스크롤에 반응하여 헤더의 배경색이 변하며 내비게이션 호버 시 픽사 캐릭터가 나오도록 하였습니다.

project5 liverpool FC

overview

liverpool FC

리버풀 FC는 리버풀을 연고지로 한 잉글랜드 프리미어 리그의 프로 축구 클럽입니다. 리버풀 FC의 선수소개를 역동적으로 담아냈습니다.
color
primary
#FFFFFF
typo

philosopher eng

You'll Never Walk Alone

explore liverpoolfc

RENUAL DYNAMIC

HTML CSS JAVASCRIPT JQUERY SLIDE TAB

coding epilogue

HTML/CSS

iframe 태그를 통해 유튜브 영상을 불러왔으며 writing-mode 속성을 사용하여 텍스트를 세로 배치하였습니다.

JavaScript/jQuery

jQuery를 처음 배울 당시 진행했던 프로젝트로 포지션 값과 z-index를 통해 슬라이드를 구현하였습니다. 탭 기능을 비롯 키보드를 통한 슬라이드 조작 등 여러 역동적인 효과를 적용하였습니다.
I'm currently working on cross-browsing. hide for today