20대의 자산

개발자 도구를 누르고 기록 버튼을 누르자~버튼, 메뉴, 하나 하나 다 눌러보고 페이지 잘 넘어가는지 확인하고 기록 중지 누르고 기다리면 아래와 같은 화면이 뜬다. 여기까지 만들어본 내 웹사이트의 성능이 어떤지 이것저것 눌러보고 이동도 해본 결과 다행히 빨간색은 안 뜬다!!!성능이 안 좋으면 빨간색이 막 뜬다고 나왔는데 내꺼는 다행히 안 뜬다.

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2024. 2. 18. 15:57

국비 프론트 수업 중 API를 불러와서 웹사이트를 만드는 과제를 주셨는데 한번도 해본 적이 없어서 많이 어려웠다. 이 이미지 API의 장점은 url을 불러오지 않아도 검색만으로 불러올 수 있고 용량을 확 줄일 수 있다는 장점이다. $(document).ready(() => { $("#search-form").submit((e) => { const perPage =20; // 예: 20개의 항목을 가져옴 let searchText = $("#photo").val(); let responseContainer = $("#img-thumbnail");// 결과창을 저장하기 위한 컨테이너 let userApi = `Ypo4TFbTd4iHDksg9sNx7CyyPNF7f4fly2xQ_orZb7o` let url = ..

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2024. 2. 13. 23:58

대충 만들어봤는데 자바스크립트 하다가 오랜만에 하닌가 너무 헷갈린다. A place to share knowledge and better understand the world By continuing you indicate that you agree to Quora’s Terms of Service and Privacy Policy. Continue with Google Continue with Facebook * { padding: 0; margin: 0; } body { background-image: url("//qsf.fs.quoracdn.net/-4-ans_frontend_assets.images.home_page_bg_desktop.png-26-4770753d59b970e1.png"); bac..

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2023. 7. 27. 20:52

HTML 코드 To Do LIST ADD new item here CSS코드 * { margin: 0; padding: 0; } body { background-color: #ffc0cb; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 80vh; width: 100vw; font-family: "Encode Sans", sans-serif; } .title { font-size: 30px; font-weight: 600; color: black; letter-spacing: 1px; margin: 30px 0; } .todo-list { width: 450px; padding: 20px..

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2023. 6. 12. 17:34

큼직한 부분을 중심으로 html로 틀을 잡기 1. Youtube로고 2. 비디오 3. #태그 4. 비디오 제목(날짜) 5. 버튼(좋아요 버튼, 공유, 저장, 깃발) 6. 유튜버 로고, 구독 버튼

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2023. 4. 22. 21:10

예전에 만들었던 프로젝트인데 도메인 만료 에다가 API기간도 만료되고 서비스도 종료되서 프로젝트를 다시 불러 올 수 없었다.그래도 열심히 만들었는데 내버려 두자니 아까워서 다시 살렸다. 컨셉을 바꿔 영화가 아니라 마음에 드는 사진을 기록할 수 있게 다시 재구성 하였다. 처음에 사진 링크를 넣을 때 계속 인코딩이 안된 화면만 나와서 단위 테스트로 계속 타고 올라가서 어디서 부터 문제 였는지 살펴본 후,문제 점을 찾았다.파이썬으로 사이트 크롤링을 할 때 아래 있는 og태그가 다 일치 해야한다.특히 사진을 가지고 오는게 큰 목적이라 사이트 전체를 분석해준다, 사진만 나온 페이지가 아니라 사진이 속해 있는 사이트도 같이 나와야 하는것. 왼쪽은 사진 주소만 나와 있는것이고 오른쪽은 사진을 제공해준 사이트 주소도 ..

WEB-Front end/*웹사이트 만들기 & 토이 프로젝트 2022. 7. 3. 17:32