HTML 직접 웹 페이지 제작하기 프로젝트(영화 평점 남기기 웹 페이지)

직접 웹 페이지 제작하기

지금까지 배워본 HTML 지식들을 최대한 활용하여 만들어보고 싶은 웹 페이지를 제작하였습니다.
평소 저는 영화를 좋아해서 영화 평론 사이트를 자주 들락거리는데 한 번 스스로 비슷하게나마 영화 평론 사이트를 제작해보고 싶어 따라 해 보았습니다.
만들어 보면서 아직 배울게 많다고 생각하였습니다. 기본적인 기능들만 사용하니 실제 사용되는 영화 평론 사이트와 비교해 많이 부족해 보입니다. 빨리 더 좋은 기능을 사용할 수 있도록 언어를 배우고 싶어 진 것 같습니다.

웹뿐만 아니라 모바일에서도 알맞게 기능하기 위해 모바일 지원 meta 정보를 추가하였습니다.

영화 포스터 이미지를 클릭하면 영화 포스터 이미지를 다운로드할 수 있도록 img 태그와 a태그를 사용하였습니다.

그리고 포스터 이미지 위치를 가지런하게 하기 위해 align을 이용하여 왼쪽으로 위치하도록 하였습니다.

영화에 대한 개요와 정보들의 텍스트를 포스터와 정당한 거리를 두기 위해 띄어쓰기를 가능케 하는  을 이용하여 적당한 비율로 보기 좋게 하였습니다.

<p>, <br> 등등을 사용하여 웹 페이지의 텍스트와 기능들의 위치 비율을 보기 좋게 설정하였습니다.

form을 이용하여 input에서 받은 정보들은 특정 서버로 보내도록 구현하였습니다.

input 태그를 이용하여 로그인 정보를 적을 수 있는 아이디와 비밀번호 칸을 만들었고 textarea 태그를 이용하여 문장으로 된 영화에 대한 감상평을 적을 수 있는 넓은 칸을 구현하였습니다.

그리고 input 태그의 radio, checkbox을 이용하여 평점과 영화의 마음에 들었던 요소를 선택할 수 있고 감상평에 스포일러의 유무를 체크하는 기능 또한 추가하였습니다.

마지막으로 텍스트 칸을 구현한 input 태그마다 placeholder을 추가하여 칸 안에 무엇을 적어야 하는지 도움이 될 수 있도록 더 구체적인 정보를 전달하였습니다.

각 input 요소마다 label을 부여하여 더욱더 정확하고 명확한 정보를 전달하도록 하였습니다. 텍스트를 클릭하면 텍스트 칸 테두리에 줄이 하나 더 생겨 깜박거리는 효과를 볼 수 있습니다.