[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

[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

[FE] 구글 폰트 적용하기

구글 폰트를 내가 만든 웹 사이트에 적용하기 위해서는 Google Fonts 사이트를 접속해주어야한다. Google Fonts 사이트 : https://fonts.google.com/specimen/Nanum+Myeongjo?subset=korean¬o.script=Kore Nanum Myeongjo - Google Fonts Nanum Myeongjo is a contemporary serif typeface with a warm touch, and it is expertly hinted for screen use. It is part of the Nanum fonts (나눔글꼴) – a set of hig fonts.google.com 많은 폰트 중 사용하고자 하는 폰트를 클릭해서 @import 버튼..

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

[FE] 간단한 로그인 페이지 구현(HTML/CSS)

01 로그인 페이지 구현해보기 우선 기능없이 해당 페이지만 똑같이 구현을 해보았다. ID값과 PW값을 입력할 수 있는 칸을 위해 태그와 태그를 이용하여 구현을 하였고 로그인 버튼도 작성하였다. 로그인 페이지 ID: PW: 로그인하기 02 CSS 연습하기 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 이미지를 적용하여 불러올때는 style안에 꼭 3가지가 같이 한몸처럼 따라다닌다. Style { background-image: url(''); background-position: center; background-size: cover; } class와 id를 어떨때 구분해서 사용하는지 궁금했었는데 class의 경우 보통 css에서 조작할때 ('.')을 사용해서 하는 것 같고 id의..

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