{"id":15580966,"url":"https://github.com/noxknow/portfolio_web","last_synced_at":"2025-03-29T08:15:15.325Z","repository":{"id":192846990,"uuid":"631563272","full_name":"noxknow/Portfolio_Web","owner":"noxknow","description":"포트폴리오 웹 페이지 클론 코딩","archived":false,"fork":false,"pushed_at":"2023-09-05T15:13:45.000Z","size":805,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-03T21:57:35.596Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/noxknow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-04-23T12:24:37.000Z","updated_at":"2023-08-29T12:23:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"b38b272b-aa2c-4fd7-9ed1-8005241792d9","html_url":"https://github.com/noxknow/Portfolio_Web","commit_stats":null,"previous_names":["noxknow/portfolio_web"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxknow%2FPortfolio_Web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxknow%2FPortfolio_Web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxknow%2FPortfolio_Web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/noxknow%2FPortfolio_Web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/noxknow","download_url":"https://codeload.github.com/noxknow/Portfolio_Web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246156416,"owners_count":20732397,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-02T19:40:50.473Z","updated_at":"2025-03-29T08:15:15.306Z","avatar_url":"https://github.com/noxknow.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :notebook_with_decorative_cover: Portfolio_Web\n\nhttps://github.com/noxknow/Portfolio_Web/assets/122594223/45ad3710-e42d-4eba-9f39-87f45f1ee231\n\n# 목차\n\n- [1. 문제 해결 과정](#bookmark_tabs-문제-해결-과정) \u003cbr/\u003e\n    - [1.1 Main](#main) \u003cbr/\u003e\n        - [1.1.1 position](#position) \u003cbr/\u003e\n        - [1.1.2 애니메이션](#애니메이션) \u003cbr/\u003e\n    - [1.2 About me](#about-me) \u003cbr/\u003e\n    - [1.3 Portfolio](#Portfolio) \u003cbr/\u003e\n    - [1.4 Contact With Me](#contact-with-me) \u003cbr/\u003e\n\n# :bookmark_tabs: 문제 해결 과정\n\n## Main\n\n### position\n\nmain.css 에서 transform: translateX(-50%);를 안해주면 좌측 상단만 중앙으로 가기때문에 해줘야 한다.\n\n```css\nmain button.mouse {\n    background-color: transparent;\n    position: absolute;\n    bottom: 1rem;\n    left: 50%;\n    transform: translateX(-50%);\n    color: white;\n}\n```\n\n### 애니메이션\n\n**`애니메이션 만들기`**\n\n구체적으로는 upDown이라는 이름의 애니메이션을 1초 동안 ease-in-out 타이밍 함수로 반복적으로 실행하는 것을 의미한다.\n\nupDown 애니메이션은 요소를 수직 방향으로 이동시키는 효과를 가지며, ease-in-out 타이밍 함수는 애니메이션이 처음에는 천천히 시작하고, 중간에는 빠르게 진행되다가 마지막에 다시 천천히 끝나는 효과를 가지는 타이밍 함수이다.\n\ninfinite 속성을 사용하면 애니메이션이 무한 반복된다. 따라서 이 코드는 요소를 1초 간격으로 수직 방향으로 이동시키는 애니메이션을 계속해서 실행하게 된다.\n\n**`@keyframes`**\n규칙은 CSS 애니메이션에서 사용되며, 원하는 스타일 변화를 선언하여 애니메이션을 만듭니다.\n\n```css\nmain button.mouse {\n    background-color: transparent;\n    position: absolute;\n    bottom: 1rem;\n    left: 50%;\n    transform: translateX(-50%);\n    color: white;\n    animation: upDown 1s ease-in-out infinite;\n}\nmain h2 span::after {\n    content: \"\";\n    height: 40px;\n    width: 3px;\n    background-color: #fff;\n    display: inline-block;\n    animation: blink .7s ease-in-out infinite;\n}\n\n@keyframes blink {\n    0% {\n        opacity: 1;\n    }\n    100% {\n        opacity: 0;\n    }\n}\n\n@keyframes upDown {\n    0% {\n        bottom: 1rem;\n    }\n    50% {\n        bottom: 1.5rem;\n    }\n    100% {\n        bottom: 1rem;\n    }\n}\n```\n\n## About me\n\n### media Query\n\nmedia query로 창이 줄어들면 영역의 크기도 변하도록 만들 때 flex를 설정해둔 부분이 있다면 정렬할때는\n\n```css\nsection .about-self {\n        flex-direction: column;\n        align-items: center;\n    }\n```\n\n혹은 아래와 같이 한다면 정렬시킬 수 있다.\n\n```css\nsection .contact-me {\n        flex-wrap: wrap;\n    }\n```\n![image](https://github.com/noxknow/Portfolio_Web/assets/122594223/ee4cf45b-e419-4e31-b9b7-b8a21a3aa301)\n![image](https://github.com/noxknow/Portfolio_Web/assets/122594223/94d21b46-583a-4080-94de-91dc748cdf47)\n\n## Portfolio\n\n`display: flex` 대신에 `float: left` 를 쓰는 경우 그 부분의 높이값이 나오지 않는 경우가 있는데 이를 해결하기 위해서 아래와 같이 선언을 해줘야 한다.  \n`display: flex` 가 가능한 경우 flex를 이용하기.\n\n```css\nsection .portfolio-me::after {\n\tcontent: \"\";\n\tdisplay: block;\n\tclear: both;\n}\n```\n\n## Contact With Me\n\nlabel의 for부분과 input태그의 id부분이 같은 이름으로 들어가게 된다면, label의 부분을 클릭할 때 input태그에 깜박이는 커서가 들어가게 된다.\n\n![image](https://github.com/noxknow/Portfolio_Web/assets/122594223/7f67b5eb-7c63-4366-8cb8-a83478b9731f)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoxknow%2Fportfolio_web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnoxknow%2Fportfolio_web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnoxknow%2Fportfolio_web/lists"}