[웹개발] 웹 CSS 복구 일지 (1) : 그리팅, 로그인, 회원가입, 메인

* 개인적인 공부 내용을 기록한 글입니다.

---

설명

한달 전 노트북을 날려먹은고로...

한참 전에 끝내서 우분투에 잠자고 있던 웹도 고대로 날려먹었다 ㅎ

설상가상으로 git에도 푸시를 안해둬서... 처음부터 다시 만드는 방법 밖에 없었다.

(푸시 안할거면 커밋은 왜 했는지?...)

천만다행으로 블로그에 중요한 코드는 정리를 해둬서 아예 쌩으로 다시 만들진 않았지만...

세부적인 구현들까지 다 남겨놓진 않았어서 울며겨자먹기로 열심히 복구했다ㅠ

특히 CSS는 정말 남겨놓은게 없어서 ㅎ 이왕 이렇게 된 김에 아예 새롭게 디자인해보았다...

그 기록 일지다...

---

웹 CSS 복구 일지 (1)

 

 

1. greet.php

첫 그리팅 화면이다.

로그인/회원가입 페이지로 진입 가능하며, 비회원인 상태로 메인 페이지에 진입할 수도 있다.

---

2. login.php

로그인 페이지다.

footer의 처음 오셨나요? 를 클릭하면 회원가입 페이지로 넘어간다.

---

3.join.php

회원가입 페이지다.

테이블을 이용해서 최대한 깔끔하게 정돈해봤다.

footer의 이미 회원이신가요? 를 클릭하면 로그인 페이지로 넘어간다.

---

4-1. main.php (회원)

로그인한 상태로 메인 페이지에 진입했을 때의 화면이다.

사용자의 이름/아이디와 로그아웃 버튼을 출력한다.

대표 이미지는 구글에서 주워온 도트 gif인데 욕실에서 강아지와 고양이가 뛰논다... 귀엽다.

이 페이지를 꾸미면서 알게된 것인데, element들이 겹쳐지면 밑에 깔린 요소의 <a> 태그는 클릭할 수가 없게 된다.

그럴 때는 겹쳐진 요소들에 z-index값을 지정해서 <a> 태그를 포함한 요소를 맨 위로 올려주어야 한다.

---

4-2. main.php (비회원)

비회원인 상태로 메인 페이지에 진입했을 때의 화면이다.

비회원이라는 안내 문구와 로그인/회원가입 버튼을 출력한다.

---

5. 이외

로그인한 상태로 그리팅/로그인/회원가입 페이지에 진입했을 때의 화면도 같은 형식으로 적당히 정리해줬다.