'CSS'에 해당되는 글 3건

  1. 2011.01.23 [The NetBeans E-commerce Tutorial] 5. Preparing the Page Views and Controller Servlet
  2. 2010.02.04 CSS 모음
  3. 2009.05.28 겹쳐보이는 레이어(div)

[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 로 페이지 구조 잡기
  1. Create the structure in HTML.
  2. Create a set of styles to define the appearance.
  3. View the page to examine the results of your changes.

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

- Creating a Header and Footer
include를 해도 되지만 모든 페이지에서 반복해야 한다.
header와 footer를 지정하는 방법이 있다.
web.xml 에 추가 
    <jsp-config>
        <jsp-property-group>
            <description>header and footer settings</description>
            <url-pattern>/index.jsp</url-pattern>
            <url-pattern>/WEB-INF/view/*</url-pattern>
            <include-prelude>/WEB-INF/jspf/header.jspf</include-prelude>
            <include-coda>/WEB-INF/jspf/footer.jspf</include-coda>
        </jsp-property-group>
    </jsp-config>

- 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 모음

- HTML Table
<table width="600" border="1" style="border-collapse:collapse;">


- 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)


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

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

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

티스토리툴바