HTML로그인 페이지 제작

국비웹개발 백엔드 6개월 과정이 시작되고 1개월반이 지나고 현재 4주째 4명의 멤버를 모아서 

매주 1회의 코드리뷰를 하고있다.

스터디의 방식은 다른 스터디그룹와 동일하게 매주 학원에서 배운내용+추가기능을 정해 그 주에 할 과제를 정하고

그 내용에 맞에 만들면 된다.

첫번째과제는 간단한 CRUD로 시작해서 자바로 채팅프로그램, 이번에는 HTML로 간단한 로그인페이지를 디자인

하는걸로 3회차까지 끝을냈다.

 

순서가 역순이 될수도 있지만 오늘은 이번주에 만든 HTML로그인 페이지에 대해서

포스팅을 하고 시간이 날 때 전에 만들었던 프로그램도 포스팅해 보도록 하겠다.

 

이번 스터디의 주 서버는 나 자신이 운영하고 있는 nas서버의 아파치 서버를 활용하여 스터티 그룹원들이 편하게 

간의 웹포스팅을 가능하게 하기 위해서 도메인을 웹서버폴더에 연결해놔 접근성을 높혀봤다.

그리고 각자 컴퓨터에 시놀로지와 실시간 동기화를 가능하게 해주는 Drive라는 프로그램을 깔게 하여 지정한 폴더의 

웹서버 폴더에 HTML파일을 올리면 실시간으로 서버가 갱신되는 식으로 설계를 해봤었다.

https://yamahost.tistory.com/32    (위 링크 참조)

See the Pen Untitled by wogh0424 (@wogh0424) on CodePen.

이번 코드는 HTML을 배운지 5일차일때부터 시작해서 몇번의 조정을 거쳐서 만들게 되었다.

일단 이번 과제의 주제는 여행사 사이트의 로그인페이지이다.

 

여행사 사이트에 대해서 조사를 해봤을 때

여행사 사이트를 들어가보면 복잡한 사이트는 별로 보지못한것 같았다.

 

그렇기에 사이트는 심플하게 디자인 하는걸로 정했었다.

심플의 대면사는 백그라운드라고 생각한다. 그렇기에 백그라운드 사진을 선정하는것이

중요하다고 느껴서 찾다가 네이버 항공권 검색 사이트를 들어가면 비행기 사진이나 검색한 나라의

사진이 나오는걸보고 설렘을 느꼈던 것이 떠올라 비행중인 사진으로 정했다

 

페이지는 전체 백그라운드를 넣기위한 클래스에 로그인폼을 넣을 박스를 넣을 클래스에

로그인폼을 클래스로 묶어서 만들었다.

 

css수업을 처음 들었을 당시 top을 누르면 바로 내려가고 right를 누르면 바로 우측으로 이동할것 이라고

생각하고 실제로 해봤을때 자신의 뜻대로 되지않아 공부를 다시 할 필요가 있었다.

그래서 학원에서 배운 내용중 박스를 움직이는데 중요한 공통점이 뭔지를 파악하고 

상황에 맞는 태그를 사용하기로 했었다.

 

페이지의 중점은 큰 프레임을 만들고 넣고싶은 위치에 객체를 넣기위한 작은 프레임을 다시 만든다음

그 작은 프레임에 객체를 넣어서 컨트롤을 했었다.

써보니  이 개념에 익숙해지니 HTML이 상당히 재밌어졌다.

 

대부분의 프레임은 가장 큰 프레임은 position:absolute 를 줘서 절대값으로 고정시키고 하위 프레임들은 position:relative 을 줘서 상대값으로 이동하기 쉽게 설정하고 margin:auto를 준 다음 원하는 위치로 이동시켰다.

하지만 여기서 초보이기에 생기는 문제점이 있었다.

 

그것이 유저환경(모니터의 사이즈)이 다르면 페이지의 요소들이 제가각 이동하는 현상이 생겼었다.

당연한 경과라는건 알고있다.

 

그래서 경국  

@media (max-width:1480px) and (max-height: 800px){

이렇게 예상되는 환경에 맞는 값에 맞는 위지를 따로 지정해줬다.

주위에 물어보니 반응현으로 하는방법도 있다고는 하나

현재의 실력으로는 이 정도가 적당하다고 생각했다.

 

나머지는 단순하게 위치이동이 전부라 생략하겠다.

See the Pen 회원가입 페이지 by wogh0424 (@wogh0424) on CodePen.

회원가입 페이지는 로그인 페이지보다는 감성있는 페이지로 해보고 싶었다.

초기 디자인이 너무 단순하다는 얘기를 듣기도 해서 결국 새롭게 디자인을 했었다.

 

회원가입 페이지는 일단 index와 같이 배경을 담을 프레임(클래스)를 만들고 중간에 좌우로 회원가입폼과 배경을 넣을

박스를 만들었다. 그리고 float:left right를 양 사이드의 클래스에 넣어서 프레임이 자동으로 배치되서 설정을 넣어줬다.

 

왼쪽에는 뒷 배경과 같은 사진을 넣고 버튼을 중앙에 배치해 다시 로그인 페이지로 돌아가게 했다.

처음에는 버튼을 그냥 올려두려고 생각했었지만 스터디멤버의 지적을 참고하여 버튼에도 hover를 줘서 

커서를 가져다 대면 그라데이과 사이즈,그림자 효과를 줘서 나은 퀄리티로 만들어 봤다.

 

우측은 회원가입 폼으로 각각의 input type:text로 만들고 로그인폼만 label으로 묶어줬다.

lalbel은 아래로 배치하기 위해서 display:block로 설정하고 margin-bottom으로 바닥과의 간격을 조절했다.

 

그 다음 전체를 label을 한번에 묶은 form태그에 전체 회원가입폼의 위치를 설정하였다.

그리고 하얀색과 잘 맞을것이라고 생각하여 그림자 효과도 줬다.

 

전체적으로 높은 퀄리티의 페이지는 아니다.

하지만 만약 스터디그룹을 만들고 활동하지 않았다면 결국 수업시간에 배운 한번의 기회이외에는

직접 만들어볼 기회가 없었을 것이다.

 

현재 활동중인 스터디그룹 멤버는 다 나보다 압도적으로 잘하는 사람들이다.

그렇기에 나 자신이 주눅들때도 있지만  그것을 이겨내고 배우려는 자세만 되어있다면

그 사람들이 나에게는 선생님인 것이다.

 

코드가 그리 길지않아 내용이 짧아진 감이 없지않아 있지만 다음에는

저번 스터디 그룹 과제로 만든 자바CHAT프로그램의 코드도 설명해 보겠다.

CHAT프로그램은 오라클DB를 배울당시 도커로 운영했던 오라클DB (https://yamahost.tistory.com/27 링크참조) 에 

로그인 계정DB를 추가해두고 자바에서 JDBC를 이용하여 오라클 서버에 있는

db를 쿼리문으로 불러와 로그인정보를 비교하여 엑세스시킬지를 판단하는 코드로 작성하였다.

 

상당히 어렵고 난관도 많았지만 지금 생각해보면 쓰레드에 대해서 정말 많은 공부가 되었기에

다음글에서는 그 내용에 대해서 다시 정리해보겠다.