Written by php-style
on 2021-11-23

로그인, 회원가입, 게시판(HTML/CSS) - 개발자 노트

생활코딩 단톡

생활코딩 카카오 공개채팅방에서 감사하게도 추천 실습과제를 주셨습니다.

감사합니다.

01일차(2021-11-21)

로그인, 게시판, 회원가입 페이지 디자인 (그림_1)

(그림_1) 로그인/게사판/회원가입 디자인

깃허브 페이지 개설

https://kjt3015.github.io/CodingLife/

로그인 페이지 목표 반응형 웹사이트 웹페이지 중앙에 고정되어 화면 크기에 따라 자동으로 크기 조절이 되도록 할것 아이디/비밀번호/로그인버튼/회원가입버튼 구현 mainBox는 2개의 grid로 영역을 나눌것

작업한 코드와 주석을 통한 코드 설명

index.html

↓펼치시면 모든 페이지 공통 html코드가 나옵니다.

더보기 sing_up.html sign up AD board.html board AD

index.css(공통 css코드)

/* 웹페이지 디자인 색상 추천 사이트 https://paletton.com/#uid=13x0u0kllllaFw0g0qFqFg0w0aF */ /* mainBox를 반응형으로 만들고자 하여 height를 % 값으로 설정하고 싶었지만 mainBox의 부모태그인 body태그의 크기를 기준으로 % 값이기 때문에 원하는 대로 화면에 꽉차는 느낌의 반응형 div태그가 만들어 지지 않았기 때문에 body태그를 화면전체를 기준으로 하는 단위인 "vw", "vh"를 이용해 화면에 맞게 크기 조절이 되도록 했다. */ body{ height: 70vh; background-color: rgb(41, 79, 109); } /* 메인박스 */ #mainBox{ /* 요소의 크기와 위치조정 */ height: 80%; width: 70%; margin: 10%; /* 요소의 배경색과 그림자, 테두리 조정 */ background-color: rgb(73, 109, 137); box-shadow: 10px 10px 10px rgb(46, 45, 45); border: 3px solid black; border-radius: 30px; } /* 그리드 */ #grid{ display: grid; grid-template-columns: 1fr 2fr; height: 100%; } .grid_element{ background-color: rgb(113, 142, 164); margin: 10px; border: 2px solid black; border-radius: 30px; }

/* 우측 grid element요소 내부 로그인 세션 */ #login_section{ /* border: 1px solid black; */ width: 310px; /* left,top속성을 주기 위해 relative로 position을 주었다. */ position: relative; /* grid element요소내부에서 정 중간정렬을 하기 위해 */ left: 50%; top: 50%; /* left,top속성을 요소의 좌측변과 상단 변을 기준으로 이동하기 때문에 본 요소 크기의 반정도 반대로 이동해줘서 요소의 중심을 맞춰준다. */ transform: translate(-50%, -50%); /* transform: translate(-50%, -50%) 자기 자신의 크기 기준으로 -50% 이동 */ } h2{ font-size: 32px; border-bottom: 2px solid black; margin: 0px; text-align: center; } ul{ padding-left: 0px; margin-bottom: 0px; } /* 리스트 왼쪽의 스타일과 공백을 없애준다. */ li{ list-style: none; padding: 0 0 12px; } /* li안의 input태그(ID,PW입력 textbox)의 크기를 조절하고 box-sizing을 이용하여 맞춰준다. */ li input{ width: 100%; height: 40px; box-sizing: border-box; } button{ width: 100%; height: 60px; background: rgb(73, 109, 137); font-size: 18px; color: aliceblue; } /* a태그의 데코를 없애주고 색을 바꿔줘 깔끔히 한다. */ a{ text-decoration: none; color: black; }

01일차 결과 페이지

가장 힘들었던 부분

반응형으로 만들기 위해 요소들의 크기에 %를 사용하며 원하는 위치에 배치시키는게 많이 어려웠다 js의 window도 사용해보고 포지션도 다양하게 줘보고 했고 결국 태그에 vh단위의 height를 줘서 늘려줘야 내부의 요소가 마치 화면에 보이는 화면을 기준으로 %단위가 적용되어 크기가 반응형으로 조절됨을 발견하여 코딩했다.

02일차 목표

회원가입 페이지 작성

02일차(2021-11-22)

회원가입 페이지 작성

아이디 비밀번호 비밀번호 확인 성명, 전화번호 이메일 로그인 페이지 이동

게시판 페이지 작성 번호 제목 작성자 날짜 조회수

반응형 페이지

회원가입 페이지

sign_up.html

sign_up.css

#sign_up_section{ /* border: 2px solid black; */ width: 90%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } h2{ font-size: 32px; border-bottom: 2px solid black; margin: 0px; text-align: center; padding-bottom: 3px; } li{ list-style: none; padding: 0 0 12px; } ul{ padding-left: 0px; } li input{ width: 100%; height: 40px; box-sizing: border-box; } button{ width: 100%; height: 40px; background-color: rgb(73, 109, 137); font-size: 18px; color: aliceblue; } a{ text-decoration: none; color: black; }

회원가입 페이지

게시판 페이지

board.html

board AD Board List 번호 제목 작성자 작성일 조회 1 생활코딩으로 공부하자! 생활코딩 2021-11-23 15 2 생활코딩으로 공부하자! 생활코딩 2021-11-23 15 3 생활코딩으로 공부하자! 생활코딩 2021-11-23 15 4 생활코딩으로 공부하자! 생활코딩 2021-11-23 15 5 생활코딩으로 공부하자! 생활코딩 2021-11-23 15 LogOut

board.css

*{ margin: 0; padding: 0; } .board_list_section{ padding: 50px; } .board_list{ width: 100%; } table{ /* 표의 테두리선들간의 간격없애기*/ border-collapse: collapse; } /* th와td에 대한 스타일 */ .board_list th, .board_list td{ /* border: 1px solid black; */ text-align: center; padding: 10px; } /* .board_list클레스의 tbody태그의 tr태그의 td태그중 2번째(제목) */ .board_list tbody tr td:nth-child(2){ text-align: left; } .board_list tr{ border-bottom: 1px solid black; } h2{ border-bottom: 3px solid black; padding: 5px; text-align: center; margin-bottom: 10px; } a{ text-decoration: none; color: black; text-align: right; }

게시판 페이지

반응형 웹페이지(모바일 버젼)

@media(max-width: 1300px){ #grid{ display: block; } #gone{ display: none; } #mainBox{ height: 100%; width: 100%; margin: 0px; box-sizing: border-box; background-color: rgb(73, 109, 137); box-shadow: 10px 10px 10px rgb(46, 45, 45); border: 3px solid black; border-radius: 30px; } .grid_element{ background-color: rgb(113, 142, 164); margin: 10px; border: 2px solid black; border-radius: 30px; height: 90%; } body{ height: 100vh; } .board_list_section{ padding: 0px; }

모바일 버젼

원래 02일차 목표는 회원가입 페이지 작성이었지만 로그인 페이지 작성때 공부했던 부분을 활용하니 너무 빨리 작성을 할 수 있었습니다. 너무 빨리 끝나버린 탓에 "조금만 더 하자!" 라는 마음으로 시작했더니 꽤나 재미가 붙어서 시간가는줄 모르고 게시판과 반응형 웹페이지 작업까지 해서 모바일 버젼 까지 작성하고 이번 실습을 마무리 해버리게 되었습니다.

지금은 php나 mySQL, Django를 이용하지 않아서 어떤 기능구현은 되지 않았지만 오늘부터 "생활코딩 PHP&MySQL;"을 하기 시작하며 기능구현을 해 나아갈 생각입니다.

제게 시간은 그리 많지 않다고 생각합니다 너무 늦게 시작해 버린 이상 조금더 노력하고 코딩하는 습관, 공부하는 습관을 들여 프로그래머로서, 컴퓨터공학과 출신으로서의 제 가치를 올려야 한다고 생각합니다.

조급한 마음은 독이 되어 쉽게 포기 하게 될 수도 있다고 생각합니다 그동안 몇번이나 그렇게 넘어져왔기 때문에 잘 알고있습니다. 이부분을 명심하며 조심스럽게 앞으로 나아가고자 합니다.

from http://ygscoding1193.tistory.com/24 by ccl(A) rewrite - 2021-11-23 04:27:24

Top