728x90

Click! 👉 https://dasolpark.github.io/Dasol_CSS_Web_And_Mobile_App_Design/

 

Colorful eCommers

lorem Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione, consequatur maxime? Adipisci modi consectetur molestias quis debitis. Nam cupiditate odio sit, numquam sequi debitis necessitatibus. Amet doloremque sunt asperiores officiis. Lear more

dasolpark.github.io

Github 👉https://github.com/DasolPark/Dasol_CSS_Web_And_Mobile_App_Design

 

DasolPark/Dasol_CSS_Web_And_Mobile_App_Design

Flexbox, Grid, Postcss, CSSNext, CSS4, Parcel. Contribute to DasolPark/Dasol_CSS_Web_And_Mobile_App_Design development by creating an account on GitHub.

github.com

✨ 특징

Flexbox, CSS Grid, PostCSS, CSSNext, CSS4

💻 결과물
Website and Mobile App

Colorful eCommers Website
Meal Mobile App
New Mobile App 1
New Mobile App 2

 

Recipe Mobile App
Artistic Social Network Mobile App
Architecture Website
Artistic Blog Website

728x90

📳

Click! 👉 https://dasolpark.github.io/Dasol_CSS_WhatsApp_Clone/

 

Chats

Archived Chats 0 Broadcast Lists New Group

dasolpark.github.io

Github👉https://github.com/DasolPark/Dasol_CSS_WhatsApp_Clone

 

DasolPark/Dasol_CSS_WhatsApp_Clone

Let's make WhatsApp Design Clone with Responsive CSS - DasolPark/Dasol_CSS_WhatsApp_Clone

github.com

해외에서 많이 사용하는 메신저앱 WhatsApp의 디자인 패턴HTML CSS를 이용해 복제해 보았습니다.

📳모바일이나 💻데스크톱 등 어떤 브라우저에서도 디자인이 무너지지 않도록, 반응형 CSS를 적용하였으며,
JavaScript를 이용해 현재 시간 띄우기, 전화 목록 지우기, 채팅 메세지 등록을 간단히 구현해 보았습니다.

해당 프로젝트는 width:375, height:638 크기에 최적화되어 있습니다.

좌측 Status, 우측 Calls Page
좌측 Calls - Edit 기능, 우측 Calls - New Call Page
좌측 Chats, 우측 Chats - Chat Page
Settings Page

728x90

💪

Click! 👉 https://github.com/DasolPark/Dasol_JS_WorkoutTimer

JavaScript와 반응형 CSS를 사용하여 데스크톱 또는 모바일에서 사용할 수 있는 운동 도우미 타이머 어플리케이션입니다.

📌운동 종목과 종목의 세트를 상세히 작성할 수 있으며, 각 세트별로 완료한 시간을 체크해줍니다.
💡운동 종목과 세트는 추가 또는 삭제가 가능하며, 운동을 완료하면 완료된 시간을 수정할 수 없습니다.

Date Object를 이용하여 현재 시간을 표시하도록 만들었으며, 브라우저 Local Storage에 닉네임을 저장할 수 있도록 했습니다.
스탑워치는 setTimeout()을 이용하여 시간이 계속 증가될 수 있도록 하였습니다.
또한, DOM을 이용하여 종목이나 세트 element가 추가되거나 삭제될 수 있도록 제작하였습니다.

시작 화면과 운동이 입력된 화면
운동 시간을 체크하며 진행되는 화면
데스크톱 전체 화면

 

  1. 익명 2021.01.14 00:09

    비밀댓글입니다

    • 익명 2021.02.08 20:24

      비밀댓글입니다

+ Recent posts