웹 디자인(3)
-
[Web Application-개발] 2024-02-15 웹 어플리케이션 제작 프로젝트 : 웹 디자인 #10-3
프로젝트 일지 남은 페이지인 게시판 페이지와 게시글 상세정보 페이지를 디자인한다. 게시판 페이지 게시판 페이지에서 작성된 게시글 위에 커서를 올리게 되면 흰색에서 회색으로 변하게 된다. 또한 현재 사용자가 게시글을 읽었을 때 읽은 표시를 게시글의 제목으로 표시를 하였다. 한 번이라도 읽은 게시글의 제목은 회색으로 변한다. 또한 버튼과 페이지 위에 커서를 올리게 되면 색이 변하게 된다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535..
2024.02.15 -
[Web Application-개발] 2024-02-13 웹 어플리케이션 제작 프로젝트 : 웹 디자인 #10-2
프로젝트 일지 웹 사이트의 기본 레이아웃을 만들었으니 이제는 각 웹 페이지의 주 컨텐츠를 디자인할 차례이다. 먼저 로그인 페이지, 회원가입 페이지 그리고 회원정보 및 수정 페이지를 디자인한다. 로그인 페이지 로그인 페이지에서 '로그인' 버튼에 커서를 올리면 색이 변하는 기능을 구현하였다. 12345678910111213141516 main> div class="main-form" id="main-login"> h2 style="margin-top:20px;padding:30px;">로그인/h2> form method="POST" action="/php/login_..
2024.02.13 -
[Web Application-개발] 2024-02-13 웹 어플리케이션 제작 프로젝트 : 웹 디자인 #10-1
프로젝트 일지 웹 어플리케이션이 갖춰야 할 기능들을 어느 정도 구현을 했으니 이제 웹 디자인을 할 차례이다. 디자인을 하기 위해서 웹 디자인의 기본 레이아웃 구성인 헤더(Header)/메인(Main)/푸터(Footer) 형태를 따랐으며 이를 시멘틱 태그로 나눠 분리하였다. 웹 디자인 기본 레이아웃 웹 디자인에 쓰이는 기본 레이아웃은 헤더/메인/푸터로 나뉜다. 헤더는 상단이며 사람으로 치면 머리에 해당한다. 메인은 중단이며 사람으로 치면 몸통에 해당한다. 푸터는 하단이며 사람으로 치면 하체에 해당한다. 정리하자면 다음과 같다. 헤더-상단-머리메인-중단-몸통푸터-하단-하체 1) 헤더(Header) 헤더는 웹 사이트 상단에 해당하는 부분이다. 헤더에는 ..
2024.02.13