https://github.com/hjinn0813/namecard

2023.11.27 내일배움카드 K-디지털 기초역량훈련 최종과제
https://github.com/hjinn0813/namecard

css html javascript

Last synced: about 2 months ago
JSON representation

2023.11.27 내일배움카드 K-디지털 기초역량훈련 최종과제

• Host: GitHub
• URL: https://github.com/hjinn0813/namecard
• Owner: hjinn0813
• Created: 2024-01-30T01:45:02.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-07-24T12:59:56.000Z (5 months ago)
• Last Synced: 2024-07-24T14:50:45.543Z (5 months ago)
• Topics: css, html, javascript
• Language: CSS
• Homepage: https://namecard-hjcho.netlify.app
• Size: 659 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 명함제작 페이지 만들기

2023년 11월 08일~12월 23일까지 내일배움카드를 이용해 온라인으로 수강했던 K-디지털 기초역량훈련 강의 최종과제







## 프로젝트 소개

- **배포주소**: https://namecard-hjcho.netlify.app

- **제작기간**: 2023.11.25(토) ~ 11.27(월)

- **사용기술**

	![HTML](https://img.shields.io/badge/HTML-E34F26?style=for-the-badge&logo=html5&logoColor=white)

	![CSS](https://img.shields.io/badge/CSS-1572B6?style=for-the-badge&logo=css3&logoColor=white)

	![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge&logo=javascript&logoColor=black)

	![Netlify](https://img.shields.io/badge/Netlify-00C7B7?style=for-the-badge&logo=netlify&logoColor=white)

- **제작내용**

	- 이름, 직책, 전화번호, 이메일을 입력 후 버튼을 누르면 아래에 명함이 생성되는 페이지

   

	- '만들기' 버튼에 클릭하면 실제로 눌려지는 듯한 효과 구현 (css의 transition, transform)

- **특이사항**

	- input box에 내용을 입력하고 버튼을 누르지 않아도 명함이 생성되거나, 버튼을 눌렀는데도 명함이 생성되지 않는 오류가 있었음. 버튼을 클릭하면 명함이 만들어지는 기능은 JavaScript에서 addEventListener 함수를 이용하여 구현함.

## 예시 사진

#### 메인 페이지

![main](https://github.com/hjinn0813/namecard/blob/main/photos/main.png)

#### 결과 페이지

![result](https://github.com/hjinn0813/namecard/blob/main/photos/result.png)

#### 피드백

![feedback](https://github.com/hjinn0813/namecard/blob/main/photos/Feedback.jpg)