퍼블리싱(08.14~08.26)

퍼블리싱 : HTML, CSS 작업으로 프론트 화면 만들기

전체 화면 HTML, CSS까지 다 만들었음.

팀원들과 header.jsp와 header.css 공유하여 각자 화면 개발

-> 화면마다 일일히 header.jsp를 include해야 하고, 마이페이지 같은 경우엔 따로 header.jsp와 profileheader.jsp까지 페이지마다 추가해야 하는 불편함 있었음

각 기능별로 폴더 만들어 파일들을 분리함.

-> 폴더마다 헤더 경로가 달라져 절대경로와 상대경로가 안 먹힘

${pageContext.request.contextPath}로 파일의 경로 가져와서 헤더 파일에 적용해 헤더 파일을 어디서든 찾을 수 있게 수정

-> form 폴더에 들어있는 모든 헤더류의 파일에 적용

기존엔 헤더파일 여러개와 css파일까지 각 페이지마다 각자 적용해야 하여 관리가 어려웠음.

mainpage.jsp와 mainprofilepage.jsp 처럼 헤더만 적용된 파일을 만들어 각 페이지별로 필요한 헤더를 한 줄만 include하면 되게 만듬

각 헤더 jsp 파일에 css까지 적용되어 있으므로 적용이 간편함.

include하다보면 categorytab 옆으로 안 붙고 겹치거나 아래로 내려가는 현상 발생

-> categorytab의 height를 100%f로 하고, position을 absolute로 수정

모든 categorytab이 붙는 페이지는 div로 묶고, 그 div에 margin-left를 categorytab의 width로 주어 해결함.

-> 이제 모든 페이지가 categorytab 옆에 잘 붙음

헤더가 페이지마다 조금씩 바뀌는 문제

헤더 안에 공용 css 파일을 모두 넣어놓아서 어디에든 똑같이 적용 가능하도록 하여 통일감을 줬다.

해당 css파일에 있는 클래스 명을 div로 감싸주면 알아서 해당 영역으로 맞춰서 들어간다.

Ever