◈ 'CSS' 태그의 글 목록

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

[The NetBeans E-commerce Tutorial] 5. Preparing the Page Views and Controller Servlet
日常茶飯事
2011. 1. 23. 17:18
Posted by pantarei

[The NetBeans E-commerce Tutorial] 5. Preparing the Page Views and Controller Servlet

[todo] 이거에 대한 화면 캡쳐를 보여주면 이해가 잘될거 같다.

http://netbeans.org/kb/docs/javaee/ecommerce/page-views-controller.html

- index.jsp <body> <div id="main"> <div id="header"> header </div> <div id="indexLeftColumn"> left column </div> <div id="indexRightColumn"> right column </div> <div id="footer"> footer </div> </div> </body> affablebean.css body { font-family: Arial, Helvetica, sans-serif; width: 850px; text-align: center; margin: 20px auto; } #main { background: #eee } #header { height: 250px; background: #aaa; } #footer { height: 60px; clear: left; background: #aaa; } #indexLeftColumn { height: 400px; width: 350px; float: left; background: #ccc; } #indexRightColumn { height: 400px; width: 500px; float: left; background: #eee; }

width와 height로 위치를 잡고 background로 공간이 보이게 한다.
margin: 20px auto
위, 아래로 20px을 띄우고, auto로 좌, 우로도 그만큼 띄운다.
float: left
좌, 우측 컬럼을 만든다.
clear: left
footer에 넣어서 위쪽 border가 표시되게 한다.
(이게 없으면 footer가 제대로 보이지 않는다.)

- div 로 페이지 구조 잡기

Create the structure in HTML.
Create a set of styles to define the appearance.
View the page to examine the results of your changes.

- jsp 파일을 WEB-INF/view/ 로 옮김.

- Creating a Header and Footer
include를 해도 되지만 모든 페이지에서 반복해야 한다.
header와 footer를 지정하는 방법이 있다.
web.xml 에 추가
- Controller Servlet 작성

@WebServlet(name = "Controller",
            loadOnStartup = 1,
            urlPatterns = {"/category", "/addToCart", "/viewCart", "/updateCart", "/checkout", "/purchase", "/chooseLanguage"}
)
public class ControllerServlet extends HttpServlet {

@Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {

String userPath = request.getServletPath();
        if (userPath.equals("/category")) {
		} else if (userPath.equals("/viewCart")) {
            userPath = "/cart";
        } else if (userPath.equals("/checkout")) {
        } else if (userPath.equals("/chooseLanguage")) {
        }
        String url = "/WEB-INF/view" + userPath + ".jsp";
        try {
            request.getRequestDispatcher(url).forward(request, response);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }

@Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {

String userPath = request.getServletPath();
        if (userPath.equals("/addToCart")) {
        } else if (userPath.equals("/updateCart")) {
        } else if (userPath.equals("/purchase")) {
            userPath = "/confirmation";
        }
        String url = "/WEB-INF/view" + userPath + ".jsp";
        try {
            request.getRequestDispatcher(url).forward(request, response);
        } catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}

저작자표시 비영리 변경금지

CSS 모음
日常茶飯事
2010. 2. 4. 10:17
Posted by pantarei

CSS 모음

- HTML Table

- font-size

- vertical-align
top, middle

<div style="overflow-y:scroll; height:100px; width: 100%">

style="width:40px"
<td style="background:#F2F2F2;" align="center">
align은 ?

color:orange; font-weight:bold
<div style="display:none;"

저작자표시 비영리 변경금지

겹쳐보이는 레이어(div)
日常茶飯事
2009. 5. 28. 04:54
Posted by pantarei

겹쳐보이는 레이어(div)

공지사항과 사업부 공지사항이 각각 div로 되어 있어서 클릭하면 해당 div를 보여준다.
IE에서는 제대로 보이는데 FF에서 겹쳐 보인다.

두 div의 visibility가 visible로 되어 있어서 FF에서 겹쳐 보인다.
IE에서는 첫번째 div가 보임.

간단한 페이지를 만들어 테스트를 해보면 IE, FF 둘다 겹쳐 보이는데
이 경우는 div내에 table이 있고 iframe으로 다른 페이지를 가져오는 구조임.