본문 바로가기
HTML

231228 HTML

코딩하는딩굴 2023. 12. 28. 09:53 
<%@ 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 style="background-color : yellowgreen;">
	<!-- style 은 웹 페이지의 스타일을 변경할 수 있음 다양한 명령어 존재 -->
	<!-- background-color 는 페이지의 배경색을 변경할 수 있음 -->
	
	<!-- 목록 태그 -->
	<h1 style="color : red">2023-12-28</h1> <!-- style 의 color 는 글씨 색 변경 -->
	<ol type="A" reversed="reversed" start = "5"> 
	<!-- ol 은 태그 별 차순으로 변경되는 태그를 설정 -->
	<!-- type 에는 1, a, A, i, I 버전이 있음 -->
	<!-- reversed = "reversed" 는 순서를 반대로 뒤집기, 앞의 목록 세는 것만 바뀜 -->
	<!-- start = "5" 는 5 번째 알파벳인 E 부터 역순으로 실행, A 가 넘어가면 0, -1 로 진행 -->
		
		<li style="font-size:16pt">팀 뽑기 웹 버전으로 만들기</li>
		<li style="font-family: D2coding">html/css/js 해보기</li>
		<li>시험</li>
	</ol>

	<ul> <!-- ul 은 온점 모양으로 목록 태그를 설정 -->
		<li>목록태그</li>
		<li>목록태그</li>
		<li>목록태그</li>
	</ul>
	
	<img alt="피자사진" src="./pizza.jpg" width="700px"> <br>
	<!-- alt="" 는 이미지에 삽입 할 설명 -->
	<!-- width height 는 사진 크기를 설정 단위는 "숫자 + px" 로 작성 -->
	<!-- width, height 중 한 쪽만 작성하면 나머지는 비율에 맞게 변경됨 -->
	
	<hr> <!-- <hr> 은 화면에 줄 긋는 명령어 -->
	
	지금 스페이스바를       많이 쳤으나 한번으로 인식 <br>
	지금 스페이스바를&nbsp;&nbsp;&nbsp;많이 침
	<!-- &nbsp; 는 공백을 넣는 명령어 -->
	
	<hr>
	1. 조합형 한글, 완성형 한글 이 뭔지 알기 <br>
	2. 아스키 코드 <br>
	3. euc-kr, utf-8 의 차이점 <br>
	4. 윈도우에서 사용하는 언어 셋 알아보기 / ms-949 : euc-kr 의 변형 <br>  
	5. 유니코드 <br>
	
</body>
</html>

 

위 명령문 중 스페이스바 역할은 이렇게 표시됨

스페이스바를 여러 번 눌러도 한번으로 인식

 

추가로 수정하여 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>오늘의 할 일</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
</head> 
<body style="background-color : #F3F8FF; font-family:Noto Sans KR">
	<!-- style 은 웹 페이지의 스타일을 변경할 수 있음 다양한 명령어 존재 -->
	<!-- background-color 는 페이지의 배경색을 변경할 수 있음 색 이름, rgb 값, 16진수 등 사용 가능-->
	<!-- body 에 font 를 넣으면 body 내부 전체 글씨체를 변경할 수 있음 -->
	<!-- 목록 태그 -->
	<h1 style="color : red">2023-12-28</h1> <!-- style 의 color 는 글씨 색 변경 -->
	<ol type="A" reversed="reversed" start = "5"> 
	<!-- ol 은 태그 별 차순으로 변경되는 태그를 설정 -->
	<!-- type 에는 1, a, A, i, I 버전이 있음 -->
	<!-- reversed = "reversed" 는 순서를 반대로 뒤집기, 앞의 목록 세는 것만 바뀜 -->
	<!-- start = "5" 는 5 번째 알파벳인 E 부터 역순으로 실행, A 가 넘어가면 0, -1 로 진행 -->
		
		<li style="font-size:16pt">팀 뽑기 웹 버전으로 만들기</li>
		<li style="font-family:Noto Sans KR">html/css/js 해보기</li>
		<li>시험</li>
	</ol>

	<ul> <!-- ul 은 온점 모양으로 목록 태그를 설정 -->
		<li>목록태그</li>
		<li>목록태그</li>
		<li>목록태그</li>
	</ul>
	
	<img alt="피자사진" src="./pizza.jpg" width="700px"> <br>
	<!-- alt="" 는 이미지에 삽입 할 설명 -->
	<!-- width height 는 사진 크기를 설정 단위는 "숫자 + px" 로 작성 -->
	<!-- width, height 중 한 쪽만 작성하면 나머지는 비율에 맞게 변경됨 -->
	
	<hr> <!-- <hr> 은 화면에 줄 긋는 명령어 -->
	
	지금 스페이스바를       많이 쳤으나 한번으로 인식 <br>
	지금 스페이스바를&nbsp;&nbsp;&nbsp;많이 침
	<!-- &nbsp; 는 공백을 넣는 명령어 -->
	
	<hr>
	1. 조합형 한글, 완성형 한글 이 뭔지 알기 <br>
	2. 아스키 코드 <br>
	3. euc-kr, utf-8 의 차이점 <br>
	4. 윈도우에서 사용하는 언어 셋 알아보기 / ms-949 : euc-kr 의 변형 <br>  
	5. 유니코드 <br>
	
	<a href="./main.jsp">팀 뽑으러 이동</a>
	
</body>
</html>

 

HTML 에서 팀 뽑는 코드 만들기

자바 코드 먼저 작성

package com.poseidon.team;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.Collections;
import java.util.List;

public class Team {
	public List<String> getTeam() {
		List<String> team = new ArrayList<>();
		ArrayList<String> set = new ArrayList<>();
		String[] temp = new String[] { "강기병", "김지훈", "나우석", "노재희", "박대종",
        				"박선우", "박시호", "신동일", "신유진", "배현배", "백건하",
						"손현석", "신진수", "오상민", "오초록", "이남규", "이문희",
                        "이민우", "이수현", "이지은", "이진선", "정은숙", "정진수",
                        "정효진", "채영선", "한솔범" };
		List<String> members = new ArrayList<>(Arrays.asList(temp));

		Collections.shuffle(members); // 리스트를 섞는 명령어

		A: for (int i = 0; i < 5; i++) {
			if (members.size() == 6) {
				for (int j = 0; j < 6; j++) {
					set.add(members.get(j));
				}
				Collections.sort(set);
				team.add(set.toString());
				break A;
			}
			while (set.size() != 5) {
				set.add(members.get(0));
				members.remove(0);
			}
			Collections.sort(set);
			team.add(set.toString());
			set.clear();
		}
		return team;
	}
}

 

자바 코드에서 만들어진 List 를 웹 페이지에서 출력하기

<%@page import="java.util.List"%>
<%@page import="com.poseidon.team.Team"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>팀 뽑기</title>
</head>
<body>
	<!-- 5팀 뽑기를 만들기 -->
	<%
	Team teamClass = new Team();
	List<String> team = teamClass.getTeam();
	%>

	<table border="1">
		<thead>
			<tr>
				<th>Team</th>
				<th>Members</th>
			</tr>
		</thead>
		<tbody>
			<%
			for (int i = 0; i < team.size(); i++) {
			%>
			<tr>
				<td>Team <%=i + 1%></td>
				<td><%=team.get(i)%></td>
				<%
				}
				%>
			</tr>
	</table>
	<a href="./index.jsp">첫 화면으로 이동</a>
</body>
</html>

 

오늘도 데이터베이스에 연결해서 데이터 출력하기

DBConnector 설정

package com.poseidon.db;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
	public Connection getConn() {
		Connection conn = null;

		try {
			Class.forName("org.mariadb.jdbc.Driver");
			String url = "접속 주소 ~ 설정"; // 접속하려는 table 이름 작성
			conn = DriverManager.getConnection(url, "아이디", "비밀번호");
		} catch (ClassNotFoundException e) {
//			e.printStackTrace();
		} catch (SQLException e) {
//			e.printStackTrace();
		}
		return conn;
	}
}

 

DTO 는 생략, 가져오려는 값의 속성에 따라 private 설정 후 Getter, Setter 만들기

 

DAO

package com.poseidon.dao;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.poseidon.db.DBConnection;
import com.poseidon.dto.GetBoardDTO;

public class GetBoardDAO {
	DBConnection dbConn = new DBConnection();

	public List<GetBoardDTO> getBoardDAO() {
		List<GetBoardDTO> list = new ArrayList<>();
		Connection conn = dbConn.getConn();
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = "SELECT * FROM board";

		try {
			pstmt = conn.prepareStatement(sql);
			rs = pstmt.executeQuery();

			while (rs.next()) {
				GetBoardDTO dto = new GetBoardDTO();
				dto.setBoard_no(rs.getString("board_no"));
				dto.setBoard_title(rs.getString("board_title"));
				dto.setBoard_write(rs.getString("board_write"));
				dto.setBoard_date(rs.getString("board_date"));
				dto.setBoard_count(rs.getString("board_count"));
				list.add(dto);
			}
		} catch (SQLException e) {
			// e.printStackTrace();
		}

		return list;
	}
}

 

Board 

<%@page import="com.poseidon.dto.GetBoardDTO"%>
<%@page import="java.util.List"%>
<%@page import="com.poseidon.dao.GetBoardDAO"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
	href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
	rel="stylesheet">
<head>
<meta charset="UTF-8">
<title>게시판 만들기</title>
<!-- 타이틀 밑, /head 위 여기에 자바스크립트 or CSS 코드 작성 -->
<style type="text/css">
/* 주석 */
/* 스타일 내부는 스타일 시트 */
/* html 태그 {
속성 : 값;
} */
body {
	background-color: #EFDAD7;
}

h1, h2 { /* h1, h2 의 스타일을 설정 */
	color: red;
	font-weight: bold;
	font-family: d2coding;
}

#head3 { /* id 를 head3 으로 지은 것들의 스타일을 설정 */
	color: #c0c0c0;
	text-decoration: underline;
}

.head3 { /* class 를 head3 으로 지은 것의 스타일 설정, id 와 다름 */
	background-color: black;
	text-align: center;
}

#board {
	width: 95%; /* 브라우저의 넓이를 사용하는 범위 */
	height: 500px;
	background-color: white;
	border-collapse: collapse; /* 선과 선 사이를 이어주는 명령어 */
}

td {
	border-bottom: 1px solid black;
	/* px : 선 굵기, solid : 실선, black : 선 색상 */
	text-align: center;
}

tr:nth-child(even) { /* tr 의 숫자가 짝수인 것의 스타일을 변경 */
	background-color: black;
}
.w1 {
	width: 10%;
}
.w2 {
	width: 20%;
}
.w5 {
	width: 50%;
	text-align: left;
}
tbody:hover { /* tr 은 한 줄 전체로 마우스 오버 시 색 변경, td 는 한 칸씩 변경 */
	background-color: #B9BBDF;
	color : black; /* 글씨 색 변경 */
}
</style>
</head>
<body style="font-family: Noto Sans KR">
	<!-- 데이터베이스에서 가져오기 -->
	<%
	GetBoardDAO dao = new GetBoardDAO();
	List<GetBoardDTO> list = dao.getBoardDAO();
	%>
	<!-- 10개씩 가져오기 -->
	<!-- 번호, 제목, 글쓴이, 작성 날짜, 조회수 -->
	전체 글 수 :
	<%=list.size()%>
	<br>
	<h1>게시판</h1>
	<h2 class="head3">게시판2</h2>
	<h3 id="head3">게시판3</h3>
	<!-- h3 의 별칭을 head3 으로 설정 -->
	<table id="board">
		<thead>
			<tr>
				<th style="background-color: #F3F8FF">번호</th>
				<th>제목</th>
				<th>작성자</th>
				<th>작성 날짜</th>
				<th>조회수</th>
			</tr>
		</thead>
		<%
		for (GetBoardDTO dto : list) {
		%>
		<tbody>
			<tr>
				<td class="w1"><%=dto.getBoard_no()%></td>
				<td class="w5"><%=dto.getBoard_title()%></td>
				<td class="w1"><%=dto.getBoard_write()%></td>
				<td class="w2"><%=dto.getBoard_date()%></td>
				<td class="w1"><%=dto.getBoard_count()%></td>
			</tr>
			<%
			}
			%>
		</tbody>
	</table>
	<a href="./main.jsp">main으로 이동</a>
</body>
</html>

 

'HTML' 카테고리의 다른 글

240108  (0) 2024.01.08
240104 VScode 를 이용하기  (0) 2024.01.04
240102 HTML, Servlet 등  (2) 2024.01.02
231229 HTML  (0) 2023.12.29
231220 HTML  (0) 2023.12.20

'HTML' Related Articles

티스토리툴바