'전체 글'에 해당되는 글 390건

회원가입 및 로그인 구현 작업 순서

1. 테이블 생성 
2. 우편번호 입력
3. 빈즈 생성 : MemberaBean.java(hobby는 배열로 선언), ZipcodeBean.java

라이브러리

데이터

table.sql

Mysql과 HeidiSQL 프로그램을 이용해서 테이블을 만들고 데이터를 입력한다.

DROP TABLE IF EXISTS tblMember;

CREATE TABLE `tblMember` (
  `id` char(20) NOT NULL,
  `pwd` char(20) NOT NULL,
  `name` char(20) NOT NULL,
  `gender` char(1) NOT NULL,
  `birthday` char(6) NOT NULL,
  `email` char(30) NOT NULL,
  `zipcode` char(5) NOT NULL,
  `address` char(50) NOT NULL,
  `hobby` char(5) NOT NULL,
  `job` char(20) NOT NULL,
  PRIMARY KEY (`id`)
)COLLATE='euckr_korean_ci';

DROP TABLE IF EXISTS tblZipcode;

CREATE TABLE `tblZipcode` (
  `zipcode` char(5) NOT NULL,
  `area1` char(10) DEFAULT NULL,
  `area2` char(20) DEFAULT NULL,
  `area3` char(30) DEFAULT NULL
)COLLATE='euckr_korean_ci';

주소검색기능을 테스트하기 위해 서울시의 우편번호 데이터만 가져온 파일

myapp > WebContent > WEB-INF > lib 위치에 넣어야 할 jar 파일

CSS, Javascript 파일

style.css

BODY {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
TD {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
SELECT {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
DIV {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
FORM {
	FONT-SIZE: 9pt; COLOR: black; LINE-HEIGHT: 160%; FONT-FAMILY: 굴림,verdana,tahoma
}
TEXTAREA {
	BORDER-RIGHT: 1px solid #999999; BORDER-TOP: 1px solid #999999; FONT-SIZE: 9pt; BORDER-LEFT: 1px solid #999999 ; COLOR: BLACK; BORDER-BOTTOM: 1px solid #999999; FONT-FAMILY: 굴림,verdana; BACKGROUND-COLOR: white
}
INPUT {
	BORDER-RIGHT: 1px solid #999999; BORDER-TOP: 1px solid #999999; FONT-SIZE: 9pt; BORDER-LEFT: 1px solid #999999; COLOR: BLACK; BORDER-BOTTOM: 1px solid #999999; FONT-FAMILY: 굴림,verdana; HEIGHT: 19px; BACKGROUND-COLOR: white
}

A:link {text-decoration:none;color:#696969}
A:hover{text-decoration:yes;color:#66CCFF}
A:visited {text-decoration:none;color:#330066}

script.js

function inputCheck(){
	if(document.regFrm.id.value==""){
		alert("아이디를 입력해 주세요.");
		document.regFrm.id.focus();
		return;
	}
	if(document.regFrm.pwd.value==""){
		alert("비밀번호를 입력해 주세요.");
		document.regFrm.pwd.focus();
		return;
	}
	if(document.regFrm.repwd.value==""){
		alert("비밀번호를 확인해 주세요");
		document.regFrm.repwd.focus();
		return;
	}
	if(document.regFrm.pwd.value != document.regFrm.repwd.value){
		alert("비밀번호가 일치하지 않습니다.");
		document.regFrm.repwd.value="";
		document.regFrm.repwd.focus();
		return;
	}
	if(document.regFrm.name.value==""){
		alert("이름을 입력해 주세요.");
		document.regFrm.name.focus();
		return;
	}
	if(document.regFrm.birthday.value==""){
		alert("생년월일을 입력해 주세요.");
		document.regFrm.birthday.focus();
		return;
	}
	if(document.regFrm.email.value==""){
		alert("이메일을 입력해 주세요.");
		document.regFrm.email.focus();
		return;
	}
    var str=document.regFrm.email.value;	   
    var atPos = str.indexOf('@');
    var atLastPos = str.lastIndexOf('@');
    var dotPos = str.indexOf('.'); 
    var spacePos = str.indexOf(' ');
    var commaPos = str.indexOf(',');
    var eMailSize = str.length;
    if (atPos > 1 && atPos == atLastPos && 
	   dotPos > 3 && spacePos == -1 && commaPos == -1 
	   && atPos + 1 < dotPos && dotPos + 1 < eMailSize);
    else {
          alert('E-mail주소 형식이 잘못되었습니다.\n\r다시 입력해 주세요!');
	      document.regFrm.email.focus();
		  return;
    }
    if(document.regFrm.zipcode.value==""){
		alert("우편번호를 검색해 주세요.");
		return;
	}
	if(document.regFrm.job.value=="0"){
		alert("직업을 선택해 주세요.");
		document.regFrm.job.focus();
		return;
	}
	document.regFrm.submit();
}

function win_close(){
	self.close();
}

Java 파일들

* member 패키지에 MemberBean.java, ZipcodeBean.java 그리고 MemberBean.java 순으로 클래스를 만든다.

MemberBean.Java

package member;

public class MemberBean {
	private String id;
	private String pwd;
	private String name;
	private String gender;
	private String birthday;
	private String email;
	private String zipcode;
	private String address;
	private String hobby[];
	private String job;
	
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getPwd() {
		return pwd;
	}
	public void setPwd(String pwd) {
		this.pwd = pwd;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getGender() {
		return gender;
	}
	public void setGender(String gender) {
		this.gender = gender;
	}
	public String getBirthday() {
		return birthday;
	}
	public void setBirthday(String birthday) {
		this.birthday = birthday;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public String[] getHobby() {
		return hobby;
	}
	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}

}

ZipcodeBean.java

package member;

public class ZipcodeBean {
	private String zipcode;
	private String area1;
	private String area2;
	private String area3;
	
	public String getZipcode() {
		return zipcode;
	}
	public void setZipcode(String zipcode) {
		this.zipcode = zipcode;
	}
	public String getArea1() {
		return area1;
	}
	public void setArea1(String area1) {
		this.area1 = area1;
	}
	public String getArea2() {
		return area2;
	}
	public void setArea2(String area2) {
		this.area2 = area2;
	}
	public String getArea3() {
		return area3;
	}
	public void setArea3(String area3) {
		this.area3 = area3;
	}
}

다음 나올 파일 MemberMgr.Java에서 import받은
DBConnectionMgr.java 파일

package ch07;

import java.sql.*;
import java.util.Properties;
import java.util.Vector;

public class DBConnectionMgr {
    private Vector connections = new Vector(10);
    private String _driver = "org.gjt.mm.mysql.Driver",
    _url = "jdbc:mysql://127.0.0.1:3306/mydb?useUnicode=true&characterEncoding=EUC_KR",
    _user = "root",  //본인이 설정해 놓은 mysql의 ID
    _password = "1234"; //본인이 설정해 놓은 mysql의 password
    
    private boolean _traceOn = false;
    private boolean initialized = false;
    private int _openConnections = 50;
    private static DBConnectionMgr instance = null;

    public DBConnectionMgr() {
    }
    /** Use this method to set the maximum number of open connections before
     unused connections are closed.
     */

    public static DBConnectionMgr getInstance() {
        if (instance == null) {
            synchronized (DBConnectionMgr.class) {
                if (instance == null) {
                    instance = new DBConnectionMgr();
                }
            }
        }

        return instance;
    }

    public void setOpenConnectionCount(int count) {
        _openConnections = count;
    }


    public void setEnableTrace(boolean enable) {
        _traceOn = enable;
    }


    /** Returns a Vector of java.sql.Connection objects */
    public Vector getConnectionList() {
        return connections;
    }


    /** Opens specified "count" of connections and adds them to the existing pool */
    public synchronized void setInitOpenConnections(int count)
            throws SQLException {
        Connection c = null;
        ConnectionObject co = null;

        for (int i = 0; i < count; i++) {
            c = createConnection();
            co = new ConnectionObject(c, false);

            connections.addElement(co);
            trace("ConnectionPoolManager: Adding new DB connection to pool (" + connections.size() + ")");
        }
    }


    /** Returns a count of open connections */
    public int getConnectionCount() {
        return connections.size();
    }


    /** Returns an unused existing or new connection.  */
    public synchronized Connection getConnection()
            throws Exception {
        if (!initialized) {
            Class c = Class.forName(_driver);
            DriverManager.registerDriver((Driver) c.newInstance());

            initialized = true;
        }


        Connection c = null;
        ConnectionObject co = null;
        boolean badConnection = false;


        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);

            // If connection is not in use, test to ensure it's still valid!
            if (!co.inUse) {
                try {
                    badConnection = co.connection.isClosed();
                    if (!badConnection)
                        badConnection = (co.connection.getWarnings() != null);
                } catch (Exception e) {
                    badConnection = true;
                    e.printStackTrace();
                }

                // Connection is bad, remove from pool
                if (badConnection) {
                    connections.removeElementAt(i);
                    trace("ConnectionPoolManager: Remove disconnected DB connection #" + i);
                    continue;
                }

                c = co.connection;
                co.inUse = true;

                trace("ConnectionPoolManager: Using existing DB connection #" + (i + 1));
                break;
            }
        }

        if (c == null) {
            c = createConnection();
            co = new ConnectionObject(c, true);
            connections.addElement(co);

            trace("ConnectionPoolManager: Creating new DB connection #" + connections.size());
        }

        return c;
    }


    /** Marks a flag in the ConnectionObject to indicate this connection is no longer in use */
    public synchronized void freeConnection(Connection c) {
        if (c == null)
            return;

        ConnectionObject co = null;

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if (c == co.connection) {
                co.inUse = false;
                break;
            }
        }

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if ((i + 1) > _openConnections && !co.inUse)
                removeConnection(co.connection);
        }
    }

    public void freeConnection(Connection c, PreparedStatement p, ResultSet r) {
        try {
            if (r != null) r.close();
            if (p != null) p.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public void freeConnection(Connection c, Statement s, ResultSet r) {
        try {
            if (r != null) r.close();
            if (s != null) s.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public void freeConnection(Connection c, PreparedStatement p) {
        try {
            if (p != null) p.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public void freeConnection(Connection c, Statement s) {
        try {
            if (s != null) s.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }


    /** Marks a flag in the ConnectionObject to indicate this connection is no longer in use */
    public synchronized void removeConnection(Connection c) {
        if (c == null)
            return;

        ConnectionObject co = null;
        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if (c == co.connection) {
                try {
                    c.close();
                    connections.removeElementAt(i);
                    trace("Removed " + c.toString());
                } catch (Exception e) {
                    e.printStackTrace();
                }

                break;
            }
        }
    }


    private Connection createConnection()
            throws SQLException {
        Connection con = null;

        try {
            if (_user == null)
                _user = "";
            if (_password == null)
                _password = "";

            Properties props = new Properties();
            props.put("user", _user);
            props.put("password", _password);

            con = DriverManager.getConnection(_url, props);
        } catch (Throwable t) {
            throw new SQLException(t.getMessage());
        }

        return con;
    }


    /** Closes all connections and clears out the connection pool */
    public void releaseFreeConnections() {
        trace("ConnectionPoolManager.releaseFreeConnections()");

        Connection c = null;
        ConnectionObject co = null;

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if (!co.inUse)
                removeConnection(co.connection);
        }
    }


    /** Closes all connections and clears out the connection pool */
    public void finalize() {
        trace("ConnectionPoolManager.finalize()");

        Connection c = null;
        ConnectionObject co = null;

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            try {
                co.connection.close();
            } catch (Exception e) {
                e.printStackTrace();
            }

            co = null;
        }

        connections.removeAllElements();
    }


    private void trace(String s) {
        if (_traceOn)
            System.err.println(s);
    }
}


class ConnectionObject {
    public java.sql.Connection connection = null;
    public boolean inUse = false;

    public ConnectionObject(Connection c, boolean useFlag) {
        connection = c;
        inUse = useFlag;
    }
}

MemberMgr.Java

package member;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Vector;

import ch07.DBConnectionMgr;

public class MemberMgr {
	private DBConnectionMgr pool;
	
	public MemberMgr() {
		pool= DBConnectionMgr.getInstance();
	}
	
	//ID중복확인 - true 중복 (존재)
	public boolean checkId(String id) {
		Connection con = null; //java.sql import
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		boolean flag = false; //초기화
		try {
			con = pool.getConnection();
			sql = "select id from tblMember where id=?"; //아이티 포커스
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, id);
			rs = pstmt.executeQuery();
			flag = rs.next();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return flag; //id중복확인
	}
	
	//우편번호검색 (select)
	//select * from tblZipcode where area3 like '%강 남 대 로%' (가운데 있는 것 : %)
	public Vector<ZipcodeBean> zipcodeRead (String area3) { //도로명 부분
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		Vector<ZipcodeBean> vlist = new Vector<ZipcodeBean>(); // 벡터 선언
		try {
			con = pool.getConnection();
			sql = " select * from tblZipcode where area3 like ? ";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, "%"+area3+"%");  // %
			rs = pstmt.executeQuery();
			
			while(rs.next()) {
				ZipcodeBean bean = new ZipcodeBean();
				bean.setZipcode(rs.getString(1));  // 뒤에 숫자 주의
				bean.setArea1(rs.getString(2));
				bean.setArea2(rs.getString(3));
				bean.setArea3(rs.getString(4));
				vlist.addElement(bean);  // 빠뜨리지 않도록 주의
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return vlist;
	}
	
	
	//회원가입 : 배열로 들어오는 값 처리
	
	public boolean insertMember(MemberBean bean) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		boolean flag = false;
		try {
			con = pool.getConnection();
			sql = "insert tblMember(id,pwd,name,gender,birthday,email,zipcode,address,hobby,job)"
					+ "values(?,?,?,?,?,?,?,?,?,?)" ;
			pstmt = con.prepareStatement(sql);
			///////////////////////////////////////////////////////////////////////
			pstmt.setString(1, bean.getId());
			pstmt.setString(2, bean.getPwd());
			pstmt.setString(3, bean.getName());
			pstmt.setString(4, bean.getGender());
			pstmt.setString(5, bean.getBirthday());
			pstmt.setString(6, bean.getEmail());
			pstmt.setString(7, bean.getZipcode());
			pstmt.setString(8, bean.getAddress());
			////////////////////////////////////////////////////////////////////////
			// {"인터넷", "여행", "영화"} : 순서대로 배열 0,1,2로 들어온다. 
			String hobby[] = bean.getHobby();
			char hb[] = {'0','0','0','0','0'};
			String lists[] = {"인터넷", "여행", "게임", "영화", "운동"};
			// 배열2개 = 2중 for문
			for (int i = 0; i < hobby.length; i++) { //for문 자동완성은 가장 근처의 변수로 만들어준다. 선택된 것(3)
				for (int j = 0; j < lists.length; j++) { //5번 
					if(hobby[i].equals(lists[j])) {
						hb[j]='1';
						break;
					}//if		
				}//for2
			}//for1
			pstmt.setString(9, new String(hb));  // "11010"이라는 문자열로 저장
			////////////////////////////////////////////////////////////////////////
			pstmt.setString(10, bean.getJob());
			///////////////////////////////////////////////////////////////////////	
			// int cnt = pstmt.executeUpdate(); // insert: int형으로 execute됨. 입력성공 1 실패 0.
			if(pstmt.executeUpdate()==1) flag=true;
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}
		return flag;
	}
	
	
	
	//로그인
	public boolean loginMember(String id, String pwd) {  //한 개 이상 (프라이머리키가 있어서 t/f값으로 체크 가능하다.)
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		boolean flag = false;
		try {
			con = pool.getConnection();
			sql = " select id from tblMember where id=? and pwd=? ";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, id); //세팅. 순서중요
			pstmt.setString(2, pwd);
			rs = pstmt.executeQuery(); //실행
			flag = rs.next(); //true면 로그인 성공. 없으면(false) 로그인 실패
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return flag; 
	}
	
	

	//회원정보가져오기
	public MemberBean getMember(String id) {  //레코드 타입으로 가져옴
		//id pk, db1
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		// 객체 불변의 법칙 : new로 만들어진 객체는 절대 타입이 변하지 않는다.
		MemberBean bean = new MemberBean(); //bean : reference 변수
		Object obj = bean;
		try {
			con = pool.getConnection();
			sql = " select * from tblMember where id=? ";  
			// select * from 빈칸을 없애면 쿼리는 먹지만 구 자바에서는 인식을 못한다.
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, id);
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				bean.setId(rs.getString("id"));
				bean.setPwd(rs.getString("pwd"));
				bean.setName(rs.getString("name"));
				bean.setGender(rs.getString("gender"));
				bean.setBirthday(rs.getString("birthday"));
				bean.setEmail(rs.getString("email"));
				bean.setZipcode(rs.getString("zipcode"));
				bean.setAddress(rs.getString("address"));
				//hobby => 10101 (table) ==> {"1","0","1","0","1"} 문자열배열로 변형해서 저장
				String hobby = rs.getString("hobby");
				String hobbys[] = new String[5];
				//배열 아래는 for
				for (int i = 0; i < hobbys.length; i++) {
					hobbys[i] = hobby.substring(i, i+1);  // 문자열을 배열로 만들어
				}
				bean.setHobby(hobbys);		
				bean.setJob(rs.getString("job"));
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return bean;
	}

	
	//회원정보수정 : 입력(회원가입)과 거의 비슷함.
	public boolean updateMember(MemberBean bean) { //db2
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		boolean flag = false;
		try {
			con = pool.getConnection();
			sql = "update tblMember set pwd=?, name=?, gender=?, birthday=?, email=?, zipcode=?, address=?, hobby=?, job=? where id=?";
			pstmt = con.prepareStatement(sql);
			///////////////////////////////////////////////////////////////////////
			
			pstmt.setString(1, bean.getPwd());
			pstmt.setString(2, bean.getName());
			pstmt.setString(3, bean.getGender());
			pstmt.setString(4, bean.getBirthday());
			pstmt.setString(5, bean.getEmail());
			pstmt.setString(6, bean.getZipcode());
			pstmt.setString(7, bean.getAddress());
			////////////////////////////////////////////////////////////////////////
			// {"인터넷", "여행", "영화"} : 순서대로 배열 0,1,2로 들어온다. 
			String hobby[] = bean.getHobby();
			char hb[] = {'0','0','0','0','0'};
			String lists[] = {"인터넷", "여행", "게임", "영화", "운동"};
			// 배열2개 = 2중 for문
			for (int i = 0; i < hobby.length; i++) { //for문 자동완성은 가장 근처의 변수로 만들어준다. 선택된 것(3)
				for (int j = 0; j < lists.length; j++) { //5번 
					if(hobby[i].equals(lists[j])) {
						hb[j]='1';
						break;
					}//if		
				}//for2
			}//for1
			pstmt.setString(8, new String(hb));  // "11010"이라는 문자열로 저장
			////////////////////////////////////////////////////////////////////////
			pstmt.setString(9, bean.getJob());
			pstmt.setString(10, bean.getId());
			///////////////////////////////////////////////////////////////////////	
			// int cnt = pstmt.executeUpdate(); // insert: int형으로 execute됨. 입력성공 1 실패 0.
			if(pstmt.executeUpdate()==1) flag=true;
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}
		return flag;
	}
}

Jsp 파일들

* Webcontent 폴더 안에 member 폴더에 만든다.

member.jsp

<%@ page contentType="text/html; charset=EUC-KR" %>
<html>
<head>
<title>회원가입</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
	function idCheck(id){
		if(id==""){
		alert("아이디를 입력하세요");  //null값은 서버에 부하걸리므로 가기전에 잡아준다
		document.regFrm.id.focus();
		return; // function를 벗어난다.
		}
		url = "idCheck.jsp?id="+id;
		window.open(url, "IDCheck", "width=300, height=150");
	}
	function zipSearch(){
		url = "zipSearch.jsp?search=n";  // n : 창만 띄우고 메소드는 호출하지 않는 것
		window.open(url, "ZipcodeSearch", "width=500, height=300");
	}
	
</script>
</head>
<body bgcolor="#FFFFCC" onLoad="regFrm.id.focus()"> <!-- 정적 --> 
	<div align="center">
		<br /><br />
		<form name="regFrm" method="post" action="memberProc.jsp">
			<table cellpadding="5">
				<tr>
					<td bgcolor="#FFFFCC">
						<table border="1" cellspacing="0" cellpadding="2" width="600">
							<tr bgcolor="#996600">
								<td colspan="3"><font color="#FFFFFF"><b>회원 가입</b></font></td>
							</tr>
							<tr>
								<td width="20%">아이디</td>
								<td width="50%">
									<input name="id" size="15"> 
									<input type="button" value="ID중복확인" onClick="idCheck(this.form.id.value)"><!-- 유동적 -->
								</td>
								<td width="30%">아이디를 적어 주세요.</td>
							</tr>
							<tr>
								<td>패스워드</td>
								<td><input type="password" name="pwd" size="15"></td>
								<td>패스워드를 적어주세요.</td>
							</tr>
							<tr>
								<td>패스워드 확인</td>
								<td><input type="password" name="repwd" size="15"></td>
								<td>패스워드를 확인합니다.</td>
							</tr>
							<tr>
								<td>이름</td>
								<td><input name="name" size="15">
								</td>
								<td>이름을 적어주세요.</td>
							</tr>
							<tr>
								<td>성별</td>
								<td>
									남<input type="radio" name="gender" value="1" checked> 
									여<input type="radio" name="gender" value="2">
								</td>
								<td>성별을 선택 하세요.</td>
							</tr>
							<tr>
								<td>생년월일</td>
								<td><input name="birthday" size="6">
									ex)830815</td>
								<td>생년월일를 적어 주세요.</td>
							</tr>
							<tr>
								<td>Email</td>
								<td><input name="email" size="30">
								</td>
								<td>이메일를 적어 주세요.</td>
							</tr>
							<tr>
								<td>우편번호</td>
								<td><input name="zipcode" size="5" readonly>
									<input type="button" value="우편번호찾기" onClick="zipSearch()">
								</td>
								<td>우편번호를 검색하세요.</td>
							</tr>
							<tr>
								<td>주소</td>
								<td><input name="address" size="45"></td>
								<td>주소를 적어 주세요.</td>
							</tr>
							<tr>
								<td>취미</td>
								<td>인터넷<input type="checkbox" name="hobby" value="인터넷">
									여행<input type="checkbox" name="hobby" value="여행"> 게임<input
									type="checkbox" name="hobby" value="게임"> 영화<input
									type="checkbox" name="hobby" value="영화"> 운동<input
									type="checkbox" name="hobby" value="운동">
								</td>
								<td>취미를 선택 하세요.</td>
							</tr>
							<tr>
								<td>직업</td>
								<td><select name=job>
										<option value="0" selected>선택하세요.
										<option value="회사원">회사원
										<option value="연구전문직">연구전문직
										<option value="교수학생">교수학생
										<option value="일반자영업">일반자영업
										<option value="공무원">공무원
										<option value="의료인">의료인
										<option value="법조인">법조인
										<option value="종교,언론,에술인">종교.언론/예술인
										<option value="농,축,수산,광업인">농/축/수산/광업인
										<option value="주부">주부
										<option value="무직">무직
										<option value="기타">기타
								</select></td>
								<td>직업을 선택 하세요.</td>
							</tr>
							<tr>
								<td colspan="3" align="center">
								   <input type="button" value="회원가입" onclick="inputCheck()">
								    &nbsp; &nbsp; 
								    <input type="reset" value="다시쓰기">
								    &nbsp; &nbsp; 
								    <input type="button" value="로그인" onClick="javascript:location.href='login.jsp'">
								 </td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

arrayTest.jsp / arrayTest2.jsp

<!-- arrayTest.jsp -->
<%@page contentType="text/html; charset=EUC-KR" %>
<%
		request.setCharacterEncoding("EUC-KR");
%>
<form action="arrayTest2.jsp">
취미 : 인터넷<input type="checkbox" name="hobby" value="인터넷">
		여행<input type="checkbox" name="hobby" value="여행"> 
		게임<input type="checkbox" name="hobby" value="게임"> 
		영화<input type="checkbox" name="hobby" value="영화"> 
		운동<input type="checkbox" name="hobby" value="운동">
		<input type="submit">
</form>

<!-- arrayTest2.jsp -->
<%@page contentType="text/html; charset=EUC-KR" %>
<%
		request.setCharacterEncoding("EUC-KR");
		//arrayTest2.jsp?hobby=인터넷&hobby=여행
		String hobby[] = request.getParameterValues("hobby");
		//배열, 벡터 밑에는 무조건 for
		for(int i=0; i<hobby.length; i++){
			out.println(hobby[i]+"&nbsp;");
		}
%>
<form action="arrayTest2.jsp">
취미 : 인터넷<input type="checkbox" name="hobby" value="인터넷">
		여행<input type="checkbox" name="hobby" value="여행"> 
		게임<input type="checkbox" name="hobby" value="게임"> 
		영화<input type="checkbox" name="hobby" value="영화"> 
		운동<input type="checkbox" name="hobby" value="운동">
		<input type="submit">
</form>

idCheck.jsp

<%@page contentType="text/html; charset=EUC-KR" %>
<jsp:useBean id="mgr" class="member.MemberMgr" /> 
<html>
<head>
<title>ID 중복체크</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFCC">
<div align="center">
<%
	String id = request.getParameter("id");
	boolean result = mgr.checkId(id);
%>
	<b><%=id%></b>
<%
	if(result) {
		out.println("는 이미 존재하는 ID입니다.");
	}else {
		out.println("는 사용 가능한 ID입니다.");		
		}
%>
<br><br>
<a href="#" onclick="self.close()">닫기</a>
</div>
</body>
</html>

zipsearch.jsp

<%@page import="member.ZipcodeBean"%>
<%@page import="java.util.Vector"%>
<%@page contentType="text/html; charset=EUC-KR" %>
<jsp:useBean id="mgr" class="member.MemberMgr" />
<%
	request.setCharacterEncoding("EUC-KR");
	String search = request.getParameter("search");
	String area3 = null;
	Vector<ZipcodeBean> vlist = null;
	if(search.equals("y")){ // 검색버튼을 클릭시
		area3 = request.getParameter("area3");
		vlist = mgr.zipcodeRead(area3);
		//out.print(vlist.size());
	}
%>

<html>
<head>
<title>우편번호 검색</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function loadSearch() {
		frm = document.zipFrm;
		if(frm.area3.value==""){
			alert("도로명을 입력하세요.");
			return;
		}
		frm.action = "zipSearch.jsp";
		frm.submit();
	}
	function sendAdd(zipcode, adds){
		opener.document.regFrm.zipcode.value = zipcode;
		opener.document.regFrm.address.value = adds;
		self.close();
	}
</script>
</head>
<body bgcolor="#FFFFCC">
	<div align="center">
		<br />
		<form name="zipFrm" method="post">
			<table>
				<tr>
					<td>
					<br/>도로명 입력 : 	<input name="area3">
						<input type="button" value="검색" 
						onclick="loadSearch()">
					</td>
				</tr>
				<!-- 검색결과시작 -->
				<%
					if (search.equals("y")){
						if(vlist.isEmpty()){
				%>
				<tr>
					<td align="center"><br/>검색된 결과가 없습니다.</td>				
				</tr>						
				<%		
					}else{
				%>
				<tr>
					<td align="center"><br/>
					※ 검색 후 아래 우편번호를 클릭하면 자동으로 입력됩니다.
					</td>				
				</tr>
				<%
					for(int i=0; i<vlist.size(); i++){
						ZipcodeBean bean = vlist.get(i);
						String rZipcode = bean.getZipcode();
						String rArea1 = bean.getArea1();
						String rArea2 = bean.getArea2();
						String rArea3 = bean.getArea3();
						String adds = rArea1 + " " + rArea2 + " " + rArea3 + " " ;

				%>
				<tr>
					<td>
						<a href="#" onclick="javascript:sendAdd('<%=rZipcode%>','<%=adds%>')">
							<%=rZipcode+" "+adds%>
						</a>
					</td>
				</tr>
				<%	
							}//for
						}
					}
				%>

				<!-- 검색결과끝 -->
				<tr>
					<td align="center"><br/>
					<a href="#" onClick="self.close()">닫기</a></td>
				</tr>
			</table>
			<input type="hidden" name="search" value="y">
		</form>
	</div>
</body>
</html>

memberUpdate.jsp

<%@page import="member.MemberBean"%>
<%@ page contentType="text/html;charset=EUC-KR" %>
<jsp:useBean id="mgr" class="member.MemberMgr" />
<% 
	String id = (String) session.getAttribute("idKey");
	MemberBean bean = mgr.getMember(id);
%>
<html>
<head>
<title>회원수정</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
	function zipCheck() {
		url = "zipSearch.jsp?search=n";
		window.open(url, "ZipCodeSearch","width=500,height=300,scrollbars=yes");
	}
</script>
</head>
<body bgcolor="#FFFFCC" onLoad="regFrm.id.focus()">
	<div align="center">
		<br /> <br />
		<form name="regFrm" method="post" action="memberUpdateProc.jsp">
			<table align="center" cellpadding="5" >
				<tr>
					<td align="center" valign="middle" bgcolor="#FFFFCC">
						<table border="1" cellpadding="2" align="center" width="600">
							<tr align="center" bgcolor="#996600">
								<td colspan="3"><font color="#FFFFFF"><b>회원 수정</b></font></td>
							</tr>
							<tr>
								<td width="20%">아이디</td>
								<td width="80%"><input name="id" size="15"
									value="<%=bean.getId()%>" readonly></td>    
									<!-- readonly : 수정대상이 아님 
									
									******************차이 다시 정리
									varchar :  
									char : 
									where절에 들어오는 것은 pk, 인덱스가 되기 때문에 퍼포먼스가 좋다.
									-->
							</tr>
							<tr>
								<td>패스워드</td>
								<td><input type="password" name="pwd" size="15"
									value="<%=bean.getPwd()%>"></td>
							</tr>
							<tr>
								<td>이름</td>
								<td><input name="name" size="15"
									value="<%=bean.getName()%>"></td>
							</tr>
							<tr>
								<td>성별</td>
								<td>남<input type="radio" name="gender" value="1"  
								<%=bean.getGender().equals("1")?"checked":""%>> 
								여<input type="radio" name="gender" value="2"
								<%=bean.getGender().equals("2")?"checked":""%>>
								</td>
							</tr>
							<tr>
								<td>생년월일</td>
								<td><input name="birthday" size="6"
									value="<%=bean.getBirthday()%>">ex)920814</td>
							</tr>
							<tr>
								<td>Email</td>
								<td><input name="email" size="30"
									value="<%=bean.getEmail()%>"></td>
							</tr>
							<tr>
								<td>우편번호</td>
								<td><input name="zipcode" size="5"
									value="" readonly> <input
									type="button" value="우편번호찾기" onClick="zipCheck()"></td>
							</tr>
							<tr>
								<td>주소</td>
								<td><input name="address" size="45" value="<%=bean.getAddress()%>"></td>
							</tr>
							<tr>
								<td>취미</td>
								<td>
								<%
								String lists[] = {"인터넷", "여행", "게임", "영화", "운동"};
								String hobby[] = bean.getHobby(); //10101
								
								for(int i=0; i<lists.length; i++){
									out.print(lists[i]);
								%>
								<input type="checkbox" name="hobby" value="<%=lists[i]%>" 
								<%=hobby[i].equals("1")?"checked":""%>></input>
								<%
								}
								%>
								</td>
							</tr>
							<tr>
								<td>직업</td>
								<td><select name=job>
										<option value="0">선택하세요.
										<option value="회사원">회사원
										<option value="연구전문직">연구전문직
										<option value="교수,학생">교수 / 학생
										<option value="일반자영업">일반자영업
										<option value="공무원">공무원
										<option value="의료인">의료인
										<option value="법조인">법조인
										<option value="종교,언론,에술인">종교.언론/예술인
										<option value="농,축,수산,광업인">농/축/수산/광업인
										<option value="주부">주부
										<option value="무직">무직
										<option value="기타">기타
								</select>
								<script>document.regFrm.job.value="<%=bean.getJob()%>"</script>
								</td>
							</tr>
							<tr>
								<td colspan="3" align="center">
								<input type="submit" value="수정완료"> &nbsp; &nbsp; 
								<input type="reset" value="다시쓰기"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table>
		</form>
	</div>
</body>
</html>

memberUpdateProc.jsp

<%@page contentType="text/html; charset=EUC-KR" %>
<%request.setCharacterEncoding("EUC-KR");%>
<jsp:useBean id="mgr" class="member.MemberMgr" />
<jsp:useBean id="bean" class="member.MemberBean" />
<jsp:setProperty property="*" name="bean"/>
<%
		boolean result = mgr.updateMember(bean);
		if(result){
%>
		<script>
			alert("회원정보를 수정 하였습니다.");
			location.href = "login.jsp";
		</script>
<%
		}
		else
		{
%>
		<script>
			alert("회원정보를 수정에 실패 하였습니다.");
			history.back();
		</script>
<%}%>

로그인, 로그아웃

login.jsp

<!-- login.jsp -->
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
	request.setCharacterEncoding("EUC-KR");
	String id = (String) session.getAttribute("idKey"); //세션에서 idkey를 가져온다
%>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function loginCheck() {
		if (document.loginFrm.id.value == "") {
			alert("아이디를 입력해 주세요.");
			document.loginFrm.id.focus();
			return;
		}
		if (document.loginFrm.pwd.value == "") {
			alert("비밀번호를 입력해 주세요.");
			document.loginFrm.pwd.focus();
			return;
		}
		document.loginFrm.submit();
	}
</script>
<body bgcolor="#FFFFCC">
	<div align="center">
		<br />
		<br />
		<%
			if (id != null) {
		%>
		<b><%=id%></b>님 환영합니다.<br /> 제한된 기능을 사용 할 수가 있습니다.<br /> <a
			href="logout.jsp">로그아웃</a>&nbsp; <a href="memberUpdate.jsp">회원수정</a>
		<%
			} else {
				//id = request.getParameter("id");
		%>
		<form name="loginFrm" method="post" action="loginProc.jsp"> 
		<!-- 일반적 select는 get방식이 일반적이나 단점은 넘어가는 값이 노출됨으로 로그인 시 보안에 문제가 생겨서 post를 쓴다. -->
			<table>
				<tr>
					<td align="center" colspan="2"><h4>로그인</h4></td>
				</tr>
				<tr>
					<td>아 이 디</td>
					<td><input name="id" value="aaa"></td>
				</tr>
				<tr>
					<td>비밀번호</td>
					<td><input type="password" name="pwd" value="1234"></td>
				</tr>
				<tr>
					<td colspan="2">
						<div align="right">
							<input type="button" value="로그인" onclick="loginCheck()">&nbsp;
							<input type="button" value="회원가입"
								onClick="javascript:location.href='member.jsp'">
						</div>
					</td>
				</tr>
			</table>
		</form>
		<%
			}
		%>
	</div>
</body>

loginProc.jsp

<!-- login Process.jsp -->
<%@page contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<jsp:useBean id="mgr" class="member.MemberMgr" />
	<% request.setCharacterEncoding("EUC-KR"); 
	String id = request.getParameter("id");	
	String pwd = request.getParameter("pwd");	
	boolean result = mgr.loginMember(id, pwd);
	String msg = "로그인에 실패하였습니다.";
	
	if(result) {
		msg = "로그인에 성공하였습니다.";
		session.setAttribute("idKey", id); //id를 세션 안에 넣어 두겠음
	}
%>
<script>
	alert("<%=msg%>");
	location.href="login.jsp";
</script>

logout.jsp

<!-- logout.jsp -->
<%@ page contentType="text/html; charset=EUC-KR"%>
<%
	//세션에 저장된 idKey를 제거
	session.removeAttribute("idKey");

	//현재 세션을 서버에서 제거
	session.invalidate();
	response.sendRedirect("login.jsp"); //로그아웃 후 로그인 폼으로 돌아가기
%>

구글 폰트 바로가기

style.css

body{
font-family: 'Nanum Myeongjo', serif;
font-weight: 800;
}
.height{
    /* height: 1000px; */
    min-height: 60vh; /* 최소한의 공간 */
}

brap-Project1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 카드</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="/js/all.js"></script>
  <!-- 구글폰트링크 -->
  <link href="https://fonts.googleapis.com/css?family=Nanum+Myeongjo&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 컨테이너시작 -->
  <div class="container bg-secondary text-white">
    <div class="row">
      <div class="col">
        <h1 class="text-danger mt-4 mb-4">Basic</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro nihil sit
          dignissimos cum repudiandae? Qui dolores laborum, quisquam at pariatur voluptas!
          Blanditiis maxime reiciendis id dolore sapiente assumenda suscipit ut!</p>
        <button type="button" class="btn btn-danger m-2 p-2">Danger Button</button>
        <button type="button" class="btn btn-primary m-3 p-3">Primary Button</button>
      </div>
    </div>
  </div>
  <!-- 컨테이너 끝 -->
  <!-- 컨테이너 플루이드 시작 -->
  <div class="container-fluid bg-warning text-dark p-5">
    <div class="row">
      <div class="">
        <h1 class="display-1">Display-1</h1>
        <p class="display-4">Display-4</p>
        <p class="text-success lead px-5">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum sint incidunt
          accusamus aspernatur magnam doloremque nisi architecto illum vel ex nobis voluptates tempore voluptatum,
          aliquam ut animi esse eligendi facilis.</p>
        <button class="btn btn-dark text- mt-4">btn dark</button>
        <button class="btn btn- text-muted mb-4">btn dark</button>
        <button class="btn btn-secondary text-primary mx-">btn dark</button>
      </div>
    </div>
  </div>
  <!-- 컨테이너 플루이드 끝 -->
  <!-- 섹션 1 시작 -->
  <section id="skills" class="bg-dark p-5">
    <div class="container">
      <div class="row text-center height algin-items-center">  <!-- 세로정렬 -->
        <div class="col">
          <h1 class="text-white">section example</h1>
          <p class="display-4 text-warning">paragraph display</p>
          <p class="text-info px-5 text-right">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Omnis unde
            eaque hic, asperiores quibusdam, aut ducimus necessitatibus, libero perspiciatis ipsam aperiam fugiat
            temporibus aspernatur tempore harum nam reprehenderit voluptatum tenetur.</p>
          <p class="text-light text-left py-4">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem
            veritatis veniam, placeat accusamus accusantium maxime, alias, temporibus hic recusandae facilis corporis
            eligendi praesentium expedita. Nesciunt nisi architecto deserunt inventore error?</p>
          <button type="button" class="btn btn-warning text-secondary">btn warning</button>
          <button type="button" class="btn btn-info text-dark">btn info</button>
          <button type="button" class="btn btn-light text-dark">btn light</button>
        </div>
      </div>
    </div>
  </section>
  <!-- 섹션 1 끝 -->
  <!-- 섹션 2 시작 -->
  <section class="bg-light">
      <div class="container">
      <div class="row height align-items-center justify-content-center">   <!-- row는 flex랑 비슷한 역할. justify-content-center: 가로정렬. 위 아래 동일하게 여백이 생긴다.  -->
          <div class="col-10"> 
            <!-- col은 전체 12개가 있고 그 중 10이니까 마진에 2 할당 -->
            <h1 class="display-2 text-danger text-uppercase">Col-10</h1>
            <p class="text-muted lead my-4">my-4: 마진을 y축으로 4만큼. Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum magni eum, maiores ad aperiam vitae accusantium consectetur beatae rem eveniet quasi sed libero enim rerum doloremque voluptatum nostrum quod corporis!</p>
            <a href="" class="btn btn-secondary text-danger text-uppercase p-3 mt-3">explore</a>
            <a href="" class="btn btn-dark text-light text-uppercase p-3 mt-3">explore</a>
          </div>
        </div>
      </div>
    </section>
    <!-- 섹션 - 2 끝 -->
  <!-- 부트스트랩 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>
</html>

부트스트랩의 캐로우젤(Carousel)은 회전목마처럼 요소들의 순환시키는(cycling) 슬라이드 쇼(Slide show) 이다.
웹페이지 메인에서 자주 쓰이는 슬라이드로 본문 페이지 등에 이미지 슬라이드로 자주 쓰이는 기능이니 익혀두면 좋다.

실습하기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩Carousel</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    .carousel-inner > .carousel-item > img{
      /* width: 640px;
      height: 720px; */
    }
  </style>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script>
    $('.carousel').carousel({
      interval: 2000 //기본 5초
    })
  </script>
<div class="container"><h2>Carousel practice</h2></div>
  <div id="demo" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
      <!-- 슬라이드 쇼 -->
      <div class="carousel-item active">
        <!--가로-->
        <img class="d-block w-100" 
          src="https://images.pexels.com/photos/213399/pexels-photo-213399.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="First slide">
          <div class="carousel-caption d-none d-md-block">
              <h5>TEST</h5>
              <p>testtesttest</p>
        </div>
      </div>
      <div class="carousel-item">
        <img class="d-block w-100"
          src="https://images.pexels.com/photos/2355519/pexels-photo-2355519.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260"
          alt="Second slide">
      </div>
      <div class="carousel-item">
        <img class="d-block w-100"
          src="https://images.pexels.com/photos/2544554/pexels-photo-2544554.jpeg?auto=compress&cs=tinysrgb&h=650&w=940"
          alt="Third slide">
      </div>
    
    <!-- / 슬라이드 쇼 끝 -->

    <!-- 왼쪽 오른쪽 화살표 버튼 -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <!-- <span>Previous</span> -->
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <!-- <span>Next</span> -->
    </a>
    <!-- / 화살표 버튼 끝 -->
    
    <!-- 인디케이터 -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li> <!--0번부터시작-->
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    <!-- 인디케이터 끝 -->
  </div>
  
</body>
</html>

사진과 글, 버튼이 혼합된 프로필 카드 형식

  <div class="card m-3">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div> 
    <div class="card-footer">Footer</div>
  </div>

카드 윗부분 그림 => .card-img-top ( img 태그를 .card-body 보다 위쪽에 위치)
카드 아래부분 그림 => .card-img-bottom ( img 태그를 .card-body 아래쪽 위치)
 .stretched-link => 카드 전체 클릭가능

카드레이아웃

 <div class="card text-white bg-primary m-3" style="max-width: 18rem;">
    <div class="card-header">Header</div>
    <div class="card-body">
            <h5 class="card-title">Primary card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    </div>
</div>  

실습하기

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 카드</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

  <div class="container">
    <div class="row">
      <div class="card m-3" style="width: 350px">
        <img src="img/adult-art-artwork-1081685.jpg" class="card-img-top" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary stretched-link">see profile</a>
          <!-- stretched-link : 사진전체클릭 -->
        </div>
        <!-- <div class="card-footer">Footer</div> -->
      </div>
      <div class="card m-3" style="width: 350px">
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary">see profile</a>
        </div>
        <img src="img/img_avatar1.png" class="card-img-bottom" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
      </div>
      <div class="card m-3" style="width:400px">
        <img class="card-img-top" src="img/adult-art-artwork-1081685.jpg" alt="Card image">
        <div class="card-img-overlay">
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text.</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
</body>

</html>

사진소스 다운로드 페이지 : Pexels

컬러 그리드

코드는?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 카드</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

  <div class="container">
    <div class="row">
      <div class="card m-3" style="width: 350px">
        <img src="img/adult-art-artwork-1081685.jpg" class="card-img-top" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary stretched-link">see profile</a>
          <!-- stretched-link : 사진전체클릭 -->
        </div>
        <!-- <div class="card-footer">Footer</div> -->
      </div>
      <div class="card m-3" style="width: 350px">
        <div class="card-body">
          <h4 class="card-title">programmer</h4>
          <p class="card-text">hello, it is sample. today is 10th July.</p>
          <a href="#" class="btn btn-primary">see profile</a>
        </div>
        <img src="img/img_avatar1.png" class="card-img-bottom" alt="프로그래머">
        <!-- <div class="card-header">Header</div> -->
      </div>
      <div class="card m-3" style="width:400px">
        <img class="card-img-top" src="img/adult-art-artwork-1081685.jpg" alt="Card image">
        <div class="card-img-overlay">
          <h4 class="card-title">John Doe</h4>
          <p class="card-text">Some example text.</p>
          <a href="#" class="btn btn-primary">See Profile</a>
        </div>
      </div>
    </div>
  </div>
      <div class="container-fluid">
        <div class="row justify-content-center">
          <div class="card text-white bg-primary m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Primary card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
          <div class="card text-white bg-success m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Success card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
          <div class="card text-white bg-danger m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Danger card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
          <div class="card text-white bg-warning m-3" style="max-width: 18rem;">
            <div class="card-header">Header</div>
            <div class="card-body">
              <h5 class="card-title">Warning card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            </div>
          </div>
        </div>
      </div>
    
  
</body>

</html>

부트스트랩 Collapse를 이용하여 웹사이트의 탭 기능을 구현해보겠습니다.

클래스 collapse show => 콜랩스 대상 초기값 보여주는 상태
클래스 collapse => 콜랩스 대상 초기값 숨겨둔 상태

* card card-body
* collapse

.collapse('show')
.collapse('hide')
.collapse('toggle')

* ready가 되었다가 클릭이 발생되면 collapse아이템을 보여주거나/보여주지 않게 된다.

 $(document).ready(function () {
     $('#btn1').on('click', function () {
        let collapses = $('div.container').find('.collapse');  //collapse라는 자식을 찾아서 배열을 불러온다.
        collapses.each(function () {
          $(this).collapse('toggle');
        });
     });
});

실습하기

메소드를 소환하는 방식

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 collapse</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
    
<div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
        a링크 href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        버튼 data-target
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life 
        accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, 
        craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 collapse</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
  </style>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script>
  </script>
<div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
        a링크 href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        버튼 data-target
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
</div>
<div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapse1">
        토글 1
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2">
        토글 2
      </button>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1, #collapse2">
        토글 both
      </button>
    </div>
    <div class="collapse" id="collapse1">
      <div class="card card-body">
        11111 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore 
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
    <div class="collapse" id="collapse2">
      <div class="card card-body">
        22222 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus 
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore 
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
</div>
</body>
</html>

제이쿼리 Collapse 방식 코드

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩 collapse</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
  </style>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
  <script>
    $(document).ready(function () {
      console.log("ready!");
      $('#btn1').on('click', function () {
        console.log('clicked')
        let collapses = $('div.container').find('.collapse');
        console.log(collapses);
        collapses.each(function () {
          $(this).collapse('toggle');
        });
      });
    });
  </script>
  <div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample">
        a링크 href
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">
        버튼 data-target
      </button>
    </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim
        keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="container mt-3">
    <h3><code>속성 data-toggle 공통</code></h3>
    <div>
      <a class="btn btn-primary" data-toggle="collapse" href="#collapse1">
        토글 1
      </a>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse2">
        토글 2
      </button>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapse1, #collapse2">
        토글 both
      </button>
      <!-- 자바스크립트 -->
      <button class="btn btn-success" id="btn1">클릭
      </button>
    </div>
    <div class="collapse" id="collapse1">
      <div class="card card-body">
        11111 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
    <div class="collapse" id="collapse2">
      <div class="card card-body">
        22222 Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore
        wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
</body>

</html>

onload 이벤트를 사용할 수 있는 태그들

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

jQuery Onload 문법

$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);

$(window).on('load',function(){
      $('#d-block').hide();
      $('#d-none').show();
      // $().toggle();
});

// 다른 예 사진을 로드한 뒤에 여러개의 사진에 작업 가능
$( "img.userIcon" ).load(function() {
  if ( $( this ).height() > 100) {
    $( this ).addClass( "bigImg" );
  }
});

실습하기

자바스크립트 : onload 이벤트

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

</head>

<!-- onload : 페이지 새로고침 -->
<body onload="myFunction()">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script>
      const dblock = document.getElementById('d-block');
      const dnone = document.getElementById('d-none');

      function myFunction(){
        alert("page is loaded");
        hide(dblock);
        show(dnone);
      }
      let show = function (elem) {
        elem.style.display = 'block';
      };

      // Hide an element
      let hide = function (elem) {
        elem.style.display = 'none';
      };

      // Toggle element display
      let toggle = function (elem) {

        // If the element is visible, hide it
        if (window.getComputedStyle(elem).display === 'block') {
          hide(elem);
          return;
        }

        // Otherwise, show it
        show(elem);

      };  
    
    </script>

    <body onload="myFunction()">

        <h1 id="d-block">디스플레이 블록</h1>
        <h1 id="d-none" style="display: none">디스플레이 none</h1>
    
    <script>
    function myFunction() {
      //alert("Page is loaded");
      document.getElementById('d-block').style.display = 'none';
      document.getElementById('d-none').style.display = 'block';
    }
    </script>

</body>

</html>

제이쿼리 onload 이벤트 : 클래스를 활용해서 사용한 예는 자바스크립트보다 더 빠르다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 복습</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   <style>
     .content{
        display: none;
      }
     .content.is-visible{
        display: block;
      }
   </style>
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <script>
      $(window).on('load',function(){
        alert("!!");
          $('h1:first').removeClass('is-visible');
          $('h1:last').addClass('is-visible');
         // $().toggle();
      });
     </script>

      <h1 class="content is-visible">디스플레이 블록</h1>
      <h1 class="content">디스플레이 none</h1>
 
</body> 

</html>

실습하기

폰트어썸을 이용한 소스 (아이콘) 활용하기

무엇을 이용할까?

폰트어썸 바로가기

사이트 검색창에서 검색한 후 Start Using This Icon을 누르면 소스코드가 나온다. 
i태그는 아이콘을 위해서 많이 쓰인다.

폰트어썸을 이용한 svg 소스 활용

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 폰트어썸 네비</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
   
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
   <script src="../js/all.js"></script>

   <nav class="navbar navbar-expand-md bg-dark navbar-dark p-3">
    <!-- 제목 -->
    <a class="navbar-brand" href="#">
        <span style="font-size:2em; color:coral">
            <i class="fas fa-heart"></i>
        </span>
    </a>
    <!-- Toggler/collapsibe Button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <!-- 리스트 -->
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Link 3</a>
        </li>
        <!-- 드롭다운 메뉴-->
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
            Dropdown
          </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
          </div>
        </li>
      </ul>
      <form class="form-inline ml-auto" action="">
        <input class="form-control mr-sm-2" type="text" placeholder="Search">
        <button class="btn btn-success" type="submit">Search</button>
      </form>
    </div>
  </nav>




</body>

</html>

아이콘 컬러, 동적인 아이콘, 크기조절, 아이콘 겹치기 등 실습

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩-폰트어썸</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- 폰트오썸 파일 링크-->
  <script src="/js/all.js"></script>
</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>

  <!-- 아이콘 삽입 -->
  <span style="font-size: 3em; color: black;">
    <i class="fas fa-camera fa-5x"></i>
  </span>
  <!-- 색상 변환 -->
  <span style="font-size: 3em; color: Tomato;">
    <i class="fas fa-camera"></i>
  </span>
  <span style="font-size: 48px; color: Dodgerblue;">
    <i class="fas fa-camera"></i>
  </span>
  <span style="font-size: 3rem;">
    <span style="color: Mediumslateblue;">
      <i class="fas fa-camera"></i>
    </span>
  </span>
  <!-- 24px을 기준으로 커지는 아이콘. fa-fw 클래스는 여러개의 아이콘들의 너비를 같게 만든다. -->
  <div style="font-size: 24px;">
    <i class="fas fa-camera fa-xs"></i>
    <i class="fas fa-camera fa-sm"></i>
    <i class="fas fa-camera fa-lg"></i>
    <i class="fas fa-camera fa-2x"></i>
    <i class="fas fa-camera fa-3x"></i>
    <i class="fas fa-camera fa-5x"></i>
    <i class="fas fa-camera fa-7x"></i>
    <i class="fas fa-camera fa-10x"></i>
  </div>
  <!-- 회전하는 동적 아이콘. fa-spin => 회전 / fa-pulse => 8번으로 나누어 회전 -->
  <div class="fa-3x">
    <i class="fas fa-spinner fa-spin"></i>
    <i class="fas fa-circle-notch fa-spin"></i>
    <i class="fas fa-sync fa-spin"></i>
    <i class="fas fa-cog fa-spin"></i>
    <i class="fas fa-spinner fa-pulse"></i>
    <i class="fas fa-stroopwafel fa-spin"></i>
  </div>
  <!-- 자주 쓰이는 아이콘 -->
  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fas fa-circle fa-stack-2x"></i>
    <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-4x">
    <i class="fas fa-square fa-stack-2x"></i>
    <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  </span>
  <span class="fa-stack fa-2x">
    <i class="fas fa-camera fa-stack-1x"></i>
    <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
  </span>
  <!-- 아이콘겹치기 : data-fa-transform= "shrink-사이즈" (아이콘 안 데이터만 사이즈를 작게)
data-fa-transform= "grow-사이즈" (아이콘 안 데이터만 사이즈를 크게) -->
  <div class="fa-4x">
    <i class="fas fa-snowman" data-fa-transform="shrink-8" style="background:MistyRose"></i>
    <i class="fas fa-snowman" style="background:MistyRose"></i>
    <i class="fas fa-snowman" data-fa-transform="grow-6" style="background:MistyRose"></i>
  </div>
  <div class="fa-4x">
      <i class="fas fa-snowman" data-fa-transform="shrink-8" style="background:MistyRose"></i>
      <i class="fas fa-snowman" data-fa-transform="shrink-8 up-6" style="background:MistyRose"></i>
      <i class="fas fa-snowman" data-fa-transform="shrink-8 right-6" style="background:MistyRose"></i>
      <i class="fas fa-snowman" data-fa-transform="shrink-8 down-6" style="background:MistyRose"></i>
      <i class="fas fa-snowman" data-fa-transform="shrink-8 left-6" style="background:MistyRose"></i>
    </div>
</body>

</html>

레이아웃 복습 겸 간단한 아이콘

예제 1

row는 css의 flex랑 같다. 그러나 column은 총 12개로 정해져 있어 12개 안에서 분수처럼 공간을 나눌 수 있다.

<!-- 섹션그리드1시작 -->
  <section class="bg-primary py-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col text-center bg-danger">
          <i class="fas fa-home fa-3x text-light"></i>
          <h3 class="text-dark">fa-home</h3>
        </div>
        <div class="col text-center bg-info">
          <i class="fas fa-home fa-3x text-light"></i>
          <h3 class="text-dark">fa-home</h3>
        </div>
        <div class="col text-center bg-warning">
          <i class="fas fa-home fa-3x text-light"></i>
          <h3 class="text-dark">fa-home</h3>
        </div>
        <div class="col text-center bg-success">
          <i class="fas fa-home fa-3x text-light"></i>
          <h3 class="text-dark">fa-home</h3>
        </div>
      </div>
    </div>
  </section>
  <!-- 섹션그리드1끝 -->
  <!-- 섹션그리드2시작 -->
  <section class="bg-success py-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-8 bg-secondary mb-3 text-center">
          <i class="fas fa-star fa-3x"></i>
          <h3 class="text-dark">star</h3>
        </div>
        <div class="col-4 bg-light mb-3 text-center">
          <i class="fas fa-star fa-3x"></i>
          <h3 class="text-dark">star</h3>
        </div>
        <div class="col-3 bg-light mb-3 text-center">
          <i class="fas fa-star fa-3x"></i>
          <h3 class="text-dark">star</h3>
        </div>
        <div class="col-9 bg-secondary mb-3 text-center">
          <i class="fas fa-star fa-3x"></i>
          <h3 class="text-dark">star</h3>
        </div>
      </div>
    </div>
    </div>
  </section>
  <!-- 섹션그리드2끝 -->

부트스트랩에서 구현하는 반응형 화면 사이즈.
저번 시간에 배웠던 col-sm, col-md, col-lg, col-xl의 차이

예제 2

 <!-- 섹션그리드3시작 -->
  <section class="bg-light py-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4">
          <!-- <div class="col-sm4"> -->
          <i class="fab fa-html5 fa-3x text-info"></i>
          <h2 class="text-capitalize text-dark py-3">learn html</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste doloribus aut
            molestias quaerat, architecto error ullam vero atque et vitae!</p>
        </div>
        <div class="col-md-4">
          <i class="fab fa-css3 fa-3x text-info"></i>
          <h2 class="text-capitalize text-dark py-3">learn html</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste doloribus aut
            molestias quaerat, architecto error ullam vero atque et vitae!</p>
        </div>
        <div class="col-md-4">
          <i class="fab fa-js fa-3x text-info"></i>
          <h2 class="text-capitalize text-dark py-3">learn html</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste doloribus aut
            molestias quaerat, architecto error ullam vero atque et vitae!</p>
        </div>
      </div>
    </div>
    </div>
  </section>
  <!-- 섹션그리드3끝 -->
  <!-- 섹션그리드4시작 -->
  <section class="bg-danger py-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
          <i class="fab fa-html5 fa-3x bg-danger text-white"></i>
          <h2 class="text-capitalize text-dark py-3">learn html</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste doloribus aut
            molestias quaerat, architecto error ullam vero atque et vitae!</p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-6">
          <i class="fab fa-css3 fa-3x text-white"></i>
          <h2 class="text-capitalize text-dark py-3">learn html</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste doloribus aut
            molestias quaerat, architecto error ullam vero atque et vitae!</p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <i class="fab fa-js fa-3x text-white"></i>
          <h2 class="text-capitalize text-dark py-3">learn html</h2>
          <p class="text-muted">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iste doloribus aut
            molestias quaerat, architecto error ullam vero atque et vitae!</p>
        </div>
      </div>
    </div>
    </div>
  </section>
  <!-- 섹션그리드4끝 -->

부트스트랩 viewport

width, height 의 % 와 vw, vh 의 차이(viewport)

1. width, height는 현재 요소의 상위 요소가 가지는 너비나 높이의 %
2. viewport 는 항상 화면 사이즈와 관련

w- 25 , 50 , 75, 100 ( 25% , 50%, 75%, 100%)
h- 25 , 50 , 75, 100 

시작에 앞서 간단한 예제와 함께 살펴보자. 
main.css 파일은 이 페이지 공통으로 쓰이는 파일이므로 복붙!

body{
    font-family: 'DM Serif Display', serif;
}
.height{
        /* height: 1000px; */
        min-height: 100vh; /* 최소한의 공간. 모바일 viewport. vh : 100%*/
}

첫 번째 예제

height는 부모사이즈 기준이다. 
아래와 같은 것은 메타태그에 viewport를 쓴 후 div - style="height: 100vh;"를 쓰는 것.

<!DOCTYPE html>
<html lang="en">
    <!-- <html lang="en" style="height: 100%"> -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- 폰트어썸 파일링크 -->
    <script src="/js/all.js"></script>
  <!-- 구글폰트링크 -->
  <link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
  <!-- css링크 -->
  <link rel="stylesheet" href="main.css">
</head>

<body>
    <!-- <body style="height: 100%"> -->
  <div class="bg-danger" style="height: 100%">box1</div> 
  <div class="bg-danger" style="height: 100vh;">box1</div> 
  <!--height는 부모사이즈 기준 100% -->
  <!-- 부트스트랩 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>

두 번째 예제

하나의 파일에 코드를 작성합니다. 컨테이너에 배경색을 주면 기본 마진이 있기 때문에 하얀 부분이 생긴다. 따라서 섹션에 배경색을 준다. ※ 작성할 페이지의 구조 : section - div(container) - div(row) - div(col)

첫 번째 섹션

<!DOCTYPE html>
<html lang="en">
<!-- <html lang="en" style="height: 100%"> -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- 폰트어썸 파일링크 -->
  <script src="/js/all.js"></script>
  <!-- 구글폰트링크 -->
  <link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
  <!-- css링크 -->
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <!-- 헤더 시작 -->
  <header id="header" class="bg-dark">
    <div class="container">
      <div class="row height align-items-center">
        <div class="col">
          <h1 class="text-danger text-uppercase font-italic">
            <strong class="d-block">my first bootstrap</strong>
            <!-- d-block을 넣고 안넣고의 차이에 대해도 알아보자 -->
            <small class="text-light">website</small>
          </h1>
          <p class="text-muted lead py-2 w-75">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Repellendus pariatur iste facilis tempore rem itaque, enim illum nostrum sunt ex nam
            voluptates, sapiente, consequatur cupiditate harum rerum sit? Magni, voluptates.
            Temporibus quos ab iusto beatae soluta laborum sunt, quae obcaecati pariatur delectus libero suscipit,
            nisi assumenda ipsa natus id alias ex, nobis quaerat quasi. Expedita voluptatem similique quasi.
            Maxime et voluptas, voluptatem eveniet aspernatur, consectetur nostrum atque deleniti possimus,
            illo magnam officia ratione obcaecati perspiciatis.</p>
          <a href="#" class="btn btn-outline-primary btn-lg m-2 text-primary">press here</a>
          <a href="#" class="btn btn-outline-success btn-lg m-2 text-success">press here</a>
        </div>
      </div>
    </div>
  </header>
  <!-- 헤더 끝 -->
  <!-- 부트스트랩 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>

두 번째 섹션

body{
    font-family: 'DM Serif Display', serif;
}
.height{
    /* height: 1000px; */
    min-height: 100vh;  최소한의 공간. 모바일 viewport. vh : 100%*/
}
.title-underline {
    width: 600px;
    height: 3px;
    margin: 0 auto;
    /* background: blue !important; */
    /* 우선순위는 부트스트랩이 먼저. important를 쓰면 바뀐다. */
}
#firstId{
    background: blue;
    /* id라도 부트스트랩이 우선순위가 높다. */
}
.height2 {
    min-height: 80vh;
}
.height3 {
    min-height: 50vh;
}

<!DOCTYPE html>
<html lang="en">
<!-- <html lang="en" style="height: 100%"> -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- 폰트어썸 파일링크 -->
  <script src="/js/all.js"></script>
  <!-- 구글폰트링크 -->
  <link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
  <!-- css링크 -->
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <!-- 섹션스킬시작 -->
  <section id="skills" class="py-5 bg-white"></section>
  <div class="container height2">
    <!-- 타이틀시작 -->
    <div class="row">
      <div class="col text-center ">
        <h1 class="display-4 text-uppercase text-dark">
          <strong>skills</strong>
        </h1>
        <div id="firstId" class="title-underline bg-danger"></div>
        <p class="mt-2 text-capitalize text-muted font-italic">Lorem ipsum dolor sit amet.</p>
      </div>
    </div>
    <!-- 타이틀끝 -->
    <!-- 하나의 col -->
    <div class="row height3">
      <div class="col-md-6 col-lg-3 text-center my-4">
        <i class="fab fa-node-js fa-5x text-danger"></i>
        <h3 class="text-uppercase my-3">node.js</h3>
        <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
          Maxime ex hic optio autem architecto libero corporis,
          itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
        <a href="#" class="text-uppercase btn btn-outline-danger w-100">press here</a>
      </div>
      <!-- 하나의 col 끝-->
      <!-- col 2 -->
      <div class="col-md-6 col-lg-3 text-center my-4">
        <i class="fab fa-html5 fa-5x text-danger"></i>
        <h3 class="text-uppercase my-3">HTML</h3>
        <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
        <a href="#" class="text-uppercase btn btn-outline-danger w-75">press here</a>
      </div>
      <!-- col 2 끝-->
      <!-- col 3 -->
      <div class="col-md-6 col-lg-3 text-center my-4">
        <i class="fab fa-css3 fa-5x text-danger"></i>
        <h3 class="text-uppercase my-3">CSS</h3>
        <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
        <a href="#" class="text-uppercase btn btn-outline-danger w-50">press here</a>
      </div>
      <!-- col 3 끝-->
      <!-- col 4 -->
      <div class="col-md-6 col-lg-3 text-center my-4">
        <i class="fab fa-js fa-5x text-danger"></i>
        <h3 class="text-uppercase my-3">JS</h3>
        <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
        <a href="#" class="text-uppercase btn btn-outline-danger w-25 p-1">press here</a>
      </div>
    </div>
  </div>
  <!-- col 4 끝-->
  </div>
  <!-- 섹션스킬끝 -->
  <!-- 부트스트랩 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>

세 번째 섹션

네 번째 섹션

다섯 번째 섹션

여섯, 일곱번 째 섹션

8번 째 섹션

9번 째 섹션 : 부트스트랩 임베디드

구글 맵스에 들어가서 장소 선택 후 공유> 맞춤 크기 선택하면 원하는 크기로 iframe 코드를 퍼올 수 있습니다.
구글 지도와 유튜브 영상의 원리는 비슷하니 같은 iframe 로 긁어와서 코드를 삽입해봅시다.

부트스트랩을 적용할 경우 iframe의 width와 height 태그는 먹히기에 세부 조정을 하고 싶으면 css를 사용해야 할 듯 합니다. 부트스트랩의 크기 비율의 경우 가로가 긴 비율의 직사각형 뿐이 없고 한정적입니다.

 <div class="embed-responsive embed-responsive-4by3">

10번 째 섹션

마지막 섹션입니다. 수고하셨습니다.

<!-- .d-none  .d-md-block -->
<div class="col-md-6 my-4 d-md-block d-none">
   <img src="https://images.pexels.com/photos/
   1328891/pexels-photo-1328891.jpeg?
   auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" 
   class="img-fluid rounded-circle" alt="">
</div>

완성된 웹사이트의 화면 사이즈를 다르게 해서 1)반응형으로 잘 동작하는지 확인, 2)핸드폰으로 본인의 웹서버에 접속하여 반응형 웹사이트가 잘 만들어졌는지 확인합니다.

두 번째 예제의 통합 html파일

<!DOCTYPE html>
<html lang="en">
<!-- <html lang="en" style="height: 100%"> -->

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>부트스트랩</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <!-- 폰트어썸 파일링크 -->
  <script src="/js/all.js"></script>
  <!-- 구글폰트링크 -->
  <link href="https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap" rel="stylesheet">
  <!-- css링크 -->
  <link rel="stylesheet" href="main.css">
</head>

<body>
  <!-- 헤더 시작 -->
  <header id="header" class="bg-dark">
    <div class="container">
      <div class="row height align-items-center">
        <div class="col">
          <h1 class="text-danger text-uppercase font-italic">
            <strong class="d-block">my first bootstrap</strong>
            <!-- d-block을 넣고 안넣고의 차이에 대해도 알아보자 -->
            <small class="text-light">website</small>
          </h1>
          <p class="text-muted lead py-2 w-75">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Repellendus pariatur iste facilis tempore rem itaque, enim illum nostrum sunt ex nam
            voluptates, sapiente, consequatur cupiditate harum rerum sit? Magni, voluptates.
            Temporibus quos ab iusto beatae soluta laborum sunt, quae obcaecati pariatur delectus libero suscipit,
            nisi assumenda ipsa natus id alias ex, nobis quaerat quasi. Expedita voluptatem similique quasi.
            Maxime et voluptas, voluptatem eveniet aspernatur, consectetur nostrum atque deleniti possimus,
            illo magnam officia ratione obcaecati perspiciatis.</p>
          <a href="#" class="btn btn-outline-primary btn-lg m-2 text-primary">press here</a>
          <a href="#" class="btn btn-outline-success btn-lg m-2 text-success">press here</a>
        </div>
      </div>
    </div>
  </header>
  <!-- 헤더 끝 -->
  <!-- 섹션스킬시작 -->
  <section id="skills" class="py-5 bg-white">
    <div class="container height2">
      <!-- 타이틀시작 -->
      <div class="row">
        <div class="col text-center">
          <h1 class="display-4 text-uppercase text-dark">
            <strong>skills</strong>
          </h1>
          <div id="firstId" class="title-underline bg-danger"></div>
          <p class="mt-2 text-capitalize text-muted font-italic">Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <!-- 타이틀끝 -->

      <div class="row height3">
        <!-- 하나의 col -->
        <div class="col-md-6 col-lg-3 text-center my-4">
          <i class="fab fa-node-js fa-5x text-danger"></i>
          <h3 class="text-uppercase my-3">node.js</h3>
          <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
          <a href="#" class="text-uppercase btn btn-outline-danger w-100">press here</a>
        </div>
        <!-- 하나의 col 끝-->
        <!-- col 2 -->
        <div class="col-md-6 col-lg-3 text-center my-4">
          <i class="fab fa-html5 fa-5x text-danger"></i>
          <h3 class="text-uppercase my-3">HTML</h3>
          <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
          <a href="#" class="text-uppercase btn btn-outline-danger w-75">press here</a>
        </div>
        <!-- col 2 끝-->
        <!-- col 3 -->
        <div class="col-md-6 col-lg-3 text-center my-4">
          <i class="fab fa-css3 fa-5x text-danger"></i>
          <h3 class="text-uppercase my-3">CSS</h3>
          <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
          <a href="#" class="text-uppercase btn btn-outline-danger w-50">press here</a>
        </div>
        <!-- col 3 끝-->
        <!-- col 4 -->
        <div class="col-md-6 col-lg-3 text-center my-4">
          <i class="fab fa-js fa-5x text-danger"></i>
          <h3 class="text-uppercase my-3">JS</h3>
          <p class="text-muted lead">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Maxime ex hic optio autem architecto libero corporis,
            itaque ipsam nisi voluptate deleniti beatae ullam quidem.</p>
          <a href="#" class="text-uppercase btn btn-outline-danger w-25 p-1">press here</a>
        </div>
        <!-- col 4 끝-->
      </div>
    </div>

  </section>
  <!-- 섹션스킬끝 -->
  <!-- about 섹션 시작 -->
  <section id="about" class="bg-info">
    <div class="container-fluid">
      <div class="row">
        <!-- 이미지와 텍스트 열 절반으로 MD화면기준 -->
        <!-- 이미지 col  -->
        <div class="col-md-6 about-picture height2"></div>
        <!-- 텍스트 col  -->
        <div class="col-md-6 about-text height2 px-5 d-flex align-items-center justify-content-center">
          <!-- about text center -->
          <div class="wrapper-txt">
            <!-- 타이틀시작 -->
            <div class="row">
              <div class="col text-center ">
                <h1 class="display-4 text-uppercase text-dark">
                  <strong>About</strong>
                </h1>
                <div id="firstId" class="title-underline bg-danger"></div>
                <p class="mt-2 text-capitalize text-muted font-italic">Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
            <!-- 타이틀끝 -->
            <!-- single item 시작 -->
            <div class="checkbox-item d-flex mb-2">
              <i class="fas fa-check fa-3x p-2 bg-warning mr-3 align-items-center"></i>
              <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, earum.</p>
            </div>
            <!-- single item 끝 -->
            <!-- single item 시작 -->
            <div class="checkbox-item d-flex mb-2">
              <i class="fas fa-check fa-3x p-2 bg-warning mr-3 align-items-center"></i>
              <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, earum.</p>
            </div>
            <!-- single item 끝 -->
            <!-- single item 시작 -->
            <div class="checkbox-item d-flex mb-2">
              <i class="fas fa-check fa-3x p-2 bg-warning mr-3 align-items-center"></i>
              <p class="text-light lead">Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, earum.</p>
            </div>
            <!-- single item 끝 -->
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- about 섹션 끝 -->
  <!-- 프로젝트 섹션 시작 -->
  <section id="about" class="">
    <div class="container-fluid px-5">
      <!-- 타이틀시작 -->
      <div class="row">
        <div class="col text-center">
          <h1 class="display-4 text-uppercase text-dark mb-0">
            <strong>projects</strong>
          </h1>
          <div class="title-underline bg-danger"></div>
          <p class="mt-2 text-capitalize text-muted font-italic">Lorem ipsum dolor sit amet.</p>
        </div>
        <!-- 타이틀끝 -->
        <div class="row py-3 no-gutters">
          <div class="col-sm-6 col-md-4 my-3">
            <img
              src="https://images.pexels.com/photos/1350197/pexels-photo-1350197.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded-circle">
          </div>
          <div class="col-sm-6 col-md-4 my-3">
            <img
              src="https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded img-thumbnail bg-success border border-success">
          </div>
          <div class="col-sm-6 col-md-4 mx-auto my-3">
            <img
              src="https://images.pexels.com/photos/1439227/pexels-photo-1439227.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded">
          </div>
          <div class="col-sm-6 col-md-4 mx-auto my-3">
            <img
              src="https://images.pexels.com/photos/449018/pexels-photo-449018.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded">
          </div>
          <div class="col-sm-6 col-md-4 my-3">
            <img
              src="https://images.pexels.com/photos/1350197/pexels-photo-1350197.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded-circle">
          </div>
          <div class="col-sm-6 col-md-4 my-3">
            <img
              src="https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded img-thumbnail bg-success border border-success">
          </div>
          <div class="col-sm-6 col-md-4 mx-auto my-3">
            <img
              src="https://images.pexels.com/photos/1439227/pexels-photo-1439227.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
              alt="" class="img-fluid rounded">
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 프로젝트 섹션 끝 -->
  <!-- 팀 섹션 시작 -->
  <section id="about" class="bg-light p-5">
    <div class="container-fluid px-5">
      <!-- 타이틀시작 -->
      <div class="row">
        <div class="col text-center">
          <h1 class="display-4 text-uppercase text-dark mb-0">
            <strong>Our Team</strong>
          </h1>
          <div class="title-underline bg-success"></div>
          <p class="mt-2 text-capitalize text-muted font-italic">Lorem ipsum dolor sit amet.</p>
        </div>
      </div>
      <!-- 타이틀끝 -->
      <div class="row">
        <div class="col-md-6 col-lg-4 my-3">
          <div class="card">
            <img
              src="https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title text-capitalize">team member</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, nulla.</p>
              <a href="" class="btn btn-outline-warning text-uppercase">press here</a>
            </div>
            <div class="card-footer bg-secondary d-flex justify-content-around">
              <!-- around, center, between -->
              <a href=""><i class="fab fa-facebook fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-twitter fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-youtube fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-google fa-2x text-dark"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 my-3 mx-auto">
          <div class="card">
            <img
              src="https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title text-capitalize">team member</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, nulla.</p>
              <a href="" class="btn btn-outline-warning text-uppercase">press here</a>
            </div>
            <div class="card-footer bg-secondary d-flex justify-content-around">
              <!-- around, center, between -->
              <a href=""><i class="fab fa-facebook fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-twitter fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-youtube fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-google fa-2x text-dark"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 my-3 mx-auto">
          <div class="card">
            <img
              src="https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title text-capitalize">team member</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, nulla.</p>
              <a href="" class="btn btn-outline-warning text-uppercase">press here</a>
            </div>
            <div class="card-footer bg-secondary d-flex justify-content-around">
              <!-- around, center, between -->
              <a href=""><i class="fab fa-facebook fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-twitter fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-youtube fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-google fa-2x text-dark"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 my-3 mx-auto">
          <div class="card">
            <img
              src="https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title text-capitalize">team member</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, nulla.</p>
              <a href="" class="btn btn-outline-warning text-uppercase">press here</a>
            </div>
            <div class="card-footer bg-secondary d-flex justify-content-around">
              <!-- around, center, between -->
              <a href=""><i class="fab fa-facebook fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-twitter fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-youtube fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-google fa-2x text-dark"></i></a>
            </div>
          </div>
        </div>
        <div class="col-md-6 col-lg-4 my-3 mx-auto">
          <div class="card">
            <img
              src="https://images.pexels.com/photos/956999/milky-way-starry-sky-night-sky-star-956999.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
              class="card-img-top" alt="">
            <div class="card-body">
              <h5 class="card-title text-capitalize">team member</h5>
              <p class="card-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odit, nulla.</p>
              <a href="" class="btn btn-outline-warning text-uppercase">press here</a>
            </div>
            <div class="card-footer bg-secondary d-flex justify-content-around">
              <!-- around, center, between -->
              <a href=""><i class="fab fa-facebook fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-twitter fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-youtube fa-2x text-dark"></i></a>
              <a href=""><i class="fab fa-google fa-2x text-dark"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- 팀 섹션 끝 -->
  <!-- 캐로솔 섹션 시작 -->
  <section id="carousel" class="py-5 bg-warning">
    <div class="container">
      <!-- 타이틀 -->
      <div class="row">
        <div class="col text-center">
          <h1 class="display-4 text-uppercase text-dark mb-0">
            <strong>Carousel</strong>
          </h1>
          <div class="title-underline bg-success"></div>
          <p class="mt-2 text-capitalize text-muted font-italic">Let introduce Carousel.</p>
        </div>
      </div>
      <!-- 타이틀 끝-->
      <div class="row">
        <div class="col-md-10 mx-auto text-center">
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <!-- 인디케이터 -->
            <ol class="carousel-indicators">
              <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
              <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            </ol>
            <!-- 슬라이드 이미지-->
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="d-block w-100"
                  src="https://images.pexels.com/photos/813788/pexels-photo-813788.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                  alt="First slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100"
                  src="https://images.pexels.com/photos/89505/pexels-photo-89505.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                  alt="second slide">
              </div>
              <div class="carousel-item">
                <img class="d-block w-100"
                  src="https://images.pexels.com/photos/674733/pexels-photo-674733.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260"
                  alt="third slide">
              </div>
            </div>
            <!-- 왼쪽 오른쪽 화살표 버튼 -->
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    </div>
  </section>
  <!-- 캐로솔 섹션 끝 -->
  <!-- 필터 섹션시작 -->
  <section id="filler" class="p-5">
    <div class="container">
      <div class="row">
        <div class="col-md-6 mx-auto text-center">
          <h1 class="text-danger">my first bootstrap website</h1>
          <p class="lead text-white">Lorem ipsum dolor sit amet consectetur adipisicing elit.
            Excepturi earum quasi officia, facilis nam error ipsam ut quis inventore eum
            dolorem natus illum placeat tempore amet aliquam sint
            exercitationem nulla!</p>
          <a href="#" class="btn btn-primary btn-lg m-2 text-capitalize">press here</a>
        </div>
      </div>
    </div>
  </section>
  <!-- 필터 섹션끝 -->
  <!-- 블로그 섹션 시작 -->
  <section id="blog" class="p-5 bg-success">
    <div class="container">
      <div class="row">
        <div class="col text-center">
          <!-- 타이틀 -->
          <div class="row">
            <div class="col text-center">
              <h1 class="display-4 text-uppercase text-dark mb-0">
                <strong>BLOG</strong>
              </h1>
              <div class="title-underline bg-warning"></div>
              <p class="mt-2 text-capitalize text-light">나의 blog입니다.</p>
            </div>
          </div>
          <!-- 타이틀 끝-->
          <div class="row">
            <div class="col-md-4">
              <img src="img/test1.jpeg" alt="" class="img-fluid img-thumbnail">
              <h2 class="my-3 text-warning">project 1</h2>
              <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, in?</p>
            </div>
            <div class="col-md-4 mt-3">
              <img src="img/test1.jpeg" alt="" class="img-fluid img-thumbnail">
              <h2 class="my-3 text-warning">project 2</h2>
              <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, in?</p>
            </div>
            <div class="col-md-4 mt-5">
              <img src="img/test1.jpeg" alt="" class="img-fluid img-thumbnail">
              <h2 class="my-3 text-warning">project 3</h2>
              <p class="text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, in?</p>
            </div>
          </div>
        </div>
      </div>
  </section>
  <!-- 블로그 섹션 끝 -->
  <!-- 컨텍트 섹션 시작 -->
  <section id="contact" class="py-5 bg-warning">
    <div class="container">
      <!-- 타이틀 -->
      <div class="row">
        <div class="col text-center">
          <h1 class="display-4 text-uppercase text-dark mb-0">
            <strong>CONTACT</strong>
          </h1>
          <div class="title-underline bg-primary"></div>
          <p class="mt-2 text-capitalize text-light">나의 blog입니다.</p>
        </div>
      </div>
      <!-- 타이틀 끝-->
      <div class="row">
        <!-- 로그인 폼 시작 -->
        <div class="col-md-6 my-3">
          <div class="card card-body bg-secondary">
            <!-- 카드 타이틀 시작 -->
            <div class="card-title text-center text-white">
              <h2 class="text-capitalize">처음 오셨나요?</h2>
              <p>로그인 해주세요.</p>
            </div>
            <!-- 카드 타이틀 끝 -->
            <!-- input 폼 시작 -->
            <form action="#">
              <div class="from-group mt-2">
                <input type="text" class="form-control form-control-lg" id="name">
              </div>
              <div class="from-group mt-2">
                <input type="text" class="form-control form-control-lg" id="name" placeholder="email">
              </div>
              <div class="from-group mt-2">
                <input type="text" class="form-control form-control-lg" id="name" placeholder="phone">
              </div>
              <!-- input group -->
              <div class="input-group my-3">
                <div class="input-group-prepend">
                  <span class="input-group-text">아이디</span>
                </div>
                <input type="text" class="form-control" id="group-username">
              </div>
              <!-- 폰트오썸 -->
              <div class="input-group my-3">
                <div class="input-group-prepend">
                  <span class="input-group-text"><i class="fas fa-user"></i></span>
                </div>
                <input type="text" class="form-control" id="group-username-1" placeholder="이름">
                <div class="input-group-append">
                  <button type="button" class="btn btn-primary">로그인</button>
                </div>
              </div>
              <button type="submit" class="btn btn-outline-dark btn-block">가입 하기</button>
            </form>
            <!-- input 폼 끝 -->
          </div>
        </div>
        <!-- 로그인 폼 끝 -->
        <!-- 구글 맵 시작-->
        <div class="col-md-6 my-3">
          <div class="embed-responsive embed-responsive-4by3">
            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3262.0250959302684!2d129.05739041552062!3d35.15599486620434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3568eb6feb39fa0d%3A0x17502eaffb28a5b4!2z67aA7IKwSVTqtZDsnKHshLzthLA!5e0!3m2!1sko!2skr!4v1563325791807!5m2!1sko!2skr"
              width="400" height="600" frameborder="0" style="border:0" allowfullscreen></iframe>
          </div>
        </div>
        <!-- 유튜브 링크시 -->
        <div class="embed-responsive embed-responsive-16by9">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/m0o7fbNKhpM" frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
        <div>
          <a href="https://youtu.be/u3_QjEIyxCQ"></a>
        </div>
        <!-- 구글 맵 끝-->
      </div>
    </div>
  </section>
  <!-- 컨텍트 섹션 끝 -->
  <!-- 리뷰 섹션 시작 -->
  <section id="review" class="py-5 bg-danger">
    <div class="container">
      <!-- 타이틀 -->
      <div class="row">
        <div class="col text-center">
          <h1 class="display-4 text-uppercase text-dark mb-0">
            <strong>review</strong>
          </h1>
          <div class="title-underline bg-success"></div>
          <p class="mt-2 text-white lead">수고하셨습니다.</p>
        </div>
      </div>
      <!-- 타이틀 끝-->
      <div class="row">
        <div class="col-md-6 my-4 d-md-block d-none">
          <img
            src="https://images.pexels.com/photos/1328891/pexels-photo-1328891.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
            class="img-fluid rounded-circle" alt="">
        </div>
        <div class="col-md-6 my-4">
          <blockquote class="blockquote text-right">
            <p>
              <i class="fas fa-quote-left fa-2x mr-3"></i>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum suscipit ullam ab vel similique voluptas
              quod qui animi, rem nostrum?
            </p>
            <footer class="blockquote-footer text-left ml-5">master coder</footer>
          </blockquote>
        </div>
      </div>
    </div>
  </section>
  <!-- 리뷰 섹션 끝 -->

  <!-- 부트스트랩 -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin="anonymous"></script>
</body>

</html>

두 번째 예제의 main.css 파일

body{
    font-family: 'DM Serif Display', serif;
}
.height{
    /* height: 1000px; */
    min-height: 100vh;  
    /* 최소한의 공간. 모바일 viewport. vh : 100% */
}
.title-underline {
    width: 40%;
    height: 4px;
    margin: 0 auto;
    /* background: blue !important; */
    /* 우선순위는 부트스트랩이 먼저. important를 쓰면 바뀐다. */
}
#firstId{
    background: blue;
    /* id라도 부트스트랩이 우선순위가 높다. */
}
.height2 {
    min-height: 80vh;
}
.height3 {
    min-height: 50vh;
}
.about-picture{
    background: url(test.jpeg);
    background-size: cover;
    background-position: center center;
    background-repeat : no-repeat;
    background-attachment: fixed;
}
#filler{
    background: linear-gradient(to bottom, rgba(202,221,252,0.1), rgba(252,202,202,0.1)), 
    url(https://images.pexels.com/photos/19670/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=750&w=1260);
    background-position : center center;
    background-repeat :  no-repeat;
    background-size: cover;
}

http프로토콜은 통신이 유지가 되는 통신 방식이 아니다. 그래서 세션이 필요하다.

세션  :  서버에 저장되는 정보들. 장바구니 등. default는 30분. 메모리상에 만들어지는 객체 덩어리로 클라이언트별로 배정. 사용자가 접속하는 순간 웹서버에 클라이언트별로 세션이 만들어진다. 세션을 구분하는 값은 id. 세션 객체는 생명 주기가 있다. 가장 짧은 경우 은행 (3분 후 자동 로그아웃 등)

쿠키  :  개인 (클라이언트) PC에 저장된 정보들. 단점은 정보가 노출될 수 있다.

실습하기

session1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"/>
</head>
  <body>
<h1>Session Example1</h1>
<FORM METHOD="POST" ACTION="session2.jsp">
    1.가장 좋아하는 계절은?<br>
	<INPUT TYPE="radio" NAME="season" VALUE="봄">봄
	<INPUT TYPE="radio" NAME="season" VALUE="여름">여름
	<INPUT TYPE="radio" NAME="season" VALUE="가을">가을
	<INPUT TYPE="radio" NAME="season" VALUE="겨울">겨울<p>

	2.가장 좋아하는 과일은?<br>
	<INPUT TYPE="radio" NAME="fruit" VALUE="watermelon">수박
	<INPUT TYPE="radio" NAME="fruit" VALUE="melon">멜론
	<INPUT TYPE="radio" NAME="fruit" VALUE="apple">사과
	<INPUT TYPE="radio" NAME="fruit" VALUE="orange">오렌지<p>
	<INPUT TYPE="submit" VALUE="결과보기">
</FORM>
  </body>
</html>

session1.jsp

<%@page contentType="text/html; charset=EUC-KR" %>

<%
	request.setCharacterEncoding("EUC-KR");
	String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
	
	//DB연동 가정
	boolean result= true;
	if(result) {
		session.setAttribute("idKey", id);  //저장 (String,받은값)
		session.setMaxInactiveInterval(60*3); //3분 
	}
	String sessionId = session.getId();
%>

session ID : <%=sessionId%>

session2.jsp

<%@page contentType="text/html; charset=EUC-KR" %>

<%
	request.setCharacterEncoding("EUC-KR");
	String season = request.getParameter("season");
	String fruit = request.getParameter("fruit");
	//세션에 id를 가져온다.
	String id = (String)session.getAttribute("idKey");
	String sessionId = session.getId();
	int intervalTime = session.getMaxInactiveInterval();
	if(id!=null) {
%>		
	<%=id%>님이 좋아하는 계절과 과일은 
	<%=season + "/" + fruit%><br/>
	세션ID : <%=sessionId%><br/>
	세션유지시간: <%=intervalTime%> <br/>
	
<%	}else {
		out.print("세션의 시간이 경과를 하였거나 다른 이유로 연결을 할수 없습니다. ");
	}
%>

JSP를 이용한 MVC 패턴을 이용하여 만든다. 
(프레임워크는 MVC2) MVC 패턴의 장점은 확장성이다.
M : Beans + V : Jsp Viewer + C : Mgr control

실습에서는 poolean 기법  / connection 객체를 사용한다.

* beans : 하나의 레코드 (테이블의 행 단위) 를 담는 단위. JSP Page 상에 나열되는 자바 처리 로직은 디자인 코드와 함께 매우 복잡한 코드를 구성함으로 인해 디자인 변경시 자바코드가 영향을 받아 오류가 자주 발생되며, 코드 수정시 코드를 알아볼 수 없어 유지보수가 매우 힘이 든다. 반복되는 자바 코드들을 JAVA 파일안에 저장하여 사용하는 형태로 Beans는 sun에서 제시한 작성 규칙이 존재

* mgr :  Manager Class(관리 클래스)

'다이나믹 웹 프로젝트'로 프로젝트를 생성하고, DB와 연동한다. 
클래스명은 대문자여야 프레임워크 들어갔을 때 에러가 없다.

입력

teamInsert.html

내장 익스플로러는 자바스크립트 오류를 디버깅하기 힘들다. 크롬으로 열기를 권장. 

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Team Mgr</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
	function check() {
		f = document.frm;
		if(f.name.value.length==0){
			alert("이름을 입력하세요.");
			f.name.focus();
			return;
		}
		if(f.city.value.length==0){
			alert("사는곳을 입력하세요.");
			f.city.focus();
			return;
		}
		if(f.age.value.length==0){
			alert("나이를 입력하세요.");
			f.age.focus();
			return;
		}
		if(f.team.value.length==0){
			alert("팀명을 입력하세요.");
			f.team.focus();
			return;
		}
		f.submit();
	}
	
	function check2() {
		f = document.frm;
		f.action="teamInsertProc2.jsp";
		f.submit();
	}
</script>
</head>
<body>
<div align="center">
<h1>Team Insert</h1>
<form name="frm" method="post" action="teamInsertProc.jsp"> 
<!-- <form name="frm" method="get" action="teamInsertProc.jsp"> -->
<table border="1">
<tr>
	<td width="50" align="center">이름</td>
	<td width="150"><input name="name" value="홍길동"></td>  
	<!-- input default는 text . bean의 property 이름과 같아야한다. -->
	<!-- 테이블컬럼명, 빈즈의 프로퍼티 명, 폼의 이름은 반드시 일치해야한다. --> 
</tr>
<tr>
	<td align="center">사는곳</td>
	<td><input name="city" value="부산"></td>
</tr>
<tr>
	<td align="center">나이</td>
	<td ><input name="age" value="27"></td>
</tr>
<tr>
	<td align="center">팀명</td>
	<td><input name="team" value="산적"></td>
</tr>
<tr>
	<td align="center" colspan="2">
		<input type="button" value="SAVE" onclick="check()">
		<input type="button" value="SAVE2" onclick="check2()">
	</td>
</tr>
</table><p/>
<a href="teamList.jsp">LIST</a>
<a href="teamSelect.jsp">SELECT</a>
<a href="teamDelete.jsp">DELETE</a>
</form>
</div>
</body>
</html>

table.sql

create table tblTeam(
num int primary key AUTO_INCREMENT, 
name char(10) not null,
city char(10) not null,
age int DEFAULT 0,
team char(10) not null
);

TeamBean.java

package ch07;

public class TeamBean {
	
	private int num;
	private String name;
	private String city;
	private int age;
	private String team;
	
	public int getNum() {
		return num;
	}
	public void setNum(int num) {
		this.num = num;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getCity() {
		return city;
	}
	public void setCity(String city) {
		this.city = city;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getTeam() {
		return team;
	}
	public void setTeam(String team) {
		this.team = team;
	}
}

server > server.xml 에서 port를 80으로 바꿔주고 URIEncoding 부분 언어 설정해준다.

DBConnectionMgr.java

package ch07;

/**
 * Copyright(c) 2001 iSavvix Corporation (http://www.isavvix.com/)
 *
 *                        All rights reserved
 *
 * Permission to use, copy, modify and distribute this material for
 * any purpose and without fee is hereby granted, provided that the
 * above copyright notice and this permission notice appear in all
 * copies, and that the name of iSavvix Corporation not be used in
 * advertising or publicity pertaining to this material without the
 * specific, prior written permission of an authorized representative of
 * iSavvix Corporation.
 *
 * ISAVVIX CORPORATION MAKES NO REPRESENTATIONS AND EXTENDS NO WARRANTIES,
 * EXPRESS OR IMPLIED, WITH RESPECT TO THE SOFTWARE, INCLUDING, BUT
 * NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
 * FITNESS FOR ANY PARTICULAR PURPOSE, AND THE WARRANTY AGAINST
 * INFRINGEMENT OF PATENTS OR OTHER INTELLECTUAL PROPERTY RIGHTS.  THE
 * SOFTWARE IS PROVIDED "AS IS", AND IN NO EVENT SHALL ISAVVIX CORPORATION OR
 * ANY OF ITS AFFILIATES BE LIABLE FOR ANY DAMAGES, INCLUDING ANY
 * LOST PROFITS OR OTHER INCIDENTAL OR CONSEQUENTIAL DAMAGES RELATING
 * TO THE SOFTWARE.
 *
 */


import java.sql.*;
import java.util.Properties;
import java.util.Vector;


/**
 * Manages a java.sql.Connection pool.
 *
 * @author  Anil Hemrajani
 */
public class DBConnectionMgr {
    private Vector connections = new Vector(10);
    private String _driver = "org.gjt.mm.mysql.Driver",
    _url = "jdbc:mysql://127.0.0.1:3306/mydb?useUnicode=true&characterEncoding=EUC_KR",
    _user = "root",
    _password = "1234";
    
    private boolean _traceOn = false;
    private boolean initialized = false;
    private int _openConnections = 50;
    private static DBConnectionMgr instance = null;

    public DBConnectionMgr() {
    }

    /** Use this method to set the maximum number of open connections before
     unused connections are closed.
     */

    public static DBConnectionMgr getInstance() {
        if (instance == null) {
            synchronized (DBConnectionMgr.class) {
                if (instance == null) {
                    instance = new DBConnectionMgr();
                }
            }
        }

        return instance;
    }

    public void setOpenConnectionCount(int count) {
        _openConnections = count;
    }


    public void setEnableTrace(boolean enable) {
        _traceOn = enable;
    }


    /** Returns a Vector of java.sql.Connection objects */
    public Vector getConnectionList() {
        return connections;
    }


    /** Opens specified "count" of connections and adds them to the existing pool */
    public synchronized void setInitOpenConnections(int count)
            throws SQLException {
        Connection c = null;
        ConnectionObject co = null;

        for (int i = 0; i < count; i++) {
            c = createConnection();
            co = new ConnectionObject(c, false);

            connections.addElement(co);
            trace("ConnectionPoolManager: Adding new DB connection to pool (" + connections.size() + ")");
        }
    }


    /** Returns a count of open connections */
    public int getConnectionCount() {
        return connections.size();
    }


    /** Returns an unused existing or new connection.  */
    public synchronized Connection getConnection()
            throws Exception {
        if (!initialized) {
            Class c = Class.forName(_driver);
            DriverManager.registerDriver((Driver) c.newInstance());

            initialized = true;
        }


        Connection c = null;
        ConnectionObject co = null;
        boolean badConnection = false;


        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);

            // If connection is not in use, test to ensure it's still valid!
            if (!co.inUse) {
                try {
                    badConnection = co.connection.isClosed();
                    if (!badConnection)
                        badConnection = (co.connection.getWarnings() != null);
                } catch (Exception e) {
                    badConnection = true;
                    e.printStackTrace();
                }

                // Connection is bad, remove from pool
                if (badConnection) {
                    connections.removeElementAt(i);
                    trace("ConnectionPoolManager: Remove disconnected DB connection #" + i);
                    continue;
                }

                c = co.connection;
                co.inUse = true;

                trace("ConnectionPoolManager: Using existing DB connection #" + (i + 1));
                break;
            }
        }

        if (c == null) {
            c = createConnection();
            co = new ConnectionObject(c, true);
            connections.addElement(co);

            trace("ConnectionPoolManager: Creating new DB connection #" + connections.size());
        }

        return c;
    }


    /** Marks a flag in the ConnectionObject to indicate this connection is no longer in use */
    public synchronized void freeConnection(Connection c) {
        if (c == null)
            return;

        ConnectionObject co = null;

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if (c == co.connection) {
                co.inUse = false;
                break;
            }
        }

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if ((i + 1) > _openConnections && !co.inUse)
                removeConnection(co.connection);
        }
    }

    public void freeConnection(Connection c, PreparedStatement p, ResultSet r) {
        try {
            if (r != null) r.close();
            if (p != null) p.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public void freeConnection(Connection c, Statement s, ResultSet r) {
        try {
            if (r != null) r.close();
            if (s != null) s.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public void freeConnection(Connection c, PreparedStatement p) {
        try {
            if (p != null) p.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    public void freeConnection(Connection c, Statement s) {
        try {
            if (s != null) s.close();
            freeConnection(c);
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }


    /** Marks a flag in the ConnectionObject to indicate this connection is no longer in use */
    public synchronized void removeConnection(Connection c) {
        if (c == null)
            return;

        ConnectionObject co = null;
        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if (c == co.connection) {
                try {
                    c.close();
                    connections.removeElementAt(i);
                    trace("Removed " + c.toString());
                } catch (Exception e) {
                    e.printStackTrace();
                }

                break;
            }
        }
    }


    private Connection createConnection()
            throws SQLException {
        Connection con = null;

        try {
            if (_user == null)
                _user = "";
            if (_password == null)
                _password = "";

            Properties props = new Properties();
            props.put("user", _user);
            props.put("password", _password);

            con = DriverManager.getConnection(_url, props);
        } catch (Throwable t) {
            throw new SQLException(t.getMessage());
        }

        return con;
    }


    /** Closes all connections and clears out the connection pool */
    public void releaseFreeConnections() {
        trace("ConnectionPoolManager.releaseFreeConnections()");

        Connection c = null;
        ConnectionObject co = null;

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            if (!co.inUse)
                removeConnection(co.connection);
        }
    }


    /** Closes all connections and clears out the connection pool */
    public void finalize() {
        trace("ConnectionPoolManager.finalize()");

        Connection c = null;
        ConnectionObject co = null;

        for (int i = 0; i < connections.size(); i++) {
            co = (ConnectionObject) connections.elementAt(i);
            try {
                co.connection.close();
            } catch (Exception e) {
                e.printStackTrace();
            }

            co = null;
        }

        connections.removeAllElements();
    }


    private void trace(String s) {
        if (_traceOn)
            System.err.println(s);
    }

}


class ConnectionObject {
    public java.sql.Connection connection = null;
    public boolean inUse = false;

    public ConnectionObject(Connection c, boolean useFlag) {
        connection = c;
        inUse = useFlag;
    }
}

TeamMgr.java

package ch07;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Vector;

//DB연동 SQL문 메소드
public class TeamMgr {

	private DBConnectionMgr pool;

	public TeamMgr() {
		try {
			pool = DBConnectionMgr.getInstance();
//			//System.out.println("성공");
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	// Insert - getXxx, setXxx, isXxx,
	public boolean insertTeam(TeamBean bean) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		boolean flag = false;

		try {
			con = pool.getConnection(); // pool에서 Connection 빌려옴
			sql = "insert tblTeam(name, city, age, team) values (?,?,?,?)";
			// statement 상태로 던져주어야 함. 업그레이드 ver이 preparedstatement ????임
			pstmt = con.prepareStatement(sql);
			// ? 값 받아옴
			pstmt.setString(1, bean.getName());
			pstmt.setString(2, bean.getCity());
			pstmt.setInt(3, bean.getAge());
			pstmt.setString(4, bean.getTeam());

			if (pstmt.executeUpdate() == 1) // int 개수가 1이면 정상저장되었다. 값을 넘길 때.
				flag = true;

		} catch (Exception e) {
			e.printStackTrace(); // 오류 경로
		} finally {
			pool.freeConnection(con, pstmt); // con : 반납, pstmt : close
		}
		return flag;
	}

	// List-java1.8(8.0) -> java 11
	public Vector<TeamBean> listTeam() throws SQLException {
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		Vector<TeamBean> vlist = new Vector<TeamBean>();

		try {
			con = pool.getConnection();
			sql = "select * from tblTeam";
			pstmt = con.prepareStatement(sql);
			rs = pstmt.executeQuery();
			// select~로 테이블의 데이터 가져옴. 커서가 제일 윗 칼럼에서 머무르는 상태

			while (rs.next()/* 결과값이 있는 레코드는 true.다음줄로 가는... */) {
				TeamBean bean = new TeamBean();
				// int num = rs.getInt("num"); //매개변수 num
				// bean.setNum(num);
				// string 만 덮어쓰기 됨.
				bean.setNum(rs.getInt("num"));
				bean.setName(rs.getString("name"));
				bean.setCity(rs.getString("city"));
				bean.setAge(rs.getInt("age"));
				bean.setTeam(rs.getString("team"));
				vlist.addElement(bean);
				// add : boolean. addElement :...
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs); // con : 반납, pstmt : close
		}
		return vlist;
	}

	// Get
	public TeamBean getSelect(int num) {
		Connection con = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		String sql = null;
		
		TeamBean bean = new TeamBean();
		
		try {
			con = pool.getConnection();
			sql = "select * from tblTeam where num=?";  //pk 값
			pstmt = con.prepareStatement(sql);
			pstmt.setInt(1, num);
			rs = pstmt.executeQuery();
			
			if(rs.next()) {
				bean.setNum(rs.getInt("num"));
				bean.setName(rs.getString("name"));
				bean.setCity(rs.getString("city"));
				bean.setAge(rs.getInt("age"));
				bean.setTeam(rs.getString("team"));
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt, rs);
		}
		return bean;
	}
	
	// Update
	public boolean updateTeam(TeamBean bean) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		boolean flag = false;
		try {
			con = pool.getConnection();
			sql = "update tblTeam set name=?, city=?, age=?, team=? where num=? ";
			pstmt = con.prepareStatement(sql);
			pstmt.setString(1, bean.getName());
			pstmt.setString(2, bean.getCity());
			pstmt.setInt(3, bean.getAge());
			pstmt.setString(4, bean.getTeam());
			pstmt.setInt(5, bean.getNum());			
			int cnt = pstmt.executeUpdate();
			if(cnt==1) {
				flag = true;
			}
			
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}
		return flag;
	}
	
	// Delete
	public void deleteTeam(int num) {
		Connection con = null;
		PreparedStatement pstmt = null;
		String sql = null;
		
		try {
			con = pool.getConnection();
			sql = "delete from tblTeam where num=?";
			pstmt = con.prepareStatement(sql);
			pstmt.setInt(1, num);
			pstmt.executeUpdate();
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			pool.freeConnection(con, pstmt);
		}
		return;
	}

//	public static void main(String[] args) {
//		new TeamMgr();
//	system.out.println의 성공 확인 후 메인 부분은 주석
//	}

}

teamInsertProc.jsp

<%@page import="ch07.TeamBean" %>  
<%@page import="ch07.TeamMgr"%>
<%@page contentType="text/html; charset=EUC-KR" %>
<%
//ctrl + space	
	request.setCharacterEncoding("EUC-KR"); //post방식 한글처리
	//ctrl + alt + 방향키 : 복사됨 그러나 ctrl + c 저장과 별개
	String name= request.getParameter("name"); //String aaa도 가능. 뒤에만 같아야함
	String city = request.getParameter("city");
	int age = Integer.parseInt(request.getParameter("age"));
	String team = request.getParameter("team");
	
	//요청한 값을 DB에 저장하기 위한 타입 TeamBean 객체를 먼저 생성시킨 후 
	TeamBean bean = new TeamBean();
	bean.setName(name);
	bean.setCity(city);
	bean.setAge(age);
	bean.setTeam(team);
	
	//DB저장
	TeamMgr mgr= new TeamMgr();
	boolean result = mgr.insertTeam(bean);
	String msg = "가입실패";
	String location = "teamInsert.html";
	
	if (result) {
		msg = "가입성공";
		location = "teamList.jsp";
	}
%>
<%-- <%=result%> --%>
<script>
	alert("<%=msg%>");
	location.href = "<%=location%>";
</script>

teamInsertProc2.jsp

<%@page contentType="text/html; charset=EUC-KR"%>
<% request.setCharacterEncoding("EUC-KR"); %>

<jsp:useBean id="mgr" class="ch07.TeamMgr" />
<%-- <% TeamMgr mgr = new TeamMgr() %> 7줄과 같다 --%>
<!-- 1.객체생성    2.scope:데이터를 공유하기 위해서 저장하는데 스코프에 담는 기능이 유즈빈에 있다. 3. 레퍼런스 변수.mgr-->
<jsp:useBean id="bean" class="ch07.TeamBean" />
 <jsp:setProperty property="*" name="bean"/>

<%
	boolean result = mgr.insertTeam(bean);

String msg = "가입실패";
String location = "teamInsert.html";

if (result) {
	msg = "가입성공";
	location = "teamList.jsp";
}

%>
 
<%--
<% 
	String name = request.getParameter("name");
	bean.setName(name);
%>
<jsp:setProperty property="age" name="bean"/>

<% 
	int age = Integer.parseInt(request.getParameter("age"));
	bean.setAge(age);
%> --%>

<script>
	alert("<%=msg%>");
	location.href = "<%=location%>";
</script>

server.xml 아래 부분 workDir 부분을 추가해준다. 

<Context docBase="myapp" path="/myapp" workDir="C:\Jsp\myapp\work" reloadable="true" source="org.eclipse.jst.jee.server:myapp"/></Host>

teamInsert.html 실행 후 Project Explorer 목록을 새로고침 해 준다.

목록

teamList.jsp

<%@page import="java.util.Vector"%>
<%@page import="ch07.TeamBean"%>
<%@page contentType="text/html; charset=EUC-KR" %>
<jsp:useBean id="mgr" class="ch07.TeamMgr" />
<%
	request.setCharacterEncoding("EUC-KR");
	//반드시 배열 및 Vector 밑에는 for가 있다.
	Vector<TeamBean> vlist=mgr.listTeam();
%>

<body>
<div align="center"><p/>
<h1>Team List</h1>
<table border="1">
	<tr>
		<th>번호</th>
		<th>이름</th>
		<th>사는곳</th>
		<th>나이</th>
		<th>팀명</th>
	</tr>
	<%
		for(int i=0; i<vlist.size(); i++)
		{
			TeamBean bean = vlist.get(i);
			int num = bean.getNum();
	
	%>
	<tr align = "center">
	<td><a href="teamSelect.jsp?num=<%=num%>"><%=i+1%></a></td>
	<td><%=bean.getName()%></td>
	<td><%=bean.getCity()%></td>
	<td><%=bean.getAge()%></td>
	<td><%=bean.getTeam()%></td>
	</tr>
	<%
	//for
		}
	%>
	</table><p/>
	<a href="teamInsert.html">INSERT</a>
	</div>	
</body>

teamSelect.jsp

<%@page import="ch07.TeamBean"%>
<%@page contentType="text/html; charset=EUC-KR" %>
<jsp:useBean id="mgr" class="ch07.TeamMgr" />

<%
	request.setCharacterEncoding("EUC-KR");
	int num=0;
	if(request.getParameter("num")!=null){
		num= Integer.parseInt(request.getParameter("num"));
	}else{
		response.sendRedirect("teamList.jsp");
	}
	TeamBean bean = mgr.getSelect(num);
	//방금 읽어온 회원정보를 세션에 저장
	session.setAttribute("bean", bean);
%>
<body>
<div align="center">
<h1>Team Select</h1>
<table border="1">
	<tr>
		<td width="50">번호</td>
		<td width="100"><%=bean.getNum()%></td>
	</tr>
	<tr>
		<td>이름</td>
		<td><%=bean.getName()%></td>
	</tr>
	<tr>
		<td>사는곳</td>
		<td><%=bean.getCity()%></td>
	</tr>
	<tr>
		<td>나이</td>
		<td><%=bean.getAge()%></td>
	</tr>
	<tr>
		<td>팀명</td>
		<td><%=bean.getTeam()%></td>
	</tr>
</table><p/>
<a href="teamList.jsp">LIST</a>&nbsp;&nbsp;
<a href="teamInsert.html">INSERT</a>&nbsp;&nbsp;
<a href="teamDelete.jsp?num=<%=num%>">DELETE</a>&nbsp;&nbsp;
<a href="teamUpdate.jsp?num=<%=num%>">UPDATE</a>&nbsp;&nbsp;
<a href="teamUpdate2.jsp">UPDATE2</a>&nbsp;&nbsp;
</div>
</body>

teamUpdate.jsp

<%@page import="ch07.TeamBean"%>
<%@page contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<jsp:useBean id="mgr" class="ch07.TeamMgr" />

<%
	request.setCharacterEncoding("EUC-KR");
	int num=0;
	TeamBean bean = null;
	if(request.getParameter("num")==null){
		response.sendRedirect("teamList.jsp");
	}else { 
		num = Integer.parseInt(request.getParameter("num"));
		bean = mgr.getSelect(num);
	
%>

<body>
<div align="center">
<h1>Team Update</h1>
<form method="post" action="teamUpdateProc.jsp">
<table border="1">
<tr>
	<td width="50" align="center">번호</td>
	<td width="150">
		<input name="num" readonly value="<%=bean.getNum()%>">
	</td>
</tr>
<tr>
	<td  align="center">이름</td>
	<td>
		<input name="name" value="<%=bean.getName()%>">
	</td>
</tr>
<tr>
	<td align="center">사는곳</td>
	<td>
		<input name="city" value="<%=bean.getCity()%>">
	</td>
</tr>
<tr>
	<td align="center">나이</td>
	<td >
		<input name="age" value="<%=bean.getAge()%>">
	</td>
</tr>
<tr>
	<td align="center">팀명</td>
	<td>
		<input name="team" value="<%=bean.getTeam()%>">
	</td>
</tr>	
<tr>
	<td colspan="2" align="center">
		<input type="submit" value="UPDATE">
	</td>
</tr>
</table><p/>
</form>
<a href="teamSelect.jsp?num=<%=num%>">SELECT</a>
</div>
<% } %>
</body>

teamUpdateProc.jsp

<%@page contentType="text/html; charset=EUC-KR"%>
<%
	request.setCharacterEncoding("EUC-KR");
%>

<jsp:useBean id="mgr" class="ch07.TeamMgr" />
<%-- <% TeamMgr mgr = new TeamMgr() %> 7줄과 같다 --%>
<!-- 1.객체생성    2.scope:데이터를 공유하기 위해서 저장하는데 스코프에 담는 기능이 유즈빈에 있다. 3. 레퍼런스 변수.mgr-->
<jsp:useBean id="bean" class="ch07.TeamBean" />
<jsp:setProperty property="*" name="bean" />

<%
	boolean result = mgr.updateTeam(bean);

	String msg = "수정실패";
	String location = "teamList.jsp";

	if (result) {
		msg = "수정성공";
		location = "teamSelect.jsp?num=" + bean.getNum();
	}
%>

<script>
	alert("<%=msg%>");
	location.href = "<%=location%>";
</script>

teamUpdate2.jsp

<%@page import="ch07.TeamBean"%>
<%@page contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!-- 기능 두개. 세션에 bean이라는 이름으로 객체를 생성.그러나 이미 있다면 그걸 가져옴 -->
<!--스코프의 범위는 총 4개 : page(같은페이지)<request(요청한페이지까지)<session(모든페이지)<app(서버삭제전까지유지)  저장공간-->
<jsp:useBean id="bean" scope="session" class="ch07.TeamBean" />
<%
	TeamBean bean1 = (TeamBean)session.getAttribute("bean"); //똑같은거지만 기능하나
%>
<body>
<div align="center">
<h1>Team Update2</h1>
<form method="post" action="teamUpdateProc.jsp">
<table border="1">
<tr>
	<td width="50" align="center">번호</td>
	<td width="150">
		<input name="num" readonly value="<%=bean.getNum()%>">
	</td>
</tr>
<tr>
	<td  align="center">이름</td>
	<td>
		<input name="name" value="<%=bean.getName()%>">
	</td>
</tr>
<tr>
	<td align="center">사는곳</td>
	<td>
		<input name="city" value="<%=bean.getCity()%>">
	</td>
</tr>
<tr>
	<td align="center">나이</td>
	<td >
		<input name="age" value="<%=bean.getAge()%>">
	</td>
</tr>
<tr>
	<td align="center">팀명</td>
	<td>
		<input name="team" value="<%=bean.getTeam()%>">
	</td>
</tr>	
<tr>
	<td colspan="2" align="center">
		<input type="submit" value="UPDATE">
	</td>
</tr>
</table><p/>
</form>
<a href="teamSelect.jsp?num=<%=bean.getNum()%>">SELECT</a>
</div>
</body>

DB 엔진 랭킹

오라클을 설치해 둔 경우 서비스를 사용 안함 / 수동 상태로 변경해주자. 메모리를 많이 잡아먹기 때문.
작업관리자 > Listener , ServiceXE를 변경하자. 다시시작 때에도 자동 시작이 안되려면 속성에 들어가서 설정해주면 된다. 

mysql 설치

시작 > MySQL 5.7 Command Line Client - Unicode 에 들어간다

HeidiSQL_9.5 Setup

외부 환경 파일 : WEB-INF > lib 에 들어간다
mysql-connector-java-5.1..... .jar

HeidiSQL 프로그램에서 테이블을 하나 생성해본다.

코드

button, navbar, jumbotron

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 flex</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <nav class="navbar navbar-expand-md bg-dark navbar-dark p-3">
        <!-- 제목 -->
        <a class="navbar-brand" href="#">Navbar</a>

        <!-- Toggler/collapsibe Button -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <!-- 리스트 -->
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Link 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled" href="#">Link 3</a>
                </li>
                <!-- 드롭다운 메뉴-->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">
                        Dropdown
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Link 1</a>
                        <a class="dropdown-item" href="#">Link 2</a>
                        <a class="dropdown-item" href="#">Link 3</a>
                    </div>
                </li>
            </ul>
            <form class="form-inline ml-auto" action="">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-success" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <main>
        <div class="jumbotron">
            <div class="container">
                <h1 class="display-3">Hello, world!</h1>
                <p>This is a template for a simple marketing or informational website. It includes a large callout
                    called a jumbotron and three supporting pieces of content. Use it as a starting point to create
                    something more unique.</p>
                <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more »</a></p>
            </div>
        </div>
        <div class="container">
            <!-- Example row of columns -->
            <div class="row">
                <div class="col-md-4">
                    <h2>Heading</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
                        magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
                </div>
                <div class="col-md-4">
                    <h2>Heading</h2>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
                        mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada
                        magna mollis euismod. Donec sed odio dui. </p>
                    <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
                </div>
                <div class="col-md-4">
                    <h2>Heading</h2>
                    <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id
                        ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                        condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                    <p><a class="btn btn-secondary" href="#" role="button">View details »</a></p>
                </div>
            </div>
            <hr>
        </div>
    </main>
    <footer class="container">
        <p>&copy; Company 2019-2021</p>
    </footer>
</body>

</html>