memory

main.jsp

//register 버튼을 누를경우 join.jsp로 이동하게 설정

style.css

//register form css 추가

join.jsp

//register page작성

Cresponsive.css

//main page를 제외한 responsive design재설정

result

main.jsp

//게시판 영역을 만들어서 최신글 제목을 표기하게한다

//사진을 추가해 사진을클릭시 portfolio를 보는화면으로 이동하게한다

//email click시 메일 보내기 기능을 설정

style.css

//padding으로 간격을 준다

result

main.jsp

style.css

//기존에 만든 menu.css 와 icon.css를 style.css에 통합시키고 login css를 추가하였다

//button 오른쪽 정렬을 위해 아이디 b를 td에 설정했다

result

main.jsp

//head부분에 menu.css, style.css 링크를 추가한다

//div를 이용해 menu 아이디를 설정하고 

//ul, li를 이용해 menu 생성

responsive.css

//tablet일경우 menu가 세로로 배치되어야하므로

//menu넓이를 줄여주고 menu.css에서

//padding값을 줘서 세로로 정렬되게한다

menu.css

//list-style을 none으로 설정하고 text를 가운데 배치

//menu를 가로로 정렬하기위해 inline-block을설정한다

style.css

//하이퍼링크 속성을 제거하고 기본글꼴을 설정

result

main.jsp

//head 부분에 css링크를 추가

// body에 ul, li 를 이용해 하이퍼링크 추가

icon.css

//먼저 list style을 제거해준다.

//float left를 설정해 가로정렬이되게만들고

//이미지를넣기위해 display를 block으로 설정후 width와 height를 설정한다

//background-position을 이용해 사진 위치를 조절한다.

result

main.jsp

//style에 wrapper id와 box, inside class를 선언한다

//box-shadow를 통해 테두리를 만든다

//head부분에 meta tag를 추가한다

//body 부분에 design할 요소를 추가한다

//#first : menu part

//#ad : advertisement img

//#icon : sns icon part

//#second, third, fourth, fifth, sixth : main contents

//link를 통해 responsive.css를 가져온다

responsive.css

//pc, tablet, mobile 3가지 device에 대한 design설정

//mobile에서 second box가 사라지게 설정

result(mobile, tablet, pc)