-
Web 프론트엔드 (10) / 영화 리뷰 사이트 만들기 1Programming/Web Programming 2023. 5. 8. 00:43
프론트엔드에 관한 기초적인 공부가 끝이 났다.
이제 직접 영화 리뷰 사이트를 만들어보며 공부한 내용을 복습하는 것만 남았다.
이번 포스팅은 지난 포스트들과 중복되는 역할은 최대한 덜어내고
새로운 내용들과 중요한 내용 위주로 작성될 예정이다.
아래 주소에서 유료 강좌를 듣고있으며 작성된 내용은 강좌를 기반으로 한다.
클래스 101 [유료강좌]
개발자 사관학교 - [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무!
https://class101.net/ko/products/5f53ae772e3e0d001cd99667
[웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! | 개발자 사관학교
📍웹 개발자 단과반이 필요한 이유는 뭘까요? 📍 이런 분들이 개발자 사관학교를 수강하면 크게 도움됩니다! 1) 대체 뭐부터 개발해야할 지 모르겠어요. 원래 처음 개발을 배우면, 뭐부터 시작
class101.net
목표는 아래 이미지의 영화 리뷰사이트이다.
1. 부트스트랩과 javascript, Jquery를 사용할 수 있는 기본 html파일을 준비해준다.
추가적으로 CSS파일도 만들어 연결해주었다.
또한 기존에 Jquery를 추가하는 코드를 <head> 태그에 담아주었었는데 <body>태그 안으로 옮겨주었다.
Jquery 추가 코드를 <body>태그에 붙여주면 웹사이트 실행시 빠르게 Jquery 데이터를 불러올 수 있다고 한다.
2. Navbar 추가하기 (Bootstrap)
상단에 아이콘과 사이트 이름이 있는 Navbar를 Bootstrap을 이용해 추가해주었다.
- 부트스트랩에 들어가 Components - Navbar를 찾는다.
원하는 모양을 찾아 코드를 <body>태그에 복붙해준다.
- img태그에 무료 이미지사이트 링크를 연결하고 사이트 이름을 정해 Bootstrap 창 안에 붙여준다.
(강의에서 안내해준 무료사이트를 이용했다.)
아름다운 무료 이미지 및 사진 | Unsplash
어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다.
unsplash.com
원하는 이미지 선택 - 이미지 주소 복사 - Navbar의 색상을 어둡게 하고 싶어 컬러도 바꿔주었다.
Navbar코드를 복사했던 링크로 가면 오른쪽 탭바에 "Color schemes"가 보인다.
해당 부분을 눌러주면 아래와 같이 색상을 관한 코드가 나온다.
dark 버전을 적용해주었다.
강의에서 소개된 코드와 같지는 않다.
부트스트랩 버전이 5로 바뀌며 오브젝트의 코드들도 조금씩 다 바뀐 모양이다.
지금 버전에서 사용할 수 있도록 코드를 변경하였다!
만약 잘못된 부분이 있다면 강의의 코드 문제가 아닌 저의 실수임을 미리 적어둡니다..T-T
적용이 완료되면 위와 같은 이미지가 보인다. 붙여준 사진은 왼쪽에, 다크모드도 잘 적용된 것을 볼 수 있다.
3.Container & Jumbotron 추가하기 (Bootstrap)
-Container 추가
Navbar 다음으로 위치한 간단한 사이트 소개 문구가 담길 영역을 만들어보자.
우선 지난번부터 사용해오던 Bootstrap의 Container을 코드에 추가해준다.
컨테이너를 활용하면 아래와 같은 장점이 있다.
- 자동으로 반응형 웹이(스크린사이즈에 맞게 디스플레이) 적용
- 영역이 자리 잡혀 위치를 해주기도 편하고 안에 다른 태그를 추가해줘도 위치를 잡기 편함 (개인적인 생각 ^^;)
container를 만들어주는 방법은 매우 간단하다.
<div>태그를 하나 만들고 class를 container로 지정해준다.
https://getbootstrap.com/docs/5.3/layout/containers/
Containers
Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.
getbootstrap.com
- Jumbotron 추가
강좌와 마찬가지로 부트스트랩 내에서 Jumbotron을 검색해봤지만 새롭게 업데이트가 되었는지 딱히 코드가 보이지 않았다.
아무래도 시간이 지나면서 사라질건 사라지고 추가될건 또 추가되고 많이 바뀌는 것 같다.
하지만 다행히도 아래와 같은 창이 나와서 Example 링크를 열었다.
링크를 열고나서 개발자도구를 연다.
그리고 개발자도구에서 선택 툴을 이용해 원하는 부분을 선택해본다.
검은색 테마가 마음에 들어서 해당하는 부분의 코드를 컨테이너 안에 복붙해주었다.
합쳐보면 위와 같은 코드가 완성된다. 아까 만들어준 Navbar코드 밑에 작성해주었다.
CSS로 스타일을 덧입혀 디자인을 다듬어 준다.
폰트를 추가해 html은 링크를 달아주었다.
css파일에서 전체에 폰트를 적용하고 Navbar와 Jumbostron 사이에 거리를 추가해주었다.
body태그의 배경색을 추가해주고 jumbostron의 텍스트를 중앙정렬로 바꿔주었다.
기본적인 외관이 완성되었다. 3. 영화 카드 만들기
메인창 아래에 여러개의 영화 카드가 나오도록 만들어보자.
Bootstrap에서 Components - Card에 들어가서 스크롤을 쭉 내려보자.
이런 여러개의 오브젝트를 규격에 갖춰 넣기 위해서는 이미 레이아웃을 갖춘 형태를 넣어야한다.
따라서 늘 Layout탭이 우측에 있다면 이 부분을 확인하자.
Card layout을 눌러 아래로 내리면 적당한 레이아웃이 나온다. 그룹 지어져 있는 카드 레이아웃이 보인다.
우리가 구현하고자 하는 모습과 비슷해 이것을 선택했다.
해당 코드를 복사해준다. 
코드를 Container안에 복사 붙여넣기 해주었다.
영화 리뷰 카드창 아래에 버튼을 배치하기로 했다.
Bootstrap에서 Buttons를 찾아 마음에 드는 색상을 골라 코드를 가져온다.
Card를 만들어주는 태그 내부 제일 아래 부분에 버튼의 코드를 추가해주었다.
html 코드 
css 코드 javaScript 코드를 추가해 데이터를 받아 해당하는 각각의 카드를 만들어줄 것이다.
때문에 우선 카드를 만들어주는 태그를 하나만 남겨두고 모두 지워주었다.
또한 CSS코드에서 Button의 가로크기를 가로에 꽉 차도록 width:100%로 적어주었다.
전에 적어두긴 했지만 width 또는 height를 %로 적으면 상위 태그의 크기를 기준으로 크기를 설정해준다.
다음과 같이 카드와 버튼이 추가된 것을 볼 수 있다. 4. 버튼을 누르면 창 띄우기
리뷰보기를 누르면 창이 뜨도록 만들어보자.
추가적으로 띄워주는 창에 대한 예제는 Bootstrap에서 Modal에 들어있다.
Components - Modal에 들어가 원하는 모양의 코드를 복붙해준다.
어차피 버튼을 눌렀을때 나오는 창이기 때문에 Container 코드 밖에 복붙해주었다.
Modal에 관한 html코드는 다음과 같다. 버튼을 눌렀을 때 창을 불러올 수 있도록 modal에 review-madal이라는 id를 붙여주었다.
card안에 딸려 있는 버튼에 onclick함수를 추가해주고 review()함수와 연결해주었다.
(review함수는 자체적으로 만들 함수로 아직 선언하지 않았다.)
review 함수는 다음과 같이 구성했다.
$("#review-modal").modal('show');
-> Jqeury 함수를 이용해서 modal 창을 띄워주는 코드이다.
이는 지금은 바뀐 부트스트랩5 버전에서 해당 내용을 찾아볼 수 없다..T-T
다음 링크는 부트스트랩4 버전의 modal에 관한 사용방법이다.
항상 javaScript를 통해 동작하는 오브젝트들은 오른쪽 탭바의 via javaScript를 눌러 도움을 받을 수 있다.
https://getbootstrap.com/docs/4.5/components/modal/#via-javascript
Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
getbootstrap.com
간단히 띄워줄거라 show를 사용했다. 다음 코드를 그대로 id이름만 바꿔서 사용해주었다.
리뷰 보기 버튼을 누르면 창이 나타난다. 버튼 색깔 버전을 dark로 바꿔주고 웹서비스 속 글자들도 조금 바꿔주었다.
혹시나 문제가 생기고 작동이 안된다면 Cmd+Option+I (맥) / Ctrl+Alt+I (윈도우)를 눌러 개발자도구-콘솔을 열어
어떤 에러메시지가 뜨는지 확인하고 수정하면 빠르게 문제를 해결할 수 있다.
내용이 많아 여기서 끊고 다음 포스팅에서 마저 만들어보려 한다.
다음은 실제 데이터를 받아오고, 웹페이지에 보여주는
Javascript가 많이 나오지 않을까 싶다!
엄청 많은 에러를 만날 예정이라 그런지 넘어가기가 좀 두렵다^^;;
출처: 클래스101 / [웹 개발자 단과반 1교시] HTML, CSS, JS 프론트엔드 속성 실무! - 개발자 사관학교
'Programming > Web Programming' 카테고리의 다른 글
Web 프론트엔드 (12) / 영화 리뷰 사이트 만들기 3 (3) 2023.05.08 Web 프론트엔드 (11) / 영화 리뷰 사이트 만들기 2 (0) 2023.05.08 Web 프론트엔드 (9) / Jquery 도구, Ajax (0) 2023.05.07 Web 프론트엔드 (8) / JavaScript와 Jquery 활용 (0) 2023.05.06 Web 프론트엔드 (7) / JavaScript 자바스크립트 기초 문법2 (0) 2023.05.06