20230703 _[21일차]_02. 메뉴만들기 + 시멘틱태그

[ 웹페이지 상단 메뉴바 만들기 ] _ 시멘틱태그 사용 (태그만 봐도 어떤 영역인지 알 수 있음)

semantic.html 파일생성

<!DOCTYPE html>
<html>
    <head>
        <title>메뉴만들어보기</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            nav{
                width: 100%;
                height: 50px;
                background-color: black;
            }
            ul, li{
                margin: 0;
                padding: 0;
            }
            li{
                float: left;
                width: 100px;
                height: 50px;
                list-style-type: none;  
                line-height: 50px;
                color: white;
                margin: 0 50px;
            }
        </style>
    </head>
    <body>
        <header></header>
        <nav>
            <ul>
                <li>home</li>
                <li>store</li>
                <li>iPad</li>
                <li>iPhone</li>
                <li>Watch</li>
                <li>Vision</li>
            </ul>
        </nav>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer></footer>
    </body>
</html>

(무료 아이콘)

https://www.iconfinder.com/search?q=apple&price=free

Icons - Iconfinder

Download 7,316,269 icons. Available in PNG and SVG formats. Ready to be used in web design, mobile apps and presentations.

www.iconfinder.com

* 이미지파일 png 를 써야 뒷배경이 없음 (jpg는 뒷배경 있음)

( PNG vs SVG )

PNG 는 이미지 파일

SVG 는 코드만 존재하는 파일

<!DOCTYPE html>
<html>
    <head>
        <title>메뉴만들어보기</title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            nav{
                width: 100%;
                height: 50px;
                background-color: black;
                overflow: hidden;
            }
            ul, li{
                margin: 0;
                padding: 0;
            }
            li{
                float: left;
                width: 50px;
                height: 50px;
                list-style-type: none;  
                line-height: 50px;
                color: white;
                margin: 0 20px;
                text-align: center;
                box-sizing: border-box;
            }
            li:hover{	// 마우스 올렸을때 바뀌는 속성
                font-weight: bolder;
            }
            li img{
                vertical-align: middle;	//  img 가운데에 크기 맞게 고정
            }
            #menu{
                margin: 0 auto;	// 메뉴바 이미지&글자 가운데 정렬
                width: 600px;
                height: 100%;
                /* text-align: center; */
            }
        </style>
    </head>
    <body>
        <header></header>
        <nav>
            <div id="menu">
                <ul>
                    <li><img src="./apple.png" alt="HOME" width="50%"></li>
                    <li>store</li>
                    <li>iPad</li>
                    <li>iPhone</li>
                    <li>Watch</li>
                    <li>Vision</li>
                </ul>
            </div>
        </nav>
        <main>
            <section></section>
            <article></article>
        </main>
        <footer></footer>
    </body>
</html>

[[[ 이클립스 ]]]

Dynamic Web Project _ jul03 프로젝트 생성 (java에서 web으로 전환 주의*)

webapp폴더 아래에

index.jsp

menu.jsp
semantic.jsp
main.jsp -> html + css 코드 들어갈 파일

파일 생성

[ main.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<style>
body {
	margin: 0;
	padding: 0;
}

nav {
	width: 100%;
	height: 50px;
	background-color: black;
	overflow: hidden;
}

ul, li {
	margin: 0;
	padding: 0;
}

li {
	float: left;
	width: 50px;
	height: 50px;
	list-style-type: none;
	line-height: 50px;
	color: white;
	margin: 0 20px;
	text-align: center;
	box-sizing: border-box;
}

li:hover {
	font-weight: bolder;
	cursor: pointer;	// 마우스 올리면 커서가 손모양으로 바뀜
}

li img {
	vertical-align: middle;
}

#menu {
	margin: 0 auto;
	width: 600px;
	height: 100%;
}
li a{
	text-decoration: none;
	color: white;
}
</style>
	<nav>
		<div id="menu">
			<ul>
				<li onclick="location.href='./'"><img src="./apple.png" alt="HOME" width="50%"></li>
				<li><a href="./main.jsp">Main</a></li>
				<li onclick="location.href='./semantic.jsp'">semantic</li>
				<li>게시판</li>
				<li>Watch</li>
				<li>Vision</li>
			</ul>
		</div>
	</nav>

* 이미지 파일 webapp폴더에 넣어줘야 적용됨

[ index.jsp ]

* <jsp:include page="./menu.jsp"> </jsp:include> : menu.jsp 파일불러오기

=> <jsp:include page="./menu.jsp"/> 축약가능

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<jsp:include page="./menu.jsp"/>	// 파일 불러오기
	<h1>index</h1>
</body>
</html>

* 파일 그대로 불러오면 아래처럼 html코드가 중복됨 (head, body 등등..)

=> menu.jsp 파일에서의 html코드는 삭제해주기!

<jsp:include page="./menu.jsp"/> 코드를 모든 파일에 넣어주면 모두 menu.jsp 와 연결!

=> 추후에 수정 필요시 menu.jsp 파일 하나만 수정해도 일괄적용.

[ main.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<jsp:include page="./menu.jsp"/>
</body>
</html>

[ semantic.jsp ]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<jsp:include page="./menu.jsp"/>
	<h1>여기도 메뉴 넣겠습니다</h1>
</body>
</html>

* onclick vs a태그 : 원하는 주소값으로 이동하는 기능

[ 서블릿 연결 ]

com.poseidon.board 패키지 아래에

Board.java 파일 생성 (서블릿 생성 )

package com.poseidon.board;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/board")

public class Board extends HttpServlet {
	private static final long serialVersionUID = 1L;
    public Board() {
        super();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//		response.getWriter().append("Served at: ").append(request.getContextPath());
		RequestDispatcher rd = request.getRequestDispatcher("board.jsp");	// 
		request.setAttribute("Sdata","전달합니다.");	// 값지정 key, value   -> 지금은 String이지만 모든 데이터 다 가능 
		rd.forward(request, response);
	}

}

getRequestDispatcher("board.jsp")
=> 데이터 를 가지고 board.jsp로 이동
request.setAttribute("Sdata","전달합니다.");

서블릿 생성 후 menu.jsp 파일에서 ./board 와 연결!!! (*** 서블릿은 주소에 .jsp 없음주의 ***)

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<style>
body {
	margin: 0;
	padding: 0;
}

nav {
	width: 100%;
	height: 50px;
	background-color: black;
	overflow: hidden;
}

ul, li {
	margin: 0;
	padding: 0;
}

li {
	float: left;
	width: 50px;
	height: 50px;
	list-style-type: none;
	line-height: 50px;
	color: white;
	margin: 0 20px;
	text-align: center;
	box-sizing: border-box;
}

li:hover {
	font-weight: bolder;
	cursor: pointer;	
}

li img {
	vertical-align: middle;
}

#menu {
	margin: 0 auto;
	width: 600px;
	height: 100%;
}
li a{
	text-decoration: none;
	color: white;
}
</style>
	<nav>
		<div id="menu">
			<ul>
				<li onclick="location.href='./'"><img src="./apple.png" alt="HOME" width="50%"></li>
				<li><a href="./main.jsp">Main</a></li>
				<li onclick="location.href='./semantic.jsp'">semantic</li>
				<li onclick="location.href='./board'">게시판</li>	// *
				<li>Watch</li>
				<li>Vision</li>
			</ul>
		</div>
	</nav>

index.jsp 를 ctrl+c & ctrl+v
board.jsp 생성

** 재실행 **

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>서블릿을 활용한 보드 열기</title>
</head>
<body>
	<jsp:include page="./menu.jsp"/>
	<h1>board</h1>
	${Sdata }	// 서블릿에 있는 키를 불러서 값을 가져오게 하는 명령어
</body>
</html>

jsp 에서는 프로그램적 요소가 들어가서
메뉴 하나하나 파일로 저장?
매번 수정하지 않고 한번만 수정하면 됨...?.....

* 다음1조 조사 *
private static final long serialVersionUID = 1L;

'국비과정 > JAVA' 카테고리의 다른 글

20230705 _[23일차]_01. 게시판 만들기 이어서 (2)	2023.07.05
20230704 _[22일차]_03. 상단메뉴바 + 게시판만들기 (1)	2023.07.05
20230703 _[21일차]_01. VS code 설치 + HTML (0)	2023.07.03
20230630 _[21일차]_03. 로그인 구현2 (html+java)_미완 (0)	2023.07.03
20230630 _[21일차]_01. 메모리 정리 (0)	2023.06.30

Will

20230703 _[21일차]_02. 메뉴만들기 + 시멘틱태그

'국비과정 > JAVA' 카테고리의 다른 글

티스토리툴바

20230703 _[21일차]_02. 메뉴만들기 + 시멘틱태그

'국비과정 > JAVA' 카테고리의 다른 글

'국비과정/JAVA' Related Articles

티스토리툴바