[FE] 영화 검색 사이트(바닐라JS) - (3) 하단부_영화 목록

🖐️ 구현 목표 🖐️ - TMDB 연동 - 부트스트랩 Cards 이용해서 TMDB에서 받아온 영화 api 정보 출력 - 카드 클릭시 영화 id값 alert 창 띄우기 - 마우스를 가져다대면 애니메이션 효과 추가 01 html 영화 포스터 이미지, 영화 제목, 영화 내용(줄거리), 평점 등을 가져와서 카드로 만들기 위해서 부트스트랩에 있는 Cards를 이용하였다. 그리고 모든 카드들을 div로 묶어서 css를 변경해주기위해 div에 mycards 클래스를 적용해주었다. 02 CSS mycards는 각 카드들을 하나로 묶어놓은 커다란 div 덩어리이고 크기와 위치를 지정해주었다. 또한, col은 그 안에 있는 각각의 카드들의 css를 지정해주었는데 모서리를 둥글게하고 위치를 조정해서 카드 색상에 맞춰 배경색..

• format_list_bulleted Study of Development/Front-End
• · 2024. 1. 8.
• textsms

[FE] 영화 검색 사이트(바닐라JS) - (2) 중단부_검색창

🖐️ 구현 목표 🖐️ - 영화 검색 텍스트, input, 부트스트랩 button 삽입 - 검색 시 조건에 맞는 영화만 출력하기 위해 비우기 기능 구현 - input 입력 후, button 클릭시 조건에 맞는 영화 검색 기능 - input 입력 후, Enter key 클릭 시에도 조건에 맞는 영화 검색 기능 - 입력이 없는 상태로 button 혹은 Enter key 를 눌렀을때 새로고침(처음 화면으로 돌아가기) - 대소문자 구분 없이 조건에 맞는 영화 검색 기능 01 html 검색창을 만들어주기 위해 "영화 검색 : "문자열과 input 태그를 사용하여 사용자가 입력을 할 수 있도록 하고 button을 추가해준다. 그리고 이것들을 하나의 div로 묶었다. button은 bootstrap의 버튼을 이용하여 ..

• format_list_bulleted Study of Development/Front-End
• · 2024. 1. 8.
• textsms

[FE] 영화 검색 사이트(바닐라JS) - (1) 상단부_타이틀

🖐️ 구현 목표 🖐️ - 로고 이미지 그려서 삽입 - 로고 이미지 클릭시 새로고침 01 html 로고를 타이틀로 지정해주기위해 이미지를 불러오고 css를 이용하여 로고의 크기와 위치를 조정해주었다. 그리고 로고가 클릭 될 시 원본으로 다시 돌아가는 기능을 구현하기 위해 onclick을 사용해서 클릭되면 미리 작성해둔 search() 함수가 실행되도록 한다 02 CSS img_movie 클래스를 지정해서 이미지 자체 크기를 지정하고 가운데 정렬을 해주기 위해 div로 묶어서 top 클래스를 따로 만들어서 text-align을 통해 가운데 정렬을 해주고 원하는 정도로 위치를 지정해준다. .top { text-align: center; margin: 10px auto 10px auto; } .img_movie..

• format_list_bulleted Study of Development/Front-End
• · 2024. 1. 8.
• textsms

[PJ] 바닐라JS 영화 검색 사이트

🏆구현 화면🏆 사이트 링크 : https://limhyerin.github.io/Movie_Search/ TMDB api를 활용하여 영화 정보들을 가져와서 웹 페이지에 연동하고 검색창에 찾고자하는 영화의 이름을 작성하고 "Enter 키" 혹은 "검색 버튼"을 클릭하면 해당 영화만을 띄워주고 카드를 클릭했을때 해당영화에 해당하는 영화 id값을 alert 창에 띄우는 프로그램 🏆구현 목표🏆 ✔️ 상단부 : 타이틀 - 로고 : 이미지 그려서 삽입 - 로고 이미지 클릭시 새로고침 ✔️ 중단부 : 검색창 - 영화 검색 텍스트, input, 부트스트랩 button 삽입 영화 검색 : 검색 - 검색 시 조건에 맞는 영화만 출력하기 위해 비우기 기능 - input 입력 후 button 클릭시 조건에 맞는 영화 검색 기..

• format_list_bulleted Project/web
• · 2024. 1. 8.
• textsms

숫자 맞추기 게임

01 구현 목표 입력칸에 숫자를 입력하고 확인을 눌렀을때 정답을 맞추면 게임이 끝나는 게임으로 맞추지 못하면 입력한 숫자들을 예측한 숫자들 옆에 계속 보여주고 남은 기회가 몇번 남았는지를 알려주게 된다. 또한, 정답에 얼마나 가깝고 먼지 직관적으로 보여주기 위해 원을 통해 추론을 도와준다. 02 코드 HTML 더보기 숫자 맞추기 게임 20이상 120이하의 랜덤한 숫자를 맞춰보세요. 기회는 10번 입니다. 확인 예측한 숫자들: 남은 기회: 10 CSS 더보기 html { font-family: sans-serif; } body { background-color: #e2e8f0; width: 50%; max-width: 750px; min-width: 480px; margin: auto; } #contain..

• format_list_bulleted Project/web
• · 2024. 1. 5.
• textsms

[FE] 프로젝트 - 추억앨범(1) : 웹 페이지 구현

[ 프로젝트 - 추억앨범 ] 나만의 추억앨범의 상단부와 플로팅 박스, 카드들을 구현해보았다. 아직 기능은 전혀 없는 웹 페이지이고 앞으로 추억 저장하기 버튼을 클릭했을때 플로팅 박스가 toggle()함수를 통해 접혔다, 펴지는 기능과 직접적으로 앨범의 이미지 주소와 제목, 날짜, 내용을 입력하고 기록하기 버튼을 클릭했을때 카드가 추가되고 저장이 되는 기능을 배워 추가할 것이다. 01 부트스트랩, 구글 폰트 CDN 추가 1) 부트스트랩을 적용 2) 구글 폰트를 적용 @import url('https://fonts.googleapis.com/css2?family=Gowun+Batang&family=Gowun+Dodum&family=Nanum+Myeongjo&display=swap'); * { font-fam..

• format_list_bulleted Study of Development/Front-End
• · 2023. 12. 31.
• textsms