본문 바로가기
국비과정/JAVA

20230705 _[23일차]_01. 게시판 만들기 이어서

phyho 2023. 7. 5. 16:53

jul03/src/main/webapp/board.jsp

[board.jsp]

	<div id = "tableDiv"> 
		<table>
			<tr>
				<th>번호</th> 
				<th>제목</th>
				<th>글쓴이</th>
				<th>조회수</th>
				<th>쓴날짜</th>
			</tr>
			<%
			for (int i = 0; i < list.size(); i++) {
			%>
			<tr>
				<td class="td1"><%=list.get(i).getBno() %></td>
				<td class="title">
					<a href="./detail?bno=<%=list.get(i).getBno() %>"><%=list.get(i).getBtitle()%></a>
				</td>
				<td class="td1"><%=list.get(i).getBwrite() %></td>
				<td class="td1"><%=list.get(i).getBlike() %></td>
				<td class="td2"><%=list.get(i).getBdate() %></td>
			</tr>
			<%
			}
			%>
		</table>
	</div>

위 테이블에 대해 hover 스타일 적용

(순서대로)

a 링크 =>  글자색_검정 적용

a 링크 => (마우스 올리면) 배경_회색 & 글자색_흰색 적용

tr (한줄) => 배경_회색 & 글자색_흰색 적용

줄위에 마우스 올리면 적용.
제목에(a링크 포함) 마우스 올리면 글자색 적용

(겹치는 스타일은 콤마(,)로 한번에 적용가능)

=> hover 스타일을 tr & a 링크 둘다 적용시키기 위해

tr에 a태그가 포함되어 있지만 태그마다 적용 가능한 스타일이 다르기 때문에 별도로 지정해줘야 함

tr은 영역을 나타내는 거라  color 스타일 적용이 불가능한 것처럼

a태그에 적용이 가능한 스타일을 따로 지정해줘야함.

적용가능/불가능한 스타일을 알려주거나 잡아내는건 따로 없는듯 ㅠㅠ 

 

.title a : hover {~~} : title클래스의 a태그에 호버스타일 적용

tr:hover, tr:hover a {~~} : tr에 호버스타일 적용 + tr 내부의 a태그에도 적용.

 

이제 tr & a태그 전체에 호버스타일(글자색_흰색) 적용

 

http://localhost:8080/jul03/board.jsp

위의 주소( ~~board.jsp )로 들어가면 오류* (리스트가 없어서!_서블릿 통해서 jsp에 접근해야함) 

mariadb-java-client-3.1.4.jar 자료파일 => src/webapp/WEB-INF/lib 폴더에 넣기
이제 디비랑 연결해주자 

 

(패키지 & 클래스 생성)

 

package com.poseidon.db

[ DBconnection ]

package com.poseidon.db;

import java.sql.Connection;

// static 싱글턴
public class DBconnection {

	// getConn
	public Connection getconConnection() {
		Connection conn = null;
		//		"jdbc:mariadb://localhost:3306/choongang"
		//		"jdbc:mariadb://172.30.1.19:3306/choongang"
		String url = "jdbc:mariadb://127.0.0.1:3306/choongang";
		String id = "PHYHO";
		String pw = "0228";
		
		return conn;
	}
	
	
	
}

getconConnection() => get~~ 가져오겠다는 의미, Connection을 가져오겠다

 

String url = "jdbc:mariadb://localhost";
localhost 또는  '내 ip주소' => 내컴퓨터에 접속

package com.poseidon.db;

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

// static 싱글턴
public class DBconnection {

	// getConn
	public Connection getconConnection() {
		Connection conn = null;
		//			"jdbc:mariadb://localhost:3306/choongang"
		//			"jdbc:mariadb://172.30.1.19:3306/choongang"
		String url = "jdbc:mariadb://127.0.0.1:3306/choongang";
		String id = "PHYHO";
		String pw = "0228";
				
		try {
			Class.forName("org.mariadb.jdbc.Driver");	// 아까 넣은 파일 가져옴
			conn = DriverManager.getConnection(url, id, pw); // get~ 으로 가져오겠다
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return conn;
	}
}

 

(싱글턴 생성자 & 반환메소드 생성)

DBconnection      dbConn 반환

package com.poseidon.db;

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

// static 싱글턴
public class DBconnection {
	private static DBconnection dbConn = null;
	
	// 생성자
	private DBconnection() {}
	
	// 싱글턴 인스턴스를 반환하는 메소드
	public synchronized static DBconnection getInstance() {
		if(dbConn == null) {
			dbConn = new DBconnection();
		}
		return dbConn; 
	}
	
	// getConn
	public Connection getconConnection() {
		Connection conn = null;
		//			"jdbc:mariadb://localhost:3306/choongang"
		//			"jdbc:mariadb://172.30.1.19:3306/choongang"
		String url = "jdbc:mariadb://127.0.0.1:3306/choongang";
		String id = "PHYHO";
		String pw = "0228";
				
		try {
			Class.forName("org.mariadb.jdbc.Driver");
			conn = DriverManager.getConnection(url, id, pw);
		} catch (Exception e) {
			e.printStackTrace();
		}
		
		return conn;
	}
	
	
	
}

(dao 패키지 & 클래스 생성) _ 게시판의 글읽기, 쓰기, 지우기, 수정하기를 담당

 

package com.poseidon.dao

[ BoardDAO ]

 

 

package com.poseidon.dao;
// 게시판의 글읽기, 쓰기, 지우기, 수정하기를 담당하는 DAO
// MVC패턴
public class BoardDAO {
	// 게시판 글 읽어오는 메소드
	
	
}

* MVC ( Model-View-Controller )

https://cocoon1787.tistory.com/733

 

[개발상식] MVC 패턴이란? (Model-View-Controller)

🚀 이번 포스팅은 개발자 면접에서 자주 나오는 질문 중의 하나인 "MVC패턴"에 대한 내용입니다. MVC패턴의 의미와 사용해야 하는 이유, 사용 예시 등등에 대해 알아보겠습니다. 💡 MVC 패턴이란?

cocoon1787.tistory.com

 

https://aquerytool.com/

 

AQueryTool

AQueryTool은 웹 기반 ERD 툴 + SQL 자동 생성 프로그램입니다.

aquerytool.com

 

( 테이블만들기 ) 

 

* bdate의 데이터타입은 DATETIME or DATE

* Null 허용여부는 다 해제

테이블이름 지정해줘야 생성가능

 

( 테이블 생성 & 코드복사 ) 

코드 복사해서 HeidiSQL에 쿼리창에 붙여넣기

코드만큼만 블럭처리 ** 해서 실행한 후에 새로고침 하면 board 생성

 

board 생성

 

(테스트 데이터 생성) _ 100개 생성

 

( 생성된 데이터 _100개)

복사해서 HeidiSQL로 가져가서 쿼리창에 붙여넣기

*******블럭처리해서 부분실행**********

새로고침하면 board 내부에 데이터 들어간거 확인가능

( board 내부 데이터 갯수 확인 )

package com.poseidon.dto;

[ BoardDTO.java ] 에 이미 변수선언 해뒀으니

private int bno, blike;
private String btitle, bwrite, bdate;    

 

[ BoardDAO ]  에 List (boardList) 생성 _ 여기에 담아서  불러올거

package com.poseidon.dao;

import java.util.List;

import com.poseidon.dto.BoardDTO;

public class BoardDAO {
	// 게시판 글 읽어오는 메소드
	public List<BoardDTO> boardList(){


		return ;
	}
}

 

( 필요한 인스턴스 및 변수들 생성 )

package com.poseidon.dao;
// 게시판의 글읽기, 쓰기, 지우기, 수정하기를 담당하는 DAO
// MVC패턴

import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.poseidon.dto.BoardDTO;

public class BoardDAO {
	// 게시판 글 읽어오는 메소드
	public List<BoardDTO> boardList(){
		List<BoardDTO> list = new ArrayList<BoardDTO>();
		String sql = "";
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
	
		
		return ;
	}
}

 

 

conn = DBconnection.getInstance().getconConnection();
                     인스턴스 꺼내오기    =>  가져와서 getcon~ 하겠다

package com.poseidon.dao;
// 게시판의 글읽기, 쓰기, 지우기, 수정하기를 담당하는 DAO
// MVC패턴

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

import com.poseidon.db.DBconnection;
import com.poseidon.dto.BoardDTO;

public class BoardDAO {
	// 게시판 글 읽어오는 메소드
	public List<BoardDTO> boardList(){
		List<BoardDTO> list = new ArrayList<BoardDTO>();
		String sql = "SELECT * FROM board";
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		
		conn = DBconnection.getInstance().getconConnection();
		try {
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);	// *
			
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return list;
	}
}

* execute    = 실행 = 참/거짓
* executeUpdate = 실행 = 영향받은 행 1, 2, 0
* executeQuery  = select = 결과 반환

 

명령문 실행해서 가져온 결과들을 list에 담으려면

=> while 내부에  dto ( BoardDTO ) 생성

=> dto에 데이터 값들 넣어주기 (getter/setter 이용해서 값 가져와 넣어줌)

		conn = DBconnection.getInstance().getconConnection();
		try {
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);

			while(rs.next()) {
				BoardDTO dto = new BoardDTO();
				dto.setBno(rs.getInt("bno"));
				dto.setBtitle(rs.getString("btitle"));
				dto.setBwrite(rs.getString("bwrite"));
				dto.setBdate(rs.getString("bdate"));
				dto.setBlike(rs.getInt("blike"));
				list.add(dto);		// 리스트에 추가
			}
		} catch (SQLException e) {
			e.printStackTrace();
		}

  while( rs.next () ) { ~~ }   => rs 내부에 가져올 값이 있으면 참 / 없으면 거짓

 finally 로 닫아줄건데!!!!

..........

catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				rs.close();
				stmt.close();
				conn.close();
			} catch (SQLException e) {
				e.printStackTrace();
			}
			
		}

 좀 더 확실하게 하려면 데이터 다 가져왔을 때 닫아주기

..........

catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				if(rs != null) {rs.close();}
				if(stmt != null) {stmt.close();}
				if(conn != null) {conn.close();}
			} catch (SQLException e) {
				e.printStackTrace();
			}
			
		}

(최종본) 

package com.poseidon.dao;
// 게시판의 글읽기, 쓰기, 지우기, 수정하기를 담당하는 DAO
// MVC패턴

import java.awt.Taskbar.State;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import com.poseidon.db.DBconnection;
import com.poseidon.dto.BoardDTO;

public class BoardDAO {
	// 게시판 글 읽어오는 메소드
	public List<BoardDTO> boardList(){
		List<BoardDTO> list = new ArrayList<BoardDTO>();
		String sql = "SELECT * FROM boardview";
		Connection conn = null;
		Statement stmt = null;
		ResultSet rs = null;
		
		conn = DBconnection.getInstance().getconConnection();
		try {
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			while(rs.next()) {
				BoardDTO dto = new BoardDTO();
				dto.setBno(rs.getInt("bno"));
				dto.setBtitle(rs.getString("btitle"));
				dto.setBwrite(rs.getString("bwrite"));
				dto.setBdate(rs.getString("bdate"));
				dto.setBlike(rs.getInt("blike"));
				list.add(dto);	// 리스트에 추가
			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				if(rs != null) {rs.close();}
				if(stmt != null) {stmt.close();}
				if(conn != null) {conn.close();}
			} catch (SQLException e) {
				e.printStackTrace();
			}
			
		}
		
		return list;
	}
}

[ Board.java ] 에서 요만큼 삭제

요만큼은 추가

 

package com.poseidon.board;

[ Board.java ] 

package com.poseidon.board;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

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;

import com.poseidon.dao.BoardDAO;
import com.poseidon.dto.BoardDTO;

@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 {
		BoardDAO dao = new BoardDAO();
		List<BoardDTO> list = dao.boardList();
		
		RequestDispatcher rd = request.getRequestDispatcher("board.jsp");
		request.setAttribute("Sdata","전달합니다.");
		request.setAttribute("list", list); // *
		rd.forward(request, response);
	}

}

 

* 삭제한 부분인 (boardList 빼고 list로 바꿔줘야함)

request.setAttribute("list", list); 

 

실행하면

 

[BoardDAO.java] 에서 쿼리 명령문 바꿔주면

String sql = "SELECT * FROM board ORDER BY bno DESC LIMIT 10";

=> bno 기준으로 역순 방향, 10개의 데이터만 선택

package com.poseidon.board;

[ Detail.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;

import com.poseidon.dao.BoardDAO;
import com.poseidon.dto.BoardDTO;

@WebServlet("/detail")
public class Detail extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public Detail() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//http://localhost:8080/jul03/detail?bno=1
		System.out.println(request.getParameter("bno"));	// *
		int bno = Integer.parseInt(request.getParameter("bno"));	// **
		// DAO만들고
		BoardDAO dao = new BoardDAO();
        
		// DAO속 detail을 실행시켜서 DTO받기
		BoardDTO detail = dao.detail(bno);	// datail 만들자~

	}

}

* System.out.println(request.getParameter("bno"));

=>  bno를 파라미터로 받아오면 주소창에 아래처럼 표시됨

      http://localhost:8080/jul03/detail?bno=1

 

** getParameter() 는 무조건 String타입으로만  가능. => int bno 로 받아오려면

int bno = Integer.parseInt(request.getParameter("bno"));

 

BoardDTO detail = dao.detail(bno);  => 만들러 가자!!

[ BoardDAO.java ] 에  BoardDTO를 타입으로 가지는 detail() 메소드 생성

	public BoardDTO detail(int bno) {
		BoardDTO dto = new BoardDTO();
		
		return dto;
	}

( 변수들생성 & db연결 )

	public BoardDTO detail(int bno) {
		BoardDTO dto = new BoardDTO();
		Connection conn = null;
		String sql = "";
		Statement stmt = null;
		ResultSet rs = null;
		
		// DB연결
		conn = DBconnection.getInstance().getconConnection();
		stmt = conn.createStatement();    // * try/catch 필요
		
		return dto;
	}

* stmt 에는  try/catch 필요 

 

( 쿼리 명령문 넣어주고 실행 )*

	public BoardDTO detail(int bno) {
		BoardDTO dto = new BoardDTO();
		Connection conn = null;
		String sql = "SELECT * FROM board WHERE bno=" + bno;  // *
		Statement stmt = null;
		ResultSet rs = null;
		
		// DB연결
		conn = DBconnection.getInstance().getconConnection();
		try {
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql) // *
		} catch (SQLException e) {
			e.printStackTrace();
		}
		
		return dto;
	}

( 실행값 가져오기 )

	public BoardDTO detail(int bno) {
		BoardDTO dto = new BoardDTO();
		Connection conn = null;
		String sql = "SELECT * FROM board WHERE bno=" + bno;
		Statement stmt = null;
		ResultSet rs = null;
		
		// DB연결
		conn = DBconnection.getInstance().getconConnection();
		try {
			stmt = conn.createStatement();
			rs = stmt.executeQuery(sql);
			if(rs.next()) {
				dto.setBno(rs.getInt("bno"));
				dto.setBtitle(rs.getString("btitle"));
				dto.setBwrite(rs.getString("bwrite"));
				dto.setBdate(rs.getString("bdate"));
				dto.setBlike(rs.getInt("blike"));			}
		} catch (SQLException e) {
			e.printStackTrace();
		} finally {
			try {
				if(rs != null) {rs.close();}
				if(stmt != null) {stmt.close();}
				if(conn != null) {conn.close();}
			} catch (SQLException e) {
				e.printStackTrace();
			}
		}
		
		return dto;
	}

 

[ Detail.java ] _ 디스패쳐로 보내기 (detail.jsp)

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;

import com.poseidon.dao.BoardDAO;
import com.poseidon.dto.BoardDTO;

@WebServlet("/detail")
public class Detail extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public Detail() {
        super();
    }
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//http://localhost:8080/jul03/detail?bno=1
		System.out.println(request.getParameter("bno"));
		int bno = Integer.parseInt(request.getParameter("bno"));
		// DAO만들고
		BoardDAO dao = new BoardDAO();
		// DAO속 detail을 실행시켜서 DTO받기
		BoardDTO detail = dao.detail(bno);
		
		//System.out.println(detail.getBno()); // 확인용으로 찍어본거
		//System.out.println(detail.getBtitle());
		//System.out.println(detail.getBwrite());
		
		// 디스패쳐로 보내기 (detail.jsp) 
		RequestDispatcher rd = request.getRequestDispatcher("detail.jsp");
		request.setAttribute("detail", detail);
		rd.forward(request, response);
	}

}

src/webapp

[ detail.jsp ] _ 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>
	<h1>톺아보기</h1>
	${detail.bno }<br>
	${detail.btitle }<br>
	${detail.bdate }<br>
	${detail.bwrite }<br>
	${detail.blike }<br>
</body>
</html>

게시판에서 100번 게시글 누르면 짠

( becontent 생성) _ 데이터유형은 text & Null 값 해제

저장*****

데이터 탭에서  becontent 생성확인!

 

 

ALTER TABLE `board`
   ADD COLUMN `bcontent` TEXT NOT NULL AFTER `btitle`;

 

 

내용칸 채우려면

UPDATE board SET bcontent = '내용' WHERE 'bcontent'= null ;  => 안됐었음......왜지?

UPDATE board SET bcontent = '내용';  => 내용칸 채우기

 

 

UPDATE board SET bwrite = '홍길동';

 

[ BoardDAO ]

 

String sql = "SELECT * FROM board ORDER BY bno DESC LIMIT 10";

String sql = "SELECT bno, btitle, bwrite, bdate, blike FROM board ORDER BY bno DESC LIMIT 10";  로 변경

너무 명령문이 길고 복잡

=> view를 만들어줄거

 

CREATE VIEW boardview AS
SELECT bno, btitle, bwrite, bdate, blike 
FROM board ORDER BY bno DESC LIMIT 10

=> SELECT~ 이후의 것들로 가상테이블(VIEW )을 만들겠다 

 

10개만 보여줌

 

SELECT * FROM boardview;  => 명령문 실행하면

 

[ BoardDAO ] 에서 명령문 

String sql = "SELECT * FROM boardview"; 로 변경해주기

*view는 읽어오기만 하는거라 변경될 위험이 없음*

* 100번 글 지워보기 *

DELETE FROM board WHERE bno=100;

content 항목 추가해주기

[ BoardDTO.java ]

	public String getBcontent() {
		return bcontent;
	}
	public void setBcontent(String bcontent) {
		this.bcontent = bcontent;
	}

* getter/setter 해주기

(지금처럼 하나가 아닌, 여러개 추가하는 경우에는 그냥 전체에 대한 getter/setter 다시 걸어주는게 나음!)

 

[ BoardDAO.java ] 에도 추가

위에는 지워주고 아래부분에만 추가? 왜져 ㅠㅠ

dto.setBcontent(rs.getString("bcontent"));

[ detail.jsp ] 에도 추가

${detail.bcontent}<br>

 테스트용도는 지워주고

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>톺아보기</title>
	<link rel="stylesheet" type="text/css" href="./detail.css"> // *
</head>
<body>
	<h1>톺아보기</h1>

</body>
</html>

* <link rel="stylesheet" type="text/css" href="./css/detail.css">

이제 css 파일을 따로 만들어서 여기에서 스타일 지정 코드 작성할거

 

 ( webapp 에 새로운 css폴더 생성 )

 

 

  ( css 파일 생성 )

 

 

( 이전에 css코드 작성해줬던 파일인 menu.jsp 연결해주기 )

 

 

 [ detail.jsp ] 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>톺아보기</title>
	<link rel="stylesheet" type="text/css" href="./css/detail.css">
</head>
<body>
	<jsp:include page="./menu.jsp"/>
	<h1>톺아보기</h1>
	<div class="content">
		<div class="title">
			${detail.btitle }
		</div>
		<div class="write">
			<div class="bwrite">
				${detail.bwrite }
			</div>
			<div class="blike">
				${detail.blike }
			</div>
		</div>
		<div class="date">
			${detail.bdate }
		</div>
		<div class="bcontent">
			${detail.bcontent }
		</div>
	</div>

</body>
</html>

  css로 꾸며주기 위해 class 설정해준듯???????

 

 ** 오타로 인한 오류주의 **

 

 css 꾸미쟝

[ detail.css ]

 

 

 

 (btitle 글자 가운데로)

밖으로 밀린 선 처리하려면!

 .title 에 box-sizing: border-box; 추가

		<div class="write">
			<div class="bwrite">
				${detail.bwrite }
			</div>
			<div class="blike">
				${detail.blike }
			</div>
		</div>

( 위의 클래스들에 스타일 지정 )

@charset "UTF-8";
.content{
	margin: 0 auto;
	width: 900px;
	height: auto;
	background-color: gray;
}

.title{
	width: 100%;
	height: 100px;
	line-height: 100px;
	font-size: x-large;
	border-bottom: 2px solid black;
	padding-left: 20px;
	box-sizing: border-box;
}

.write{
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: lime;
}

 

.blike{
	text-align: right;
}
.date{
	width: 100%;
	height: 30px;
	line-height: 30px;
	background-color: #c0c0c0;
}

 

.bcontent{
	width: 100%;
	height: auto;
	min-height: 300px;  /*높이는 자동(auto)지만 최소 300px까지*/
}

 높이가 auto 면 내용부분에 따라서 늘어남!!!

그래도 최소 300px부터 시작하도록 설정해준거

 

 

각각 끝자락에 패딩을 주고 싶다면!??

 

 체크 부분에 해당하는 class에다가 padding(right / left) 적용시키면 되는데

width 가 퍼센트로 설정되어 있어서 패딩값을 넣어주면 패딩값을 포함한 넓이의 퍼센트로 계산이 되어 뒤쪽 것들이 밀리게됨!

 아래처럼

  box-sizing: border-box;

같이 넣어주면 전체 넓이에 영향을 주지 않음!!!!

 아니면

내용 추가!

 결과화면은 요렇게!

 최종 css코드!!

@charset "UTF-8";
.content{
	margin: 0 auto;
	width: 900px;
	height: auto;
	background-color: #B0C4DE;
	padding: 10px;
}

.title{
	width: 100%;
	height: 100px;
	line-height: 100px;
	font-size: x-large;
	border-bottom: 2px solid black;
	padding-left: 20px;
	box-sizing: border-box;
}

.write{
	width: 100%;
	height: 50px;
	line-height: 50px;
	background-color: #B0E0E6;
	padding-left: 20px;
	box-sizing: border-box;
}
.bwrite, .blike{
	width: 50%;
	height: 50px;
	float: left;
}
.blike{
	text-align: right;
	padding-right: 20px;
	box-sizing: border-box;
}
.date{
	width: 100%;
	height: 30px;
	line-height: 30px;
	background-color: #B0E0E6;
	padding-left: 20px;
	box-sizing: border-box;
}
.bcontent{
	width: 100%;
	height: auto;
	min-height: 300px;  /*높이는 자동(auto)지만 최소 300px까지*/
	padding: 10px 0 10px 20px;
	box-sizing: border-box;
	background-color: #E0FFFF;
}

 

 

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

20230706 _[24일차]_02. JS연습(콘솔창입력)  (0) 2023.07.06
20230706 _[24일차]_01. 게시판 글쓰기 기능만들기  (0) 2023.07.06
20230704 _[22일차]_03. 상단메뉴바 + 게시판만들기  (1) 2023.07.05
20230703 _[21일차]_02. 메뉴만들기 + 시멘틱태그  (0) 2023.07.03
20230703 _[21일차]_01. VS code 설치 + HTML  (0) 2023.07.03

'국비과정/JAVA' Related Articles

티스토리툴바