그동안 살펴본 HTML5 기초 문법만으로 엉성하지만 간단한 웹 페이지를 만들고 웹에 배포(www.netlify.com)까지 해 보았습니다. 처음 만들어본 페이지라 디자인 요소는 거의 사용하지 않았으며, 계산이 필요한 부분은 자바스크립트를 사용하여 결괏값을 페이지에 간단하게 뿌려지게 만들었습니다.
HTML의 여러 기능들을 직접 적용하며 각각의 요소들이 어떻게 구현되는지를 살펴보는 게 주 목적입니다. 그러다 보니 페이지 구석구석 부족한 부분이 많지만 그래도 생각한 만큼의 필요 기능을 습득하는데 상당한 도움이 된 계기가 되었습니다. 이번에 작성된 웹 페이지는 프로그래밍 학습의 연장이라 생각하여 웹에 있는 HTML 템플릿 파일을 사용하지 않고 만들어 가독성이 다소 떨어질 수 있는 점을 미리 알려드립니다. ^^
현재 웹에 배포된 페이지를 가져와 봅니다.
기존에 엑셀 파일로 하던 작업들의 일부를 웹 페이지에 표현해 보는 작업입니다. 저는 프로그래밍의 기본적인 설계조차도 없이 자료의 입출력은 HTML로 처리하고 자바스크립트로는 계산하고 끝낸다는 기본 계획만 갖고 코딩을 시작했습니다.
처음 코딩을 시작할 때 간단하게 생각한 기능들이 나중에는 프로그램 전체를 갈아엎어야 할 때도 있더군요. 프로그래밍도 설계가 필요하다는 걸 절실히 깨달았습니다. 최소한의 입출력 자료 구성과 구현하고자 하는 기능들 그리고 웹 페이지 디자인(a4용지에 끄적이는 수준이라도) 정도는 미리 고민하고 프로그래밍 시작할 것을 권장합니다. ^^
맨 처음 css의 기본기능을 이용하여 웹페이지에 백그라운드 이미지를 설정하고 자바스크립트 파일을 연결합니다. (실제 작업할 때는 같은 파일(HTML과 자바스크립트)에서 코딩을 진행하였으나 코딩 완료 후 파일을 분리하였습니다.) 그리고 간단한 웹 페이지이지만 시맨틱 태그(Semantic tag)를 적용해 봅니다.
<fieldset>태그를 이용하여 사용자 입력창에 데이터 종류를 구별토록 하였으며, 입력되는 데이터의 종류에 따라 <select>태그와 <input>태그로 구분하였습니다.
<fieldset>태그끼리의 구분을 간단하게 <br>태그로 하였습니다. 사용자 입력을 <input>태그로 받아 자바스크립트 함수로 가공 후 다시 <input>태그에 전달합니다. 19~160까지의 숫자 중 불규칙하게 규정되어 있는 숫자를 골라야 하는데, 사용자가 아무 숫자를 입력하더라도 근삿값을 찾아 상위 값으로 전달하게 만들었습니다. (예를 들어 19이하 숫자는 19가 입력되며, 153이 입력되면 147, 154가 입력되면 160이 입력됩니다. 그리고 원래 계획은 전달된 데이터를 <select>태그에서도 사용할 수 있도록 만들고 싶었는데 그 기능을 구현하려면 자바스크립트 코드 상당 부분을 다시 작성해야 할 것 같아 다른 방법으로 처리하게 됩니다.) 이 부분은 자바스크립트 코드 설명 포스트에서 자세히 알려드리겠습니다.
사용자 입력에 라디오 버튼을 지정하여 두 가지 메뉴 중 하나만 선택하도록 합니다. 대부분의 사용자 입력창에 지정된 id는 자바스크립트에서 변수로 전달할 매개체입니다. 사용자 입력이 그리 많지 않다고 생각하고 코딩을 시작하며 id명에 별다른 생각 없이 그때그때 지정했는데, 나중에 자바스크립트에서 사용하려니 무척 헷갈렸습니다. 사전에 좀 더 고민하고 체계적으로 id명을 지정하면 자바스크립트 코딩 때 훨씬 수월하게 작업을 진행할 수 있습니다.
마지막으로 <button>태그를 클릭하면 <form>태그의 입력된 값들이 자바스크립트 코드로 전달되어 데이터 검증하게 되며 별다른 문제가 없다면 계산하게 됩니다. 그렇게 계산된 결과값들을 자바스크립트로부터 전달받아 html에서 출력하게 됩니다. 만약 <input>태그의 버튼(reset)을 클릭하게 되면 그동안 입력된 <form>태그의 값들이 초기값으로 재설정 되도록 하였습니다.
아래에 제가 배포한 HTML파일과 웹 페이지를 링크해 놓았습니다.
수능 점수 분석 사이트 만들기 (with AWS Lightsail & Netlify.com)
그동안 살펴본 파이썬과 자바스크립트를 이용하여 수능 점수 분석 사이트를 만들었습니다. 2~3년 전 아들내미 진학 과정에서 필요하다 싶었던 사이트를 이제서야 만들게 됩니다. (유료사이트는
azcoding.tistory.com
핵심 수능 점수 분석
고3 모의고사 수능성적 분석 및 지원가능 대학 예측
www.hxm.kr
Torque & Thrust Calculation
haxim.netlify.app
'코딩 이야기 > HTML & CSS' 카테고리의 다른 글
| 웹 페이지에 동영상/오디오 파일 재생하기 - HTML5 (0) | 2021.12.14 |
|---|---|
| 구조적인 웹페이지를 위한 시맨틱 태그(Semantic Tag) 살펴보기 – HTML5 (0) | 2021.12.14 |
| input 태그 속성에 대해 자세히 살펴보기 – HTML5 (0) | 2021.12.14 |
| 폼(form)과 input 태그 살펴보기 – HTML5 (0) | 2021.12.14 |
| 웹 페이지에 하이퍼링크와 이미지 표시하기 – HTML5 (0) | 2021.12.14 |
댓글