사용한 스킬:
- HTML
- CSS
- JavaScript
소개:
- 게임 시작 버튼을 클릭하면 메인 화면으로 이동 (addEventListener를 사용하여 화면 교체)
- 야구 규칙에 따라 공을 타격하고, 결과를 확률적으로 계산하여 화면에 표시 (Math.random 사용)
- 게임 동작 중 메시지 및 캐릭터 위치 변경 (classList를 사용하여 요소에 클래스를 추가 및 제거)
간단한 게임을 통해 JavaScript의 동적 기능 활용을 학습하고 적용하였습니다.
Hera 화장품 쇼핑몰 홈페이지 제작
사용한 기술:
- HTML
- CSS
- JavaScript
- React
- MySQL
소개:
Hera 화장품 쇼핑몰 홈페이지를 제작하였습니다. 다양한 기술을 사용하여 웹 사이트의 구축과 기능 구현을 담당하였습니다.
1. HTML, CSS, JavaScript:
- 웹 페이지의 레이아웃 및 디자인을 구성하였습니다.
- 사용자 경험을 향상시키기 위해 인터랙티브한 요소와 애니메이션을 구현하였습니다.
- 웹 페이지의 동적인 부분을 JavaScript를 활용하여 처리하였습니다.
2. React:
- React를 사용하여 화장품 쇼핑몰의 사용자 인터페이스를 개발하였습니다.
- React 컴포넌트를 활용하여 재사용 가능하고 모듈화된 UI 요소를 구축하였습니다.
- 상태 관리를 위해 React의 상태 관리 라이브러리나 컨텍스트를 활용하였습니다.
3. MySQL:
- 데이터베이스로 MySQL을 활용하여 사용자 정보, 상품 정보, 주문 정보 등을 관리하였습니다.
- 데이터베이스 설계와 쿼리 작성을 통해 데이터의 구조화와 효율적인 검색 및 조작을 지원하였습니다.
다양한 기술을 조합하여 Hera 화장품 쇼핑몰 홈페이지를 개발하였으며, 사용자 친화적인 UI와 원활한 기능 동작을 제공하였습니다.
Nexon 게임 홈페이지 클론 코딩
사용한 기술:
- HTML
- CSS
- JavaScript
- React
소개:
Nexon 게임 홈페이지를 클론 코딩하였습니다. 다양한 기술을 사용하여 웹 페이지의 레이아웃을 구성하고 컴포넌트를 활용하여 동적인 기능을 구현하였습니다.
1. HTML, CSS, JavaScript:
- 웹 페이지의 구조와 스타일을 HTML과 CSS로 구성하였습니다.
- Flexbox, 그리드 레이아웃 등을 사용하여 반응형 디자인을 구현하였습니다.
- JavaScript를 활용하여 인터랙티브한 요소와 사용자 경험을 향상시키는 기능을 구현하였습니다.
2. React:
- React를 사용하여 Nexon 게임 홈페이지의 사용자 인터페이스를 개발하였습니다.
- 컴포넌트 기반 개발 방식을 활용하여 UI 요소를 모듈화하고 재사용성을 높였습니다.
- React의 가상 DOM과 상태 관리 라이브러리를 활용하여 빠른 렌더링과 유연한 상태 관리를 구현하였습니다.
3. 기타 일반적인 기술들:
- 반응형 웹 디자인을 위해 미디어 쿼리를 사용하여 다양한 화면 크기에 대응하였습니다.
- CSS 전처리기인 Sass를 사용하여 스타일 시트를 구조화하고 재사용 가능한 스타일을 관리하였습니다.
- 모던 JavaScript 문법과 ES6+의 기능을 활용하여 코드의 가독성과 유지보수성을 개선하였습니다.
다양한 기술을 활용하여 Nexon 게임 홈페이지를 클론 코딩하였으며, 사용자 친화적인 UI와 다양한 동적 기능을 구현하여 웹 페이지를 완성하였습니다.
Use this area of the page to describe your project. The icon
above is part of a free icon set by
Flat Icons. On
their website, you can download their free set with 16 icons,
or you can purchase the entire set with 146 icons for only
$12!
Use this area of the page to describe your project. The icon
above is part of a free icon set by
Flat Icons. On
their website, you can download their free set with 16 icons,
or you can purchase the entire set with 146 icons for only
$12!
Use this area of the page to describe your project. The icon
above is part of a free icon set by
Flat Icons. On
their website, you can download their free set with 16 icons,
or you can purchase the entire set with 146 icons for only
$12!
