충곽 생활 서포트 웹페이지 제작 일지 1 //33기 손해원
이 일지는 CBSH 정보 유레카 동아리 ABCD에서 제가 진행하는 프로젝트를 해나가며 새롭게 알게 된 것들을 정리하고, 그 날의 결과가 나오게 된 과정을 설명하는 시리즈입니다.
프로젝트 선정 계기
가장 처음 정리할 것은 이 프로젝트의 주제를 선정하게 된 계기에요. 정보과 프로젝트를 시작하려고 마음을 먹어보니 해보고 싶은 분야들은 많고 막상 손을 대려고 해보니 막막하기만 했었습니다. 그래서 전 크게 제가 하고 싶은 탐구를 나눠보았어요. 알고리즘, 웹, 인공지능, 해킹(리버싱 엔지니어링), 피지컬 컴퓨팅. 제가 어느 정도의 역량이 있는지를 생각하고, 할 수 있는 주제는 뭐가 있는지 나열해보았습니다.
전공 동아리에서 진행할 만한 것들 중에 가장 끌리는 걸로 골랐습니다. 충북과학고등학교의 생활을 도와주는 웹페이지를 만드는 것으로요. 큰 방향성은 HTML, CSS, 자바스크립트를 익히고 배울 때마다 뼈대를 잡고 기능을 추가하면서 최종 산출물을 만들어내는 것입니다.
저번 ABCD 시간에는 HTML과 CSS 세미나를 들었어요. HTML이나 CSS가 뭔지에 대해서 저보다 더 훌륭하게 설명하는 글이 이미 있으므로, 개괄적인 설명보다는 오늘의 산출물에 대해 구체적 설명을 하겠습니다. 일단은 탐구 일지니까요.
탐구 내용 : HTML 구조
일단 충북과학고등학교 생활을 도와준다는 목적을 달성하기 위한 요소들을 몇 가지 생각해본 뒤, 순서를 정했어요. 단계로 구분하면 총 네 단계가 있을 것 같습니다.
\1. 수행평가 일정과 학사일정 달력에 표시, 클릭하면 반투명 창이 나타나서 상세 내용을 볼 수 있음.
\2. 급식 메뉴와 시간표 보여주기, 변동이 있는 시간표는 색이 다르게 표시되어 있음. (웹크롤링 활용)
\3. 자습 신청 페이지, 자가진단 페이지 바로가기 추가, 정기고사 디데이 추가.
\4. 로그인 기능 추가, 반별 관리자 지정하여 반마다 수행평가 등등 수정 권한 부여하기.
오늘은 HTML 뼈대가 결과입니다. 1번 단계의 달력 자리, 2번 단계의 급식 메뉴 자리, 시간표 자리, 3번 단계의 바로가기 자리, 디데이 자리를 먼저 만들어봤어요. 4번 단계의 로그인은 나중에 추가할 기능이라서 생략했습니다. css 파일도 만들었어요. 오늘의 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="Width=device-width, initial-scale=1.0">
<title>CBSH Supporter</title>
<link rel="stylesheet" href="istyle.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css">
<div>
<h1 class="nanumsquare"><b>CBSH Supporter Ver1</b></h1>
</div>
</head>
<body>
<div class="calendar"></div>
<div class="meal"></div>
<div class="timetable"></div>
<div class="link"></div>
<div class="dday"></div>
</body>
</html>
페이지 제목을 CBSH Supporter로 정하고, 든 내용은 없지만 css 파일을 불러왔고, 페이지의 전체적인 글꼴을 나눔스퀘어로 지정해주었습니다.
참고로 CSS 파일의 내용은 다음과 같습니다.
.nanumsquare{
font-family: 'NanumSquare', sans-serif !important;
}
페이지 내부에 제목을 일단 먼저 적어두었고, 달력, 급식 메뉴, 시간표, 바로가기, 정기고사 디데이 자리를 먼저 div 태그를 통해서 만들어주었어요.
이것들 말고도 달력을 어떻게 만들 수 있는지, 시간표와 학사일정을 어디서 가져와야 할지 등등을 좀 더 알아보았지만, 이것들은 더 구체적으로, 확실한 결과물과 함께 다음 글에 적어볼게요.
당장 달력을 만드려고 해도 자바 스크립트를 잘 모르겠으니까 html 뼈대도 가져오기 힘들더라고요. 뼈대 뿐만 아니라 실질적으로 어떻게 동작할지까지도 염두에 두고 만들어야겠다는 생각이 들었어요. 가장 중요한 목표는 javascript 언어를 어느정도 익히는 것입니다. 그리고 달력을 만들게요. 달력 결과물을 들고 다음 글로 돌아오겠습니다.
미숙한 글인데 읽어주셔서 감사합니다. 피드백 주시면 정말 감사할 것 같아요! 모쪼록 유익한, 아니라면 유익하진 못하더라도 읽을 만 한 글이었으면 좋겠어요. 또 뵙겠습니다!