계속 개발에 몰두하고 완벽하게 마무리하기 위해서 개발 일지를 잠시 미뤄뒀는데, 이제 지금까지 한 것을 총정리 해야 할 것 같아 작성하게 되었다. 우선 지금까지 만든 나의 사이트의 모습을 사진으로 모아봤다.
지금까지 보여준 사진은 한달간의 개발 일정을 마치고 1차 완성을 한 나의 Subhack의 모습이다. 원래는 배경이 회색이었는데, 글씨가 잘 부각이 되지 않는 것 같아 작정하고 어두운 우주를 배경으로 하고 글씨색을 밝게 하기로 마음먹었다. 원래는 채팅까지 만들 생각이었지만, 깊지 않은 나의 웹개발 관련 지식으로는 구현하기 어려워 2학기때 완성하기로 결정하였다.
자, 이제 각 페이지를 구현하기 위해 공부한 것은 무엇인지, 이를 바탕으로 구현은 어떻게 했는지, 그리고 웹 호스팅은 어떻게 했는지에 대해 설명하겠다.
1. index.php (메인 화면)
메인 화면은 방문자가 처음으로 보는 화면이다. 그렇기 때문에 깔끔하고 세련된 화면을 어떻게 구현하면 좋을까를 중심으로 구현 계획을 세웠다.
I. 가장 먼저 생각한 것은 CSS 애니메이션이다. 그러나 당시에는 CSS에 대해 아는 것이 아무것도 없어서 HTML에 CSS 파일만 연결하고 아무것도 못했을 때다. 그랬기 때문에 미리 만들어 놓은 애니메이션을 사용하고 싶어 찾아보다가 animate.style이라는 사이트를 찾았다.
이곳에서 원하는 애니메이션을 복사해와서 코드에 붙여오면 그대로 애니메이션이 실행이 된다.
Head 안에 있는 link 태그를 활용하여 위의 사이트에서 사용하는 css 파일을 붙여와 index.php에 연결해주었다. 이렇게 되면 class 네임만 적용시켜주면 애니메이션을 실행할 수 있다.
위 사진에서 해당하는 div에 "animate__animated animate__OOOO" class로 css 애니메이션을 적용시켜주면 된다.
그리고 밑으로 내려가는 버튼도 만들었는데, 이것은 AOS animate 홈페이지(https://michalsnik.github.io/aos/)에서 버튼을 어떻게 구현했는지 참고하여 작성하였다.
II. 메뉴바... 진짜 이거에만 시간 일주일정도 쓴거같다 ..ㅜㅜ
일단 header 태그를 만들어 메뉴바가 있는 영역을 정해주었다. 그런 다음, 이 영역을 div 여러개로 나눠 각각의 영역을 정해주었다.
진짜 이때 어이가 없는게, 따로 만들어진 style.css에서 디자인을 해야되는데 잘 몰라서 div의 style="" 옵션으로 엄청 때려 박았다. 그렇지만 구현은 잘 되어서 다행이었다. 지금 보니.....가관이다;;
중요한 부분을 설명하자면, div는 display: block이 기본값이기 때문에 div가 아무리 크기 조정을 해도 한줄로 정렬이 안된다. 그래서 각각의 div의 display를 inline-block으로 설정하고 width를 % 단위로 주어 한줄로 정렬이 되도록 하였다. 그래서 모든 항목이 한줄로 나올 수 있었다.
버튼이 처음에는 border로 테두리만 주니까 누르는 느낌이 없어서 그림자를 주면 되겠다 싶어 box-shadow 옵션을 사용하여 회색 그림자를 주었더니 입체같은 느낌을 줄 수 있었다. 각각의 메뉴에는 a 태그로 링크를 걸어 각각의 항목에 맞는 페이지로 이동하게끔 구현하였다.
중간중간에 php 구문이 있는데, 그것은 로그인과 회원가입 창을 설명할 때 함께 설명하겠다.
III. 배경은 css의 body에 background-image: url(~~~);로 적용하였다.. 그리고 어두운 느낌을 더 주기 위해 background-color를 black, opacity를 0.5, filter:alpha(opacity=70)을 적용하였다.
여기서 body에 ::after라는 것을 새로 추가해 배경을 적용 시켰는데, 그 이유는 다른 영역과의 충돌이다. z-index는 화면을 보여줄 때 숫자가 클수록 화면의 맨 위에 보이게 하는 옵션이다. 배경은 가장 안쪽으로 적용되어야 하고, 다른 영역에 영향을 주면 안되기 때문에 가상의 자식을 만드는 ::after 과정을 거쳐 z-index를 음수값으로 주면 가장 안쪽으로 배치된다.
IV. Info 버튼 밑의 공간은 div 자체의 background-image를 적용시켜 새로운 화면이 나오도록 구현하였다. 그리고, 그 안에 p 태그와 css의 relative position으로 각각의 위치를 정해주었다.
2. login.html(.php) / register.html(.php) (로그인 / 회원가입)
이번에는 로그인과 회원가입 폼을 어떻게 만들었는지에 대해 정리해보겠다.
로그인 페이지는 css를 어떻게 구상할지 모르겠어서 유튜브 영상을 참고하였다.
https://www.youtube.com/watch?v=dWfpp-0riYA
이 템플릿을 직접 붙여오진 않고, 다 따라해보면서 각각의 코드가 뭘 뜻하는지 제대로 파악하고 내것으로 만들었다.
form 자체의 가운데 정렬은 display: flex와 justify-content: center(수직정렬을 가운데로), align-item: center(각 줄의 요소를 가운데 정렬)로 적용하였다.
ID와 PW를 입력하는 곳의 class 이름을 int-area로 하였고, 가장 아래의 focus와 valid(input이 선택되는 것) 조건을 만족했을 때 top을 15 -> 0으로 바꿔주고 font-size는 18 -> 13px, color는 하양 -> 파랑으로 바꾸는 과정을 수행한다.
그리고 LOGIN 버튼을 눌렀을 때 ID와 PW 중 하나라도 비어 있으면 가장 처음 input의 label에 warning이라는 class를 1.5초동안 생성하기 위해 다음과 같은 코드를 작성하였고, 이때 jQuery라는 javascript 플러그인을 사용하였다.
form에서 입력한 아이디와 비밀번호는 POST 방식으로 제출되며, login.php에서 그것을 DB로 전송한다.
내가 사용하는 DB는 MYSQL Database이어서 SQL문을 사용하여 DB에 전송하였다.
간단하게 설명하자면,
1. ID는 맞지만 비밀번호가 틀렸다면 '비밀번호가 틀립니다!'를 alert하고,
2. ID가 DB에 존재하지 않는다면 '사용자 정보가 없습니다!'라고 alert하고,
3. ID와 PW가 모두 일치한다면 세션을 생성하고 난 후 메인 화면으로 돌아가서 로그인 상태를 유지한다.
이렇게 된다면 아까 전에 Header에서 본 if((!isset($_SESSION['id'])) && (!isset($_SESSION['skill']))은 세션이 등록되지 않았을 때는 가입 문구와 로그인 버튼이 있는 아래의 첫번째 화면을 보여주고, 등록이 되어 있다면 로그아웃 버튼만 생기도록 아래의 두번째 화면을 보여준다.
자, 이제 회원가입 폼을 보자.
아까전에 봤던 로그인과 많이 다르진 않지만, ID와 비밀번호, 이메일, 그리고 라디오 버튼을 input으로 받도록 하였다. 그리고 Register 버튼을 누르면 서버에 SQL의 INSERT문으로 DB에 데이터를 추가한다.
-PHP에서는?-
1. php에서는 ID가 이미 존재하면 alert를 수행하고, 다시 입력할 수 있도록 초기화한다.
2. ID와 PW가 제대로 들어가면 Welcome to Subhack!이라고 alert를 하고 login.html로 이동한다.
3. DB에 password가 그대로 들어간다면 개인정보가 유출될 위험이 있기 때문에 password_hash 함수로 한번 해시로 바꾼 뒤 db에 저장하였다. 그래서 login.php에서 password_verify 함수로 맞는지 확인한 것이다.
다음으로, 라디오 버튼때문에 고생을 많이 했는데, 버튼 크기가 조절이 잘 안되어 여러 가지를 많이 찾아보았다.
css에서는 대괄호 안에 html에서 쓴 옵션을 조건으로 주면 그 해당 요소를 찾을 수 있다. 그래서 라디오 버튼의 크기를 30px 30px로 맞출 수 있었다. not(old)는 웹브라우저 상위 버전에서는 그냥 무시해도 된다.(chrome을 주로 쓰기 때문에)
3. find.php (CTF와 대회를 검색할 수 있는 페이지)
가장 html 코드의 양이 많은 페이지이다.
위의 검색 메뉴바를 구현하기 위해 회원가입에서의 흰색 input 틀을 가져왔다. 그리고 검색 버튼을 만들 때는 button 태그에 value를 submit으로 하고 배경 이미지를 위와 같이 검색 로고로 적용하였다. 검색을 누르면 find_search.php로 넘어가는데, 아직 구현하진 않았다.
이것보다 더 중요한 것은 아래의 CTF 소개 카드이다. html 파일의 개수가 많아지는 것을 방지하기 위해 카드 각각을 누르면 새로운 div가 나오도록 구현하였다. 어떻게 구현했는지 정리해 보겠다.
1. 우선 카드를 배열하기 위해 하나의 큰 div를 생성하고 그 위에 카드가 차례대로 정렬되게 하기 위해 display는 flex, flex-flow: wrap, align-items: center, justify-content: center로 css를 적용하였다.
2. 각각의 카드를 보여주는 div를 큰 div 안에 9개 생성하여 width를 30%로 적용하고, 테두리를 흰색으로 하였다.
3. 카드에 마우스를 갖다댔을 때 마우스 커서가 포인터로 바뀌게 하기 위해 cursor: pointer 옵션을 적용하였다.
4. 마우스를 갖다댔을 때 테두리의 색이 변하게 하기 위해 css의 :hover 옵션을 사용하여 테두리의 색이 변하도록 change라는 이름의 animation을 적용하였다. 반대로 마우스가 바깥으로 나가면 change-reverse라는 이름의 애니메이션으로 테두리를 파란색으로 바꾼다.
이렇게 하여 마우스 위치에 반응하는 화면을 완벽히 구현할 수 있었다.
이제 문제는 소개가 적혀 있는 div를 어떻게 띄우고 지울지 생각해보는 것이다. 이것을 구현하기 위해 '2631 정O진' 학생에게 Javascript에서 어떤 요소를 클릭했을 때 특정한 이벤트를 하게 해주는 방법을 배웠다. 이를 바탕으로 어떻게 구현했는지 정리해보겠다.
1. 우선 각각의 소개글이 적혀있는 div를 css에 display: none이라 되어있는 hidden이라는 class를 적용해 모두 안보이게 한다.
2. 하나의 div가 선택되었을 때 나머지 버튼을 누를 수 없게 하기 위해 배경을 하나 만든다. 그리고 이것도 hidden class를 적용시킨다.
3. 모든 카드를 상시적으로 확인하여 click 이벤트가 발생했을 때 fade-in class를 해당하는 요소에 추가하고, hidden class는 삭제하여 부드럽게 div가 나올 수 있도록 한다. 이때 배경도 함께 나오도록 backfade-in class를 추가한다.
4. div에 있는 X 버튼이나 검은 배경을 눌렀을 때 div와 배경이 사라지게 하기 위해 fade-out은 추가, fade-in은 삭제하고, 0.5초 후에 fade에 관한 것은 모두 지우고 hidden class를 추가한다.
이것을 구현한 파일이 popup.js 파일이다.
js를 처음 써봐서 비록 코드는 반복적이고 더럽지만, 구현은 완벽하게 되어 다행이었다.
4. find_new.php (CTF 소개 카드 추가 페이지)
이 페이지는 나중에 2학기 때 사용자가 카드를 추가하면 DB에 내용이 들어가고 동적으로 카드가 생성될 수 있을 때 그 카드를 생성하기 위한 페이지이다. 간략하게 설명하고 넘어가겠다.
로그인을 하면 ADD CARD 버튼이 CTF&대회 페이지에 생성되고, 이것을 누르면 이 페이지로 넘어간다.
CTF 이름과 소개글, 링크, 로고 업로드가 input으로 입력받게 되고, ADD 버튼을 눌러서 DB에 전송하는 페이지라고 할 수 있겠다.
폼은 회원가입 페이지에서 가져왔고, 소개글은 textarea 태그로 줄바꿈이 제대로 될 수 있도록 수정하였다. 아직까진 제대로 못 쓰는 페이지라 간략하게 설명하였다.
번외. 웹 서버는 어떻게?
나는 이 사이트의 의도와 목적을 실현시키고 싶어 프론트엔드 뿐만 아니라 php와 Database를 통해 백엔드도 구현하고 싶었다. 그런데 이러한 웹 서버를 구축하고 도메인까지 연결하기 위해서는 유료 서버를 사서 웹 서버를 운영해야 했다. 그래서 고민을 했는데 로컬로도 충분히 php, DB를 관리할 수 있다고 해서 생활코딩에서 웹서버 구축하는 방법을 찾아보았다.
내가 정한 로컬 웹 서버는 Bitnami WAMP(Windows Apache Mysql Php)이다. 이것은 한번의 설치만으로 3가지의 서비스를 모두 운영할 수 있다. 이러한 서비스를 한번에 관리할 수 있어 더 좋은 웹 서버라고 생각하였다.
이 방법을 사용한다면 localhost에 웹 서버를 열어 인터넷 없이도 서버를 관리할 수 있고, 같은 네트워크 상에 있는 LAN 상에서 IP주소로 나의 웹서버에 접속할 수 있어 학교에서 친구들도 같이 접속할 수 있다는 장점이 있다.
1차 완성된 소스코드는 나의 github에서 확인할 수 있다. (https://github.com/bww9641/htdocs)
이로써 나의 응용프로그래밍 화면구현 프로젝트를 완벽하진 않지만 깔끔히 구현하였다.
끄으으으으으으읏
'2020 Web Develop' 카테고리의 다른 글
| 웹개발 일지 12일차 (20.11.08) (0) | 2020.11.08 |
|---|---|
| 웹개발 일지 11일차 (20.10.21) (0) | 2020.10.21 |
| 웹개발 일지 9일차 (20.06.15) (0) | 2020.06.15 |
| 웹개발 일지 8일차 (20.05.22) (0) | 2020.05.24 |
| 웹개발 일지 7일차 (20.05.19) (0) | 2020.05.24 |