이상형 월드컵(남성 배우편) 제작 (HTML소스)

안녕하세요, HOKEES입니다!

이전에는 처음으로 여자 배우 이상형 월드컵을 만들어보았습니다.

2024.01.03 - [이상형 월드컵] - 이상형 월드컵(여성 배우편) 제작

이번엔 HTML, JavaScript, CSS, firebase를 활용해 '이상형 월드컵(남성 배우편)' 웹사이트를 만들어 봤습니다.

이상형 월드컵(남성 배우편) 한 번 체험해보고 많은 조언부탁드립니다!

 

아래에는 일단 HTML 공부하시는데 도움이 될까하여 제가 만든 일부 소스 코드의 설명을 첨부합니다.

(F12눌러서 소스 확인 가능하며, 다른 js파일과 css, firebase 사용법도 곧 첨부해서 간단히 설명해드릴께요.)

 

추가. HTML 설명 (F12누르면 확인 가능합니다.)

HTML코드

• 여기서는 웹 페이지의 제목, 문자 인코딩 방식(한글, 영어 등이 잘 보이도록 설정) 등을 정합니다.
• link 태그는 웹 페이지의 디자인을 위해 외부에서 폰트와 스타일(모양)을 가져오는 부분입니다.

• body 태그는 웹 페이지에 보여지는 모든 내용을 포함합니다.
• header는 페이지의 제목 부분입니다.
• div와 footer는 내용과 바닥글(푸터) 부분으로, 버튼들이 있어 사용자가 클릭할 수 있습니다.

• script 태그는 자바스크립트 코드를 넣는 부분입니다. 이 코드는 웹 페이지가 동작하는 방식을 결정합니다.
• preLoadingImg 함수는 게임에 필요한 이미지들을 미리 불러와서 빠르게 보여줄 수 있게 도와줍니다.
• resetGame 함수는 게임을 처음부터 다시 시작하게 하는 기능을 합니다.

이렇게 각 부분을 나누어 보면, 웹 페이지가 어떻게 구성되어 있는지, 각 부분이 어떤 역할을 하는지 더 쉽게 이해할 수 있습니다.