jamk-diary 님의 블로그

[260708] Ajax를 통해 로그인 페이지 만들기

jamk-diary — Thu, 9 Jul 2026 09:38:56 +0900

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

아이디: <input type="text" id="id" /><br/>
비밀번호: <input type="number" id="ps" /><br/>
<button type="button" onclick="loginCheck()">로그인 요청</button>

<hr>
<h3 id="result"></h3>

<script type="text/javascript">
//버튼 누르면 함수 기능 시작 
function loginCheck() {
	//값 가져옴 
    let idValue = document.getElementById("id").value;
    let psValue = document.getElementById("ps").value;

    $.ajax({ // 새로고침 안 됨 현상태에서 바로 변화하기 위해 일단 $.ajax로 비동기 데이터 통신 시작  
        url: "LoginCheckServlet", //서블릿.자바 파일 주소 설정부터 하기 
        type: "get",           //get,post 둘 중 하나 선택 하기 
        data: { "id": idValue, "ps": psValue }, //데이터 정의하는 과정 json형식 : JSon 형식으로 저장할 데이터를 한줄 형식으로 만듬 
        success: function(data) {  //내장함수 석세스시작(기능 :성공할때만 실행) : 함수 기능 제공 (대신 data라는 박스에 담아서 기능 실현)
           
        
        	 //자바 스크립트 사용해서 길게 안 쓰고 싶음 그래서 제이쿼리 호출해서 제이쿼리 문법으로 쓸거임 
            $("#result").html("상태: " + data.status + " / 등급: " + data.grade);
        //통신 성공하면 제이쿼리에서(아이디 리절트인애 불러옴). 불러온 거 html에 (이 문장 형식으로 만들어서 담아야지)
        },
        //통신 실패하면 에러 써야지 뭐
        error: function() {
            alert("통신 실패");
        }
    });
}
</script>
</body>
</html>

java

package Sam;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/LoginCheckServlet") //현재 파일의 주소 설정 완료 : 웹페이지 만든 파일에서 url 얘로 설정해서 이제 여기로 넘어왔음 
public class LoginCheckServlet extends HttpServlet {
    private static final long serialVersionUID = 1L; //버전 표시용 자동 작성된  식별번호니까 걍 무시
//do get 여긴 소스 기능 사용해서 자동 작성 되었고 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8"); //한글 출력 설청
        response.setContentType("application/json;charset=UTF-8");

        String id = request.getParameter("id");
        String ps = request.getParameter("ps");

        // 여기서 원래는 DB 검사를 하지만 지금은 성공했다고 가정
        PrintWriter out = response.getWriter(); //출력할 빨대 이름  out 이라고 설정해서 사용할게 = 결과 담아서 보낼 응답 준비 완료 . 글쓰기 도구 꺼내서 결과 담아야지 
        
        // JSON 형식으로 보내줌 
        String json = "{\"status\":\"성공\", \"grade\":\"관리자\"}";
        
        out.print(json); //내보내.출력해서(제이슨박스를)
        out.flush(); //내보내.남김없이전부 
    }


}

내장 객체(out / request) 실습

jamk-diary — Wed, 8 Jul 2026 18:05:22 +0900

JSP 내장 객체 가상 시뮬레이터 미션

[1] 화면 UI 구조 예시

==== 내장 객체(out / request) 실습창====

이름: [ 성춘향 ] -> 입력함 나이: [ 15 ] -> 입력함

[ 데이터 전송하기 ] -> 버튼

[ ️ 가상 JSP 결과 화면 ] (기본은 보이지 않는 상태)

out 객체로 출력한 메시지: -> 하이 반갑습니다

request 객체로 읽어온 데이터: -> 이름은 성춘향이고, 나이는 15세입니다.

버튼을 누르면 아래 결과 화면이 슥 나타나게 만듭니다.

[2] 과제 구현 조건 (스스로 짜볼 내용)

HTML 구조 잡기

이름을 입력할 input 태그와 나이를 입력할 input 태그를 만듭니다.
'데이터 전송하기' 버튼(button) 태그를 만듭니다.
결과를 보여줄 div 태그를 만들고, 처음에는 숨겨둡니다(display:none).

JavaScript 기능 (딱 1개의 함수만!)

버튼을 누르면 작동할 함수를 만듭니다.
함수가 실행되면 결과 div창을 보이게(display:block) 바꿉니다.
사용자가 입력한 이름과 나이 값을 변수에 가져옵니다.
오늘 일지에서 배운 두 가지 핵심 문구를 화면에 갈아끼워 줍니다.
- out 객체 출력 영역에는 "하이 반갑습니다"가 나오게 하세요.
- request 객체 출력 영역에는 수강일지 index1.jsp에서 주소창 값을 읽어오듯, 입력받은 이름과 나이 변수를 활용해 "이름은 OO이고, 나이는 OO세입니다."라는 문장이 완성되도록 엮어서 출력하세요.

[3] 이번 과제의 핵심 포인트

오늘 배운 JSP 코드(out.println(), request.getParameter())가 실제로 웹 화면에 어떤 최종 결과물로 변환되어 유저에게 보여지는지 그 원리를 프론트엔드단에서 가상으로 흉내 내보는 연습입니다.

너무 깊게 생각하지 마시고 document.getElementById().innerHTML을 사용해서 글자만 쏙쏙 바꿔보세요. 폰으로 짜다가 괄호가 빠지거나 글자가 안 바뀌면 언제든 편하게 코드 들고 오세요. 힌트 바로 드릴게요. 화이팅!

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<%

String name = request.getParameter("name");
String age = request.getParameter("age");



%>
<h1>====   내장 객체(out / request) 실습창==== </h1>

<h1>이름: <span id="span_tag"> <input  type="text" size="20" id="name" value="<%=name %>"></span></h1>
<h2>나이: <span id="span_tag2"><input type= "text" size="20" id= "age" value="<%=age %>"></span></h2>
<button type="submit" onclick="btnClick()">제출</button>

<script type="text/javascript">

 function btnClick() {
	let na= document.getElementById("name").value;
	let ag= document.getElementById("age").value;
	//alert(na); //변수 na 에  html 잘 들어왔는지 확인하려고 띄우는 경고창
	document.getElementById("name").innerHTML;
	document.getElementById("age").innerHTML;
	
	//HTML 삽입 방법 : 아이디 이름. 이너html = 원하는 변수, "글자" 등등
	span_tag.innerHTML = na;
	span_tag2.innerHTML = ag;
	
}
 
 
</script>
</body>
</html>

[수강일지 40] 웹페이지의 데이터 통신/ 서블릿(Servlet) 기초와 Forward vs Redirect 개념

jamk-diary — Tue, 7 Jul 2026 18:51:19 +0900

web.xml 파일

C:\apache-tomcat-9.0.118\apache-tomcat-9.0.118\conf

경로 따라가서 web.xml 파일 드래그 앤 드랍

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0">
  
  </web-app>

위 코드 web.xml 파일에 옮기고 저장 후 삭제

이후 프로젝트 명 마우스 우클릭 -> 자바 ee tools -> 제너레이트 클릭

HelloServlet.java

구문 입력후 extend 뒤에 Http 까지만 입력, 컨트롤 스페이스바 해서 찾아서 입력 안 그럼 인식 안 됨

소스 -> 오버라이드 -> do get , do post 체크 후 실행 (do get과 post 는 함수)

Sample1

Sample1 수업 목적: 웹의 기초적인 소통 흐름 배우기

학습목표: HTML 화면(프론트엔드)과 자바 서블릿(백엔드)이 어떻게 연결되고 서로 소통하는지 알 수 있다

주요 학습 내용

GET 방식과 POST 방식의 차이점
- GET: 링크(<a href="...">)를 누르거나 일반적인 정보를 전송할 때 사용하는 방식.
- POST: 로그인 비밀번호나 개인정보처럼 외부로 드러나면 안 되는 보안이 필요한 데이터를 전송할 때 사용하는 방식 (폼 태그 내부에서 method="post"로 지정).
서블릿(Servlet)의 개념 잡기
- "Java 코드 안에 HTML 코드가 삽입되어 있는 것"이 서블릿이라는 정의를 배우고, 클라이언트의 요청(doGet, doPost)을 서버가 어떻게 나누어 받는지 그 갈림길을 확인하는 실습이었습니다.
자바스크립트(location.href)를 통한 이동
- 일반적인 form 전송뿐만 아니라, 자바스크립트 함수(move())를 이용해 버튼을 눌렀을 때 비동기나 강제 페이지 이동 처리를 어떻게 하는지 맛보는 과정이었습니다.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 화면(프론트엔드)과 자바 서블릿(백엔드)의 연결 방법과 소통 방법</title>
</head>
<body>

<!--  Servlet = Server + Applet : Java(Html)
	  jsp : html
	  
	  
	  Get방식, post 방식의 차이 
	  Get : 일반적인 정보 전송 
	  Post : 보안에 필요한 데이터를 전송하는 경우 사용한다 (ex. password,개인정보)
	
	 Java 코드 안에 (Html)이 삽입되어 있는 것 = Servlet 
 -->
 
 <a href= "hello">Hello Servlet으로 이동 </a>
 <br/> <br/>
 
 <form action="hello" method="post">
 <input type = "text" name = "name" placeholder="이름"><br/>
 <input type = "submit" value="dopost버튼">
 </form>
 
 <!-- 자바스크립트를 이용한 링크 넘어가는 방법 -->
 <button type="button" onclick= "move()">doget버튼</button>
 
 <script type="text/javascript">
 //do get으로 간다 
 function move() {
	location.href = "hello";
}
 
 </script>
</body>
</html>

helloServelet

package Sample1;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet{
//서블릿 파일 안에 두 겟과 두 포스트로 나눠진 부분 
	@Override //do get
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("helloServlet doGet");
		
		
	
	}

	@Override //do post
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("helloServlet doPost");
	}

}

Sample2

Sample2 수업 목적: 다양한 양식의 데이터 전송 및 백엔드 동적 화면 구현 배우기

학습목표: 사용자가 입력한 다양한 타입의 데이터(단일 텍스트, 복수 선택 체크박스)를 서블릿에서 정확히 구분하여 수집(getParameter, getParameterValues)하고, PrintWriter를 활용해 브라우저에 동적인 HTML 결과 화면을 직접 그려낼 수 있다

주요 학습 내용

다양한 데이터 타입의 파라미터 수집 (getParameter vs getParameterValues)
getParameter: 메모 입력창(memo)처럼 단 하나의 문자열 데이터를 서버로 가져올 때 사용합니다.
getParameterValues: 체크박스(hobby)처럼 복수 선택이 가능한 데이터를 문자열 배열(String[]) 형태로 한꺼번에 수집할 때 사용합니다.
동적 HTML 화면 출력 (PrintWriter)
response.setContentType("text/html; charset=utf-8"): 서버가 브라우저에게 HTML 문서를 전달하기 전, 한글이 깨지지 않도록 인코딩과 문서 타입을 미리 세팅합니다.
response.getWriter(): 자바 서블릿 안에서 브라우저 화면에 글씨나 HTML 태그를 직접 써서 보낼 수 있는 통로인 PrintWriter 객체를 생성하고, pw.println() 메서드로 동적인 화면을 빌드합니다.

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 
		servlet : java(html)
		jsp : html(java)
 -->


<a href="hello">Hello Servlet으로 이동</a>
<br/><br/>

<form action="hello" method="get">
<input type="text" name="memo" placeholder="memo"/>
<br/>
<input type="checkbox" name="hobby" value="picture"/>그림그리기
<input type="checkbox" name="hobby" value="movie"/>영화감상
<br/>
<input type="submit" value="HelloServlet GET">
</form>
<br/><br/>

<!-- 여기 왜 위에 폼 부분이랑 다르게 사용하는지 ? method 위에는 get으로 썼는데 여기는 왜 Post 인지 출력쪽이라 ? -->
<form action="hello" method="post">
<input type="text" name="memo" placeholder="memo"/>
<input type="submit" value="HelloServlet POST">
</form>




</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
  
  <servlet>
  	<servlet-name>hello</servlet-name>
  	<servlet-class>sample2.HelloServlet</servlet-class>
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>hello</servlet-name>
  	<url-pattern>/hello</url-pattern>
  </servlet-mapping>
  
</web-app>

HelloServlet

package sample2;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		System.out.println("HelloServlet doGet");
		
		String memo = request.getParameter("memo");
		System.out.println(memo);
		
		String hobby[] = request.getParameterValues("hobby");
		
		response.setContentType("text/html; charset=utf-8");
		PrintWriter pw = response.getWriter();
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>Hello Servlet</title>");
		pw.println("</head>");
		
		pw.println("<body>");
		
		pw.println("<h1>Hello Servlet</h1>");
		
		pw.println("<p>memo:" + memo + "</p>");
		
		pw.println("<ul>");
		for (int i = 0; i < hobby.length; i++) {
			pw.println("<li>" + hobby[i] + "</li>");
		}
		pw.println("</ul>");
		
		pw.println("</body>");		
		pw.println("</html>");
		
		pw.close();
		
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("HelloServlet doPost");
	}	

}

Sample3

Sample 3 수업 목적: Forward와 Redirect를 활용한 서블릿 간 데이터 전송 및 흐름 제어 배우기

학습목표: 서버 내부에서 페이지를 전환하는 Forward 방식과 브라우저를 통해 재요청하는 Redirect 방식의 차이를 명확히 이해하고, 상황에 맞게 DTO 객체(setAttribute)나 URL 파라미터를 활용하여 서블릿 간에 데이터를 안전하게 토스하고 출력할 수 있다.

포워드(Forward)와 리다이렉트(Redirect)의 개념 및 차이점 이해
포워드(Forward): 서버 내부에서 다른 서블릿으로 요청을 토스하는 방식으로 브라우저 주소창이 변하지 않으며, 기존의 request 객체가 유지되어 자바 객체(DTO)를 그대로 다음 서블릿으로 안전하게 전달할 수 있습니다.
리다이렉트(Redirect): 서버가 브라우저에게 새 주소로 다시 접속하라고 명령하는 방식으로 주소창이 최종 목적지로 바뀌며, 기존 request 상자가 소멸하므로 오직 주소창 뒤에 문자열 파라미터를 매달아 보내야 합니다.
포워드 구현을 위한 3대 핵심 도구 활용
HttpServletRequest: 다음 부서로 넘길 데이터 택배 상자를 보관(setAttribute)하고 비밀 통로 티켓을 발행하는 역할을 합니다.
RequestDispatcher: 톰캣 내부에서 forward(req, resp) 명령어를 가동해 요청과 데이터를 옆 부서로 슥 밀어주는 실제 제어 스위치 역할을 합니다.
HumanDto: 데이터를 글자로 쪼개 보내지 않고 하나의 예쁜 패키지 상자로 포장하여 전달하기 위해 우리가 직접 설계한 규격 택배 상자(Data Transfer Object)입니다.
리다이렉트 한글 인코딩 (URLEncoder)
리다이렉트 방식은 주소창 뒤에 텍스트를 직접 매달아 보내기 때문에, 이름 같은 한글 데이터가 외계어로 깨지는 것을 막기 위해 URLEncoder.encode(name, "utf-8") 처리를 반드시 거쳐야 함을 학습합니다.

index0

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>데이터를 다음 서블릿으로 패스하는 두 가지 기술 </title>
<title>웹페이지에서 사용자가 입력한 데이터를 서버로 보낸 뒤 Forward, Redirect 각각 두 가지 방법으로 또다른 웹페이지에 출력하는 방법 </title>
</head>
<body>

<pre>
  [과정과 목표 설명 ]
  
{과정}
1단계: 웹페이지 준비 및 요청
2단계: 1차 서블릿의 교통정리 (HelloServlet)
3단계: 최종 목적지 및 화면 출력 (SampleServlet)

{목표}
1. index.html (입력창)
2. HumanDto: (데이터 모양 설계도)입력한 데이터를 어떤 형태로 받아올지 그려주는 설계도
3. HelloServlet.java (1차 가공) : 설계도 모양대로 데이터를 받아서 가공하고 Forward와  Redirect 둘 중 하나를 선택해서 데이터를 넘긴다 
4. SampleServlet.java : (출력) Forward 혹은  Redirect 로 받은 데이터를  웹페이지에 출력해주는 과정
5. web.xml : 서버를 열어주고 어디로 갈지 이동시켜주는 이정표 


   [전체 작동 순서 구조도]
   
---------------------index.html---------------------
	유저가 index.html 을 통해 생성된 웹페이지 창에 이름, 나이, 신장을 입력한 뒤 전송 버튼을 누른다 
    form action= url-pattern , 원하는 사이트 주소를 작성해도 동작한다 =
    method= post / get  -> 데이터 통신 방법 결정 
    
---------------------web.xml---------------------
	web.xml 을 통해 어디로 갈 지 결정   
	url-pattern 주소로 받은 데이터들은 servlet-class 를 통해 작업될 수 있게 넘겨준다 

---------------------HelloServlet---------------------
	갈림길 선택 - 다른 부서로 데이터 토스하기 	
	입력창 생성 시 설정한 메소드를 통해 작업이 되기 시작한다 (get과 post 중 선택)
     *req.getParameter() 데이터 꺼내기 
     *req.setCharacterEncoding("utf-8"); 한글 깨지지 않게 작업하기
 
   출력 준비를 위해 다른 서블릿.자바 파일로 데이터 보내기
   	*Redirect 과  Forward 둘 중 하나로 선택해서 사용하기 
   	
   * Redirect 선택 시 주의점
      - 주소창 뒤에 데이터를 매달아 보내므로 한글(예: 이름)은 외계어로 깨짐!
      - 반드시 name = URLEncoder.encode(name, "utf-8"); 작업 후 주소창에 더해줘야 함!
 ---------------------SampleServlet---------------------

 	Redirect: 브라우저가 주소창을 바꾸고 새롭게 GET 방식으로 접속하기 때문에, SampleServlet의 doGet() 메서드가 실행

	Forward: 처음 출발한 POST 신호가 그대로 이어지기 때문에, SampleServlet의 doPost() 메서드가 실행
	
	*데이터 꺼내는 법
	*Forward로 왔을 때 (doPost 가동): req.getAttribute("human") 으로 객체를 꺼내어 출력 -> (주소창 변화 없음) 
	*Redirect로 왔을 때 (doGet 가동): req.getParameter("name") 으로 데이터를 바로 꺼냄 -> (주소창 변화 있음 )
	
	
	*Redirect 굳이 사용하는 이유: 결제 완료 후 새로고침 시 결제 2번 되는 상황을 방지하려고  
	*  면접 단골 정답 구절
	서버의 데이터에 변화를 주는 작업(Insert, Update, Delete) 이후에는 중복 요청으로 인한 에러나 사고를 막기 위해 
	PRG 패턴 (Post-Redirect-Get)**에 따라 무조건 리다이렉트를 사용해야 합니다.
	
	
	*포워드 구현할 때 도대체 어떤 자바 도구들이 필요했는가
	* 실무형 한 줄 코드 공식:
	  req.getRequestDispatcher("목적지서블릿").forward(req, resp);
	
	-> 1. HttpServletRequest (req) : 데이터 택배 상자를 임시 보관(setAttribute)하고, 
	                              비밀 통로 티켓을 발행해 주는 주머니 역할.
	-> 2. RequestDispatcher (rd)  : 톰캣 내부에서 다른 서블릿(옆 부서)으로 
	                              요청과 데이터를 슥 밀어주는 진짜 '이동 제어 스위치'.
	-> 3. HumanDto                 : 데이터를 글자로 쪼개지 않고 한 덩어리로 예쁘게 포장하는 
	                              우리가 직접 만든 '규격 택배 상자'.                            
	
 
    
</pre>

 
</body>
</html>

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>웹페이지 유저 입력창</title>



</head>
<body>

<form action="hello" method="post">
<input type="text" name="name" placeholder="이름"><br/>
<input type="text" name="age" placeholder="나이"><br/>
<input type="text" name="height" placeholder="신장"><br/><br/>
<input type="submit" value="전송">
</form>

</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">

<!-- <url-pattern> 주소로 받은 데이터들은 <servlet-class> 를 통해 작업할 수 있게 넘겨준다 -->


<!--데이터가 입력된 창이 /hello 주소를 사용하고 있으면  sample3패키지의 HelloServlet 클래스로 이동-->
<servlet>
	<servlet-name>hello</servlet-name>
	<servlet-class>sample3.HelloServlet</servlet-class>
</servlet>

<servlet-mapping>
	<servlet-name>hello</servlet-name>
	<url-pattern>/hello</url-pattern>
</servlet-mapping>

<!--데이터가 입력된 창이 /sample 주소를 사용하고 있으면  sample3패키지의 SampleServlet 클래스로 이동-->
<servlet>
	<servlet-name>sample</servlet-name>
	<servlet-class>sample3.SampleServlet</servlet-class>
</servlet>

<servlet-mapping>
	<servlet-name>sample</servlet-name>
	<url-pattern>/sample</url-pattern>
</servlet-mapping>


</web-app>

HelloServlet.java

package sample3;

import java.io.IOException;
import java.net.URLEncoder;

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

public class HelloServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

	}

	@Override
	/*1차 접수처 (자바)
	  HTML에서 method="post"로 보냈기 때문에, HelloServlet 내부의 doPost() 메서드가 자동으로 실행
	*/
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8"); // post일 경우 추가해야 한다
		
		String name = req.getParameter("name");
		int age = Integer.parseInt(req.getParameter("age"));
		double height = Double.parseDouble(req.getParameter("height"));
		
		System.out.println("name:" + name);
		System.out.println("age:" + age);
		System.out.println("height:" + height);
	
	//	방식 A (Forward):  1. forward(전진) -> doPost
	// 데이터들을 object로 묶는다:방식 A(Forward)로 갈 때만 쓸 수 있는 상자
	//	HumanDto human = new HumanDto(name, age, height);
	//	req.setAttribute("human", human);
		
		// 이동
	
	//	RequestDispatcher rd = req.getRequestDispatcher("sample");
	//	rd.forward(req, resp);
	//	req.getRequestDispatcher("sample").forward(req, resp); 이런식으로 축약 가능 
		
	//방식 B (Redirect): 한글일 경우 인코딩을 적용해 줘야 한다! <- sendRedirect로 보낼때
	
		name = URLEncoder.encode(name, "utf-8");
		
		// 2. sendRedirect -> 단순이동 시에 사용  (doGet으로 간다)
		resp.sendRedirect("sample?name=" + name + "&age=" + age + "&height=" + height);		
		
	}

}

SampleServlet.java

package sample3;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class SampleServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("SampleServlet doGet");
		
		//  sendRedirect 로 전송
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String height = req.getParameter("height");
		
		resp.setContentType("text/html; charset=utf-8");
		PrintWriter pw = resp.getWriter();
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>Sample Servlet</title>");
		pw.println("</head>");
		
		pw.println("<body>");	
		
		pw.println("<h1>Sample Servlet</h1>");
		
		pw.println("<p>" + name + "</p>");
		pw.println("<p>" + age + "</p>");
		pw.println("<p>" + height + "</p>");
		
		pw.println("</body>");		
		pw.println("</html>");
		
		pw.close();		
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("SampleServlet doPost");
		
	// forward 로 object를 전송한 경우
		HumanDto dto = (HumanDto)req.getAttribute("human");
				
		resp.setContentType("text/html; charset=utf-8");
		PrintWriter pw = resp.getWriter();
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>Sample Servlet</title>");
		pw.println("</head>");
		
		pw.println("<body>");	
		
		pw.println("<h1>Sample Servlet</h1>");
		
		// forward 로 object를 전송한 경우
		pw.println("<p>" + dto.getName() + "</p>");
		pw.println("<p>" + dto.getAge() + "</p>");
		pw.println("<p>" + dto.getHeight() + "</p>");
		
		pw.println("</body>");		
		pw.println("</html>");
		
		pw.close();
	}	
}

HumanDto (포워드 일 때만 사용)

package sample3;

public class HumanDto {
	private String name;
	private int age;
	private double height;
	
	public HumanDto() {
	}

	public HumanDto(String name, int age, double height) {
		super();
		this.name = name;
		this.age = age;
		this.height = height;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public double getHeight() {
		return height;
	}

	public void setHeight(double height) {
		this.height = height;
	}

	@Override
	public String toString() {
		return "HumanDto [name=" + name + ", age=" + age + ", height=" + height + "]";
	}	
}

포워드(Forward) vs 리다이렉트(Redirect) 완벽 비교

비교 항목	포워드 (Forward)	리다이렉트 (Redirect)
개념 비유	서버 내부에서 조용히 옆 부서로 바통 터치	브라우저에게 주소창 바꿔서 새로 접속하라고 튕겨내기
주소창 변화	변하지 않음 (처음 주소 그대로 유지)	새 주소로 변경됨 (최종 목적지 주소로 바뀜)
주체	서버(톰캣)가 내부에서 알아서 이동시킴	브라우저(클라이언트)가 명령을 받고 직접 이동함
통신 횟수	요청 1번, 응답 1번 (기존 요청 상자 유지)	요청 2번, 응답 2번 (기존 상자 버리고 새로 요청)
서블릿 메서드	처음 출발한 방식 유지 (예: doPost ➔ doPost)	무조건 새롭게 접속하므로 doGet() 실행
데이터 전달 방법	req.setAttribute("key", Object)	주소창 뒤에 매달기 ?name=값&age=값
데이터 종류	자바 객체(DTO, List 등) 통째로 가능	오직 텍스트(문자열)만 가능 (한글 인코딩 필수)
데이터 꺼내는 법	req.getAttribute("key")	req.getParameter("key")
주요 용도	단순 데이터 조회, 검색 결과 화면 출력 (80%)	글쓰기, 결제 완료 후 새로고침(F5) 방지, 로그인 체크 (20%)

️ 포워드 사용 시 필요한 3대 클래스

1. HttpServletRequest (데이터 주머니 및 패스포트)

어디서 봤지? ➔ doPost(HttpServletRequest req, ...) 메서드의 매개변수(req)입니다.
무슨 역할이야? ➔ 포워드를 할 수 있는 비밀 통로 티켓을 발행해주고, 다음 서블릿으로 넘길 택배 상자(DTO)를 보관하는 창고 역할을 합니다.
핵심 메서드:
- req.getRequestDispatcher("sample") : "sample 부서로 가는 비밀 통로(Dispatcher)를 만들어줘!" 라고 요청하는 메서드입니다.
- req.setAttribute("human", human) : 다음 부서로 보낼 DTO 객체 상자를 req 안의 창고에 저장하는 메서드입니다.

2. RequestDispatcher (비밀 통로 안내원)

어디서 봤지? ➔ RequestDispatcher rd = req.getRequestDispatcher("sample");
무슨 역할이야? ➔ 톰캣 서버 내부에서 다른 서블릿(옆 부서)으로 요청을 슥 밀어주고 이동시켜주는 진짜 '이동 제어 스위치' 역할을 하는 인터페이스입니다.
핵심 메서드:
- rd.forward(req, resp) : 이 명령어를 내리는 순간, 내가 들고 있던 데이터 상자(req)와 응답 장부(resp)를 다음 부서로 던지면서 화면이 전환됩니다.

3. HumanDto (내가 만든 데이터 택배 상자)

어디서 봤지? ➔ HumanDto human = new HumanDto(name, age, height);
무슨 역할이야? ➔ 리다이렉트처럼 글자를 쪼개 보내지 않고, 포워드의 장점을 살려 데이터를 한 덩어리로 예쁘게 포장하는 '규격 상자'입니다. 이 클래스는 자바가 기본으로 주는 게 아니라, 우리가 직접 데이터 모양을 설계해서 만든 클래스(DTO)입니다.

전체 흐름 최종 한눈에 보기

특징	포워드 (Forward)	리다이렉트 (Redirect)
핵심 도구	RequestDispatcher, Dto 객체	URLEncoder, 주소창 텍스트 결합
데이터 형태	오브젝트(객체) 통째로 (Attribute)	오직 문자열(텍스트)만 (Parameter)
실무 점유율	약 80% (단순 조회, 화면 출력 시 대세)	약 20% (글쓰기/결제 완료 후 안전 방어벽)

work

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<a href="Sample">SampleServlet이동</a>

<br/>

<form action="Sample" method="get">
<h1>설문조사</h1> <br/><br/>


<h2>이름: <input type="text" width="25px" placeholder="이름을 기입" name="name"></h2>  <br/>

<hr/>

<h2>질문(1)</h2>  <br/>
<h3>영어 이외에 관심이 있는 어학이 있으면 선택해 주세요 (복수 답변가능 )</h3>  <br/>
<div>
<span><input type="checkbox" value="G" name="la">독일어</span>
<span><input type="checkbox" value="F" name="la">프랑스어</span>
<span><input type="checkbox" value="I" name="la">이탈리아어</span>
<span><input type="checkbox" value="S" name="la">스페인어</span>
<span><input type="checkbox" value="J" name="la">일본어</span>
</div>


<hr/>


<h2>질문(3)</h2>  <br/>
<h3>영어 수업에 대한 의견</h3>
<textarea rows="10" cols="25" placeholder="의견을 기입" name="op"></textarea>


<hr/>

<h2>질문(4)</h2>  <br/>
<h3>나이를 선택하세요</h3>
<select name="age">  <!-- 셀렉트 구문 사용시에는 name 셀렉트 태그에 쓰기 -->
	<option>아래에서 선택</option>
	<option >0~9</option>
	<option >10~19</option>
	<option >20~29</option>
	<option >30~39</option>
	<option >40~49</option>
</select>

<hr/>

<button type="submit">제출</button>
<button type="reset">초기화</button>
</form>



</body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" version="4.0">
 
 	<servlet>
 		<servlet-name>Sample</servlet-name>
 		<servlet-class>SampleWork.SampleServlet</servlet-class>
 	</servlet>
 	
 	<servlet-mapping>
 		<servlet-name>Sample</servlet-name>
 		<url-pattern>/Sample</url-pattern>
 	</servlet-mapping>
</web-app>

SampleServelet

package SampleWork;

import java.io.IOException;
import java.io.PrintWriter;

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

public class SampleServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String name = req.getParameter("name");
		String la []= req.getParameterValues("la");
		String op = req.getParameter("op");
		String age= req.getParameter("age");
		
		System.out.println("name:" +name);
		System.out.println("la:" +la);
		System.out.println("op:" +op);
		System.out.println("age:" +age);
		
		
		humanDto human = new humanDto(name, la, op, age);
		req.setAttribute("human", human);
		
		
		
		resp.setContentType("text/html; charset=utf-8");
		PrintWriter pw = resp.getWriter();
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>SampleServlet</title>");
		pw.println("</head>");
		
		pw.println("<body>");
		
		
		pw.println("<p>이름:" +name + "</p>");
		pw.println("<p>관심언어: ");
		if (la != null) { //   사용자가 아무것도 체크 안 했을 때를 대비한 안전장치!
		    for (String lang : la) {
		        pw.println(lang + " "); // 선택한 언어들을 한 칸씩 띄워서 출력
		    }
		} else {
		    pw.println("선택 안 함");
		}
		pw.println("</p>");
		pw.println("</p>");
		pw.println("<p>의견:" +op + "</p>");
		pw.println("<p>나이대:" +age + "</p>");
		
		
		pw.println("</body>");
		pw.println("</html>");
		
		pw.close();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		
	}

}

human Dto

package SampleWork;

import java.util.Arrays;

public class humanDto {

		private String name; //이름
		private String []la; //언어
		private String op; //의견 
		private String age; //나이대
		
		public humanDto() {
			// TODO Auto-generated constructor stub
		}

		public humanDto(String name, String[] la, String op, String age) {
			super();
			this.name = name;
			this.la = la;
			this.op = op;
			this.age = age;
		}

		public String getName() {
			return name;
		}

		public void setName(String name) {
			this.name = name;
		}

		public String[] getLa() {
			return la;
		}

		public void setLa(String[] la) {
			this.la = la;
		}

		public String getOp() {
			return op;
		}

		public void setOp(String op) {
			this.op = op;
		}

		public String getAge() {
			return age;
		}

		public void setAge(String age) {
			this.age = age;
		}

		@Override
		public String toString() {
			return "humanDto [name=" + name + ", la=" + Arrays.toString(la) + ", op=" + op + ", age=" + age + "]";
		}

		
		
		
}

[수강일지 39] jquery

jamk-diary — Mon, 6 Jul 2026 17:20:16 +0900

[원본 ]

https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.js

[경량화]

-min 이 붙어있다

https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js

Jquery 사용을 위해 파일을 불러오는 방법

<!-- 꼭 head에 해야 되는 건 아니지만  여기다 하면 편함 . 기본으로 깔고 가기 -->
<!--  웹사이트로 바로 연결해서 불러오는 방법 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<!--  파일 저장 후 이클립스 내부에서 불러오는 방법 --> 
<script src="./jqurey.min.js"></script>

Jquery 회사 -> 사용 가능한 함수들 확인 가능

https://jquery.com/

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

https://jqueryui.com/

jQuery UI

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQue

jqueryui.com

Sample 1

index : 자바스크립트(JavaScript)와 제이쿼리(jQuery)의 핵심 차이점

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<!--  
 	java script : client(front - end) 
 				view (화면)의 resurece의 값을 취득 , 설정 
 				Dom(getElementByID, getElementByTahName...등등등)
 				
 				-> angular > react > vue > next.js
 				
 				
 	JQuery : java script 를 경량화하려고 만들었다 -> (근데 좀 실패함 무겁게 만들어졌다)
 		     ajax(비동기 통신) -> framework
 		     
	JQuery-UI : resource(button, input....)

 	형식 : $( 태그명 , #id , .class, tag[name] ).함수명(매개변수) 
 	
 	
 	[setter 형식 비교 ] 
 	    이전에 자바 스크립트의 경우 doucument.getElementID("id").value = "hello";
 	    JQuery 는 이렇게 쓴다  $("#id").val("hello");

	[getter 형식 비교]
	let v = doucument.getElementID("id").value ;
	let v = $("#id").val();
	
	[java script vs JQuery 같은 기능, 다른 형식비교 ]
	innerHTML = html()
	value=val()

 -->
</body>
</html>

이 노트가 담고 있는 핵심 내용 3가지

1. 프론트엔드 생태계에서의 역사와 위치

자바스크립트: 웹 화면(View)에서 데이터를 가져오고(getter) 설정하는(setter) 가장 기본이 되는 프로그래밍 언어입니다. (이후에 발전해서 Angular, React, Vue, Next.js 같은 거대한 프레임워크들이 등장하게 됩니다.)
jQuery: 순수 자바스크립트는 코드가 너무 길고 복잡하니까, 그걸 쉽고 짧게(경량화) 쓰려고 만들어진 라이브러리입니다. (특히 페이지 새로고침 없이 데이터를 주고받는 ajax 비동기 통신에서 엄청나게 활약했습니다.)

2. jQuery의 기본 공식 (형식)

jQuery를 쓸 때는 무조건 이 공식 하나만 기억하면 된다는 뜻입니다.

태그 이름으로 찾을 때: $("p")
아이디 이름으로 찾을 때: $("#demo")
클래스 이름으로 찾을 때: $(".cls")

3. 이 노트의 하이라이트: 자바스크립트 vs jQuery 문법 비교 (Getter / Setter)

데이터를 집어넣을 때(Setter)와 데이터를 꺼내올 때 (Getter) 코드가 얼마나 짧아지는지 기가 막히게 비교해 둔 부분입니다.

값을 세팅할 때 (Setter):
- JS: document.getElementById("id").value = "hello"; (길다!)
- jQuery: $("#id").val("hello"); (짧고 간결!)
값을 가져올 때 (Getter):
- JS: let v = document.getElementById("id").value;
- jQuery: let v = $("#id").val();
쌍을 이루는 똑같은 기능의 명령어:
- 태그 사이의 글자나 HTML을 다룰 때: JS의 innerHTML = jQuery의 html()
- input 상자 같은 곳의 입력값을 다룰 때: JS의 value = jQuery의 val()

index 2 : 원하는 데이터에 접근해서 데이터를 꺼내오는 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 꼭 head에 해야 되는 건 아니지만  여기다 하면 편함 . 기본으로 깔고 가기 -->
<!-- 웹사이트로 바로 연결해서 불러오는 방법  -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</head> 
<body>

 <!-- 파일 저장 후 이클립스 내부에서 불러오는 방법 
<script src="./jquery.min.js"></script> -->

<p>일반 p tag</p>

<p id ="demo">p tag id = demo </p>

<p class = "cls"> p tag class = cls </p>

<h3 class = "cls">h3 tag class = cls</h3>

<script type="text/javascript">
//java script 

//setter 

//에러 발생, 아래 구문처럼 적용시 p tag를 사용한 것들이 변하지 않는다 
//let ptag = document.getElementsByTagName("p").innerHTML = "hello p tag"; 

/*
//java script를 활용한 해결 방법 
let ptags = document.getElementsByTagName("p");
for (var i = 0; i < ptags.length; i++) {
	ptags[i].innerHTML = "hellp p tag";
}
*/


//jQuery 활용한 해결 방법 
//$("p").html("안녕 p tag");
//$("p").text("안녕 p tag"); // =innerText


/*java script 문법 

let demo = document.getElementById("demo").innerHTML;
console.log(demo);
*/

	//원하는 특정 태그로 가져오기 
let demo = $("#demo").html();
console.log(demo);


let cls = $(".cls").html();
console.log(cls);

cls = $("h3.cls").html();
console.log(cls);

ㅁ
// .eq()로 번찌에서 꺼내오기 
//클래스 이름 하나로 묶인 여러 개를 순서대로 가져오는 방법
let cls0 = $(".cls").eq(0).html(); // 첫 번째 .cls (p 태그)
let cls1 = $(".cls").eq(1).html(); // 두 번째 .cls (h3 태그)
console.log(cls0);
console.log(cls1);


//   위에서 이미 선언했던 clsH3 변수가 아래에 중복으로 깔끔하게 들어있어 그대로 유지했습니다.
let clsH3 = $("h3.cls").html();
console.log(clsH3);

</script>

</body>
</html>

index 3: 이벤트 발생

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 설정</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>


<!--  자바 스크립트 방식 
<p id = "demo">hello jquery</p>

<p_onclick="p_click()">click</p>

<script type="text/javascript">

function p_click() {
	alert('p_click()');
}

</script>

-->

<!-- 제이 쿼리 방식 
<p id = "demo">hello Jquery</p>

<p id = " p_click">click</p>


<script type="text/javascript">
$("#p_click").click(function () {
	alert('p_click');
	
});

</script>
 -->
 
 
 <input type="text" id= "text"  size="20"/>
 <button type="button" id= "btn">버튼</button>

<br/><br/>

<p id = "demo"></p>

<script type="text/javascript">
$(document).ready(function () { //화면 구성이 끝난 후에 실행 된다 
	
/* 방식 1 	
	$("#btn").click(function () {
		//alert('click')
		let input = $("#text").val();  //getter
		$("#demo").html(input);		//setter
	});

*/

/* 방식 2 
$("#btn").on("click", function () {
	alert('on click');
});
*/

//자바스크립트, 제이 쿼리 혼용 
$("#btn").on("click",btnFunc );

});


function btnFunc() {
	alert('btnFunc()');
}
</script>


</body>
</html>

Sample 2

index
: "태그에 CSS 스타일을 직접 넣는 방식(css() )"과 "이미 만들어둔 CSS 클래스를 넣고 빼는 방식(attr(),addClass()
,prop(),removeClass())"의 차이점

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

	.style{
		color: blue; 
	}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<p>hello </p>
<p id="demo">world </p>

<button  type="button">button</button>

<script type="text/javascript">

$("button").click(function () {
	
	//css 설정해보기 
	$("p").css("background", "#00ff00"); //setter
	
	
	let color = $("p").css("background"); //getter
	//alert(color); //경고창에서 컬러값 확인 가능 
	
	//$("p").attr("id","p_id"); //setter
	//let id = $("p").attr("id"); //getter
	
	
	//스타일css 생성 후 작업하는 방식 
	//$("#demo").attr("class","style"); //스타일 추가가 됨 
	//$("#demo").addClass("style"); 
	
	$("#demo").prop("class","style"); //이렇게 작성해도 $("#demo").attr("class","style"); 와 같은 방식 사용 가능 
	
	//$("#demo").removeClass("style"); //위에서 적용한  $("#demo").addClass("style");  설정을 사라지게 만듬 
	
	//html() text() val() css() arrt() prop()
});



</script>
</body>


</html>

이 코드의 핵심 포인트 3가지

prop("class", "style") (가장 중요)
- 기존에 쓰던 $("#demo").attr("class", "style")와 완전히 똑같이 동작한다는 점을 배우는 게 핵심입니다. 태그의 속성(Attribute/Property)을 제이쿼리로 어떻게 제어하는지 보여주는 핵심 Setter 문법이에요.
$("p").css("background", "#00ff00");
- 클래스를 넣고 빼는 것 외에, 태그에 직접적으로 디자인을 먹이는 기본 스타일링 속성(css())의 사용법을 보여줍니다.
addClass()와 removeClass()의 빌드업
- 아래 주석 처리된 addClass()와 removeClass()는 실무에서 스타일을 줬다 뺐다 할 때 가장 많이 쓰는 콤보 메뉴입니다. prop()을 이해한 뒤 이 메서드들로 넘어가는 징검다리 역할을 하는 코드입니다.

한 줄 요약
"jQuery로 화면의 특정 요소(#demo)를 붙잡아서, 내가 원하는 스타일 클래스(style)를 동적으로 입히는 문법(prop 또는 attr)을 다룰 수 있는가!"

index1 : table 접근 방법

마우스 움직임에 따라 표(<tr>)의 배경색을 실시간으로 바꾸고, 클릭한 칸(
<td>)의 글자 데이터를 쏙 뽑아내는(Getter) 방법

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>table 접근 방법</title>
</head>
<body>


<table border = "1">
 <colgroup>
	<col width="50"/><col width="150"/><col width="150"/>
 </colgroup>	
	<thead>
		<tr>
		 	<th>number</th> <th>name</th> <th>age</th>
		</tr>	
	</thead>
		
	<tbody>
		<tr>
		 	<th>1</th> <td>홍길동</td> <td>28</td>
		</tr>
		<tr>
		 	<th>2</th> <td>뽀로로</td> <td>35</td>
		</tr>
		<tr>
		 	<th>3</th> <td>둘리</td> <td>2</td>
		</tr>
	</tbody>

</table>

<!-- table 접근 위해 스크립트 생성 -->
<script type="text/javascript">
//테이블에 마우스 올리면white 마우스 떠나면 gray로 색상 변화 
//주의 하기 : 마우스 올리면 색변하고 떠나면 색 변하는 작업 할 때는 색상 코드 표기법을 한 가지로 일치시켜야 한다 
//#과 영어 단어를 섞어 쓰면 인식이 안 돼요!
	$(document).ready(function () {
		$("tr").mouseover(function () {
			$(this).css("background" , "#eeeeee");
		});															//mouseover=onmouseover 과 동일 
		$("tr").mouseout(function () {
			$(this).css("background" , "#808080");
		});
	});

	//td태그로 클릭한 것의 값을 경고창으로 확인 가능 
	//괄호 안의 내용이 바뀌면 table 값, tr값, tbody 값 등 다양하게 가져오기 가능 
 $("td").click(function () {
	alert($(this).text());
});


</script>



</body>
</html>

index 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title> radio , checkbox</title>
</head>
<body>

<!-- radio -->
<ul type = "none">
	<li><input type="radio"  name="fruit" value = "사과" checked="checked"/>사과</li>
	<li><input type="radio"  name="fruit" value = "배"/>배</li>
	<li><input type="radio"  name="fruit" value = "바나나"/>바나나</li>
</ul>


<button type = "button" id="choice">선택</button>

<script type="text/javascript">
$("#choice").click(function () {
	
	//getter
	let fruit= $("input[name='fruit']:checked").val();
	alert(fruit);
	
	//setter
	//처음 초기 선택 사과에 가있는데 버튼 클릭하면 바나나로 바뀜, 경고창 바나나 확인 가능 
	$("input[name='fruit']").val(['바나나']);
	
});



</script>

<br/><br/>


<input type= "checkbox" id = "picture" name="picture"/> 그림그리기 
<input type= "checkbox" id = "movie" name="movie"/> 영화감상 

<br/><br/>

<button type ="button" id ="select">첵크</button>


<script type="text/javascript">

$("#select").click(function() {
		//getter
		//let check = $("picture").is (":checkbox");
		//alert(check);
		
		let check = $("input:checkbox[id='movie']").is(":checked");
		//let check = $("input:checkbox[name='movie']").is(":checked"); ->id 대신name 도 사용 가능 
		//alert(check);
		
		
		//setter
		$("#picture").prop ("checked",true);
		
});



</script>


</body>
</html>

사용 목적

이 예제의 핵심 포인트 2가지

라디오 버튼(radio) 제어
- Getter: $("input[name='fruit']:checked").val(); ➔ 사용자가 선택한 과일이 무엇인지 정확히 판별해 냅니다.
- Setter: $("input[name='fruit']").val(['바나나']); ➔ 대괄호([]) 배열 형식을 사용해 특정 라디오 항목을 동적으로 체크하는 독특한 대입 방식을 보여줍니다.
체크박스(checkbox) 제어
- Getter: $("input:checkbox[id='movie']").is(":checked"); ➔ 영화감상 칸이 체크되어 있는지 확인하여 true/false 상태를 반환합니다. is() 메서드의 활용법이 핵심입니다.
- Setter: $("#picture").prop("checked", true); ➔ prop() 메서드를 사용해 그림그리기 체크박스를 강제로 체크(true) 상태로 만드는 실무 핵심 문법입니다.

index3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>load함수</title>
</head>
<body>


<div id = "news">loading...</div>

<script type="text/javascript">
//load 함수로 불러오기 
$("#news").load("news.txt", function(txt,status){
	//alert(txt); //txt파일 잘 넘어왔는지 확인하기 
	$("#news").text(txt);
});

</script>
</body>
</html>

text.txt

한국 축구의 2026 국제축구연맹(FIFA) 북중미 월드컵 도전은 처참한 실패로 끝났다. A조 조별리그에서 1승 2패 승점 3으로 3위에 그치면서 32강에도 오르지 못했다. 예견된 참사였다. 홍명보 축구 대표팀 감독의 선임부터가 제대로 된 절차 없이 이뤄졌기 때문이다.

사실 2021년이 한국 축구 인사 시스템 붕괴의 커다란 변곡점이 됐다고 해도 과언이 아니다. 정몽규 대한축구협회(KFA) 회장이 3연임에 성공한 그해 1월 이후부터 축구협회는 더욱 비정상적인 행보를 보였다. 축구협회는 1월27일과 7월13일 각각 정관을 개정했다. 여기서부터 커다란 문제가 시작됐다.

index 5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load 함수 </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id = "header">
</div>

<div id = "main">
</div>

<!-- 대용태그 jsp,ajax -->

<script type="text/javascript">
	$(document).ready(function () {
		
			$("#header").load("header.html");
			
			$("#main").load("main.html");
		
	});



</script>
</body>
</html>

이 코드의 핵심 관전 포인트 (블로그 정리용)

 (주석의 의미)
- 적어두신 주석이 아주 정확합니다! 과거에는 서버 사이드 기술인 JSP의 <jsp:include> 태그를 사용해 화면을 조립하곤 했습니다. 하지만 이 코드는 백엔드(JSP)의 도움 없이도 순수 프론트엔드 영역(jQuery AJAX)만으로 화면을 깔끔하게 조립해 낼 수 있다는 엄청난 장점을 보여주는 대목입니다.
실행 시 체크리스트 (기억나시죠? )
- 이 예제 역시 브라우저 보안 정책(CORS)의 영향을 받으므로, 이클립스 내부에 header.html 파일과 main.html 파일이 같은 경로에 예쁘게 만들어져 있어야 합니다.
- 실행할 때는 반드시 이클립스 내장 서버(Tomcat 등)를 구동하여 http://localhost:... 주소로 실행해야 조각 파일들이 톱니바퀴처럼 딱 맞아떨어지며 화면에 로드됩니다.
  
  핵심 코드
  
  $("#header").load("header.html"); // 상단 바 조립
  $("#main").load("main.html"); // 메인 콘텐츠 조립

work

work1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style type="text/css">

	.style{
		border: 4px;
		border-style: solid;
		border-color: green;
	}
	.style1{
		border: 4px;
		border-style: solid;
		border-color: red;
	}
	</style>
</head>
<body>

<h1>photo Library</h1><br/><br/>
기본 라인처리 color : green
<br/><br/>

<img alt="" src="./images/p01.jpg" id="photo"/>


<script type="text/javascript">


	$("#photo").attr("class","style");
	
</script>

<br/><br/>
<h1>life on the water</h1><br/><br/>
이미지 클릭시 라인 처리 <br/><br/>

<!-- <img alt="" src="./images/photo1.jpg" align="left" />
<img alt="" src="./images/photo2.jpg"  id="photo2"/> -->

<input type="image" id="photo1" alt="" src="./images/photo1.jpg"  />
<input type="image" id="photo2" alt="" src="./images/photo2.jpg"  />
<script type="text/javascript">

 $("#photo1").click(function(){
	 //alert('on click');
	$("#photo1").attr("class","style1");
 });
 

 $("#photo2").click(function(){
	 //alert('on click');
	$("#photo2").attr("class","style1");
 });
</script>


<br/><br/>
<h1>Room image</h1><br/><br/>
마우스 커서가 이미지 위로 이동하면, 이미지 변경 <br/><br/>

<img alt="" src="./images/b_pic1.jpg" id="photo4"/>

<script type="text/javascript">

$("#photo4").ready(function () {
	//alert('photo4');
	$("#photo4").mouseover(function () {
		$(this).attr("src","./images/b_pic2.jpg");
	});
	
	$("#photo4").mouseout(function () {
		$(this).attr("src","./images/b_pic1.jpg");
	});
	
});


</script>



</body>
</html>

work2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Insert title here</title>

</head>
<body>

<img alt="성 자비에르 성당(외관)" src="./images/img01.jpg" id="photo1">
<img alt="성 자비에르 성당(내관)" src="./images/img02.jpg" id="photo2">
<img alt="낡은 건물" src="./images/img03.jpg" id="photo3">
<img alt="가로등" src="./images/img04.jpg" id="photo4">

<script type="text/javascript">

//이렇게 쓰는 방법 알아오기 
$("img").click(function(){
	let picture_name = $(this).attr("picname");
	alert(picture_name);
});

/*
$("#photo1").click(function(){
	 alert('성 자비에르 성당(외관)');
});

$("#photo2").click(function(){
	 alert('성 자비에르 성당(내관)');
});

$("#photo3").click(function(){
	 alert('낡은 건물');
});

$("#photo4").click(function(){
	 alert('가로등');
});
*/

</script>
</body>
</html>

work3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<h1> image insert/remover</h1><br/><br/>

<img alt="" src="./images/photo_1.jpg" class="photo1">
<img alt="" src="./images/photo_2.jpg" class="photo1">
<img alt="" src="./images/photo_3.jpg" class="photo1">
<img alt="" src="./images/photo_4.jpg" class="photo1">
<img alt="" src="./images/photo_5.jpg" class="photo1">
<img alt="" src="./images/photo_6.jpg" class="photo1">
<img alt="" src="./images/photo_7.jpg" class="photo1">
<img alt="" src="./images/photo_8.jpg" class="photo1">
<img alt="" src="./images/photo_9.jpg" class="photo1">


<script type="text/javascript">

$("img").click(function () {
	$(this).remove();
});

</script>

<!-- 이미지를 추가하고 숨기는 또다른 방법 -->
<div class = "pic"></div>

<script type="text/javascript">
$(document).ready(function () {
	
  for (var i = 1; i < 10; i++) {
	

	let image = $("<img>").attr("src", "./images/photo_" +i +".jpg");
	$(".pic").append(image); //이미지 추가 
  }
  $("img").click(function () {
	$(this).hide();
})
});

</script>
</body>
</html>

실무 사용 우편 번호 취득 사이트

http://postcode.map.daum.net/guide

Kakao 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Kakao 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.kakao.com

오픈소스 도로명주소 검색 API - Postcodify

Postcodify는 도로명주소 우편번호 검색 기능을 제공하는 오픈소스 라이브러리입니다. 어느 웹사이트에나 간단하게 적용할 수 있는 무료 API를 제공합니다.

www.poesis.dev

[수강일지 38] view

jamk-diary — Thu, 2 Jul 2026 17:52:15 +0900

Sample 3

view one 으로 이동해서 버튼들 클릭하면 기능 실행되게 만들수 있다

viewOne

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>viewOne</title>
</head>
<body >

<h1>viewOne</h1>

<a href="./viewTwo.html">view two로 이동</a>


<script type="text/javascript">

	document.bgColor="#ff0000"; //배경변경

	
	
</script>
</body>
</html>

viewTwo

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body bgcolor="green">
<h1>viewTwo</h1>

<input type="button" value="이전으로" onclick="history.back()"/>

<input type="button" value="페이지 갱신" onclick="location.reload()">

<input type="button" value="(이동했던 페이지)진행" onclick="history.forward()" >

<input type="button" value="view three로 이동" onclick="goPage()"/>  <!-- 함수사용 -->

<script type="text/javascript">
function goPage() {
	location.href = "viewThree.html";
}

</script>
</body>
</html>

viewThree

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>viewThree</h1>
</body>
</html>

sample 4

웹페이지에서 사용자한테 입력받기
제대로 된 값 입력 안 하면 경고창 띄우기
입력 받은 값 콘솔창으로 가져 오기

deafultmove 누르면 페이지 이동하면서 콘솔창에 기본 값 가져온다

이유 : <a href="default.jsp?name=홍길동&age=24"> default move</a> 코드 작동

빈칸에 입력하면

이동하면서 콘솔창에 입력한 값이 뜬다

세번째 내용

이름 입력 안 하면 경고창 뜨게 만들기

이름 제대로 입력 안하면 경고창

이름 나이 정확하게 입력해야 콘솔창 에 값을 가져올 수 있다

default.jsp

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

    <%
    //이름 나이 넘겨줄 수 있게 만들기 
    	String name = request.getParameter("name");
    
    	int age = Integer.parseInt(request.getParameter("age"));
    
    
    	System.out.println("이름 : " +name);
    	System.out.println("나이 : " +age);
    %>

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 

	link 
	
	Html
	
	//차이점 
	<a href= "Url"		->  단독 사용 묶을 수 없음
	<form action=""     -> <form></form>으로 묶어 줄 수 있다 
	
	java Script
	location.href = ""
	

 -->
 
 <a href="default.jsp?name=홍길동&age=24"> default move</a>
 <br/><br/>
 
 <hr/>
 
 <form action ="default.jsp">
 	<input type="text" name="name" placeholder="이름"/><br/>
 	<input type="text" name="age" placeholder="나이"/><br/>
 	<input type="submit" value="default move"/>
 </form>
 
  <br/><br/>
 
 
  <hr/>
 자바 스크립트 방식
 <br/><br/>
 <input type="text" id="name" placeholder="이름"/><br/>
 <input type="text" id="age" placeholder="나이"/><br/>
 <button type="button" onclick="move()">default move</button>
 
 <script type="text/javascript">
 function move() {
	let name=document.getElementById("name").value;
	let age=document.getElementById("age").value;
	
	//검사하게 만들 수 있음 = 빈칸일 때 진행 못하게 
	//자바 스크립트는 제대로 된 값을 (사용자가 원하는 값을 유저한테 받아서 콘솔로 가져올 수 있게 해 준다 
	if(name.trim() ===''){
		alert('이름을 입력해 주십시오');
		return;
	}
	if(name.trim().length <2){
		alert('이름을 정확히 입력해 주세요');
		return;
		
	}
	location.href = "default.jsp?name=" + name + "&age=" +age;
 }
 
 </script>

</body>
</html>

Sample5

마우스 동작에 따른 이벤트 발생하게 만들기

index

<!-- onxxx -->
<!-- 							handle 처리 -->
<!--  
<button type="button" onclick="func()">button</button>

<script type="text/javascript">
function fun() {
	//핸들링 -> event 에 대한 처리 
}

</script>
-->


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body onload="load()">

<!-- 
	onload (초기값 설정할 때 사용)
 	개발자 도구 콘솔창 가면 확인 가능 
 -->
 
<script type="text/javascript">
	function load() {
	console.log('onload 실행');
	}	
</script>



<!-- 
	onclick
	버튼 클릭하면 console.log('button click'); 문구 개발자 도구 콘솔 확인 가능
	
 -->
 
 
<button type="button" onclick="func()">button</button>
 
 <script type="text/javascript">
 function func() {
	console.log('button click');
}
 
 </script>
 
 <br/> <br/>
 
 <!-- 
 	onblur:커서의 포커스가 이동 
 	 빈칸에 커서 올렸다가 다른데 누르면 콘솔창 console.log('onblur실행');   출력
 
 -->
 name: <input type="text" onblur="isRegName()" size = "10"/><br/>
  <script type="text/javascript">
  function isRegName() {
	console.log('onblur실행');
}
  </script>
  
  
   
 <br/> <br/>
  
 
 
 <!--
  onchange:입력된 값이나 선택된 값이 변경되었을 때 실행 되는 것
  (=valueChange)라고 아이폰 쪽에서는 부른다
 
 
  -->
 
 우편 번호 만들기 
 T: <input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
 -<input type="text" size="5" maxlength="3" onchange="isPostNum(this)">
 
 <script type="text/javascript">
 
 //isPostNum 에는 인풋값이 들어오게 만들기  
 function isPostNum(input) {
	//let post = document.getElementById('post').value; - 방법 1 
	let value = input.value;   //-> 객체를 통으로 가져와서 넣는 방법 2
	//alert(value);
	//alert(input.type);  -> 경고창에 input type 값 가져온다
	
	//숫자가 아닌 문자가 포함되어 있을 경우 
	if(value.match(/[^0-9]/g)){
		alert('숫자가 아닌 문자가 포함되어 있습니다');
	}
}
 </script>
 
 
  <br/> <br/>
  
  
  <select onchange="valueChange()">
 
  	<option>영화보기</option>
  	<option>그림그리기</option>
  	<option>게임하기</option>
  </select>
  
  <script type="text/javascript">
  function valueChange() {
	alert('valueChange()');
}
  
  </script>
  
    <br/> <br/>
  
  <!-- onKeydown. onkeypress 
  텍스트창에 문자 입력하고 빈곳 누르면 콘솔창에 키코드 넘어온다 -->
  <input type = "text" name="title"/>
  
  <script type="text/javascript">
 
  /*
  document.getElementsByName("title")[0].onkeydown = function (event) {
		console.log("keycode:" +event.keyCode);} */
  
		//onkeypress를 써서 다른 키 코드 값이 나온다 
  document.getElementsByName("title")[0].onkeypress = function (event) {
		console.log("keycode:" +event.keyCode);}
  
  </script>
  
  <!-- onMouseDown, onMouseup, onMouseOver, onMouseOut -->
  <input type="image" src="./images/san0.gif" 
   onmousedown="mousedown(this)"
   onmouseup="mouseup(this)"
   onmouseover="mouseover(this)"
   onmouseout="mouseout(this)"/>
   
   
   <script type="text/javascript">
   function mousedown(input) {
	input.src = "./images/san1.gif";
}
   
   function mouseup(input) {
	   input.src = "./images/san0.gif"
}
   
   function mouseover(input) {
	   input.src = "./images/san2.gif"
}
   
   function mouseoutin(put) {
	   input.src = "./images/san0.gif"
}
   
 
   </script>
   
   
     <br/><br/>
   
   <a href = "#" onmouseover="document.box.src='./images/surprise.gif'"  
   			     onmouseout="document.box.src='./images/box.gif'"> <!-- 마우스가 떠나면 박스 이미지 보이게 만들기 마우스가 올라오면 gif 이미지 보이게 만들기   -->    
   		<img alt="" src="./images/box.gif" name="box" />		<!-- 사용자한테 가장먼저 기본으로 보이는 이미지 -->     
   			     
  </a>
 
 
 
</body>
</html>

sample 6

유저가 버튼을 누르면 경고창에 문장입니다 출력하게 만들기

유저가 셀렉트로 선택한 걸 콘솔창에 띄우기

유저가 추가 버튼 누르고 누른 걸 웹페이지에 출력해주기

<!DOCTYPE html>
<html> <!-- root tag -->

	<head> <!-- html child node -->
		<meta charset="UTF-8">
		<title>Insert title here</title>
	</head>

	<body><!-- html child node -->
		
		<!-- body child node -->
		<h3 id ="intro">제목입니다</h3>
		
		<p id ="demo"> 단락입니다</p>
		
		<button type="button" onclick="func()">버튼 </button>
		
		<script type="text/javascript">
			function func() {
				//let intro = document.getElementById('intro').innerHTML;
				let intro = document.getElementById('intro').childNodes[0].nodeValue;
				alert(intro);
			}
		
			
		
		</script>
		
		<br/> <br/>
		
		<select id="car"> <!-- 0번찌 -->
		 <option value=""><!-- 1번찌 -->벤츠</option>  <!-- 4번찌 -->
		 <option>아우디</option>
		 <option>현대</option>
		</select>
			
			
			<button  type = "button" onclick="car()">선택</button>
			
			
			<script type="text/javascript">
				function car() {
					let mycar=document.getElementById("car").childNodes
					//alert(mycar.length);
					alert(mycar[4].text);
				}
			
			</script>
			
			<pre>
			엉뚱하게 7이 나오는 이유 
			
			
			제공해주신 코드에서 
			document.getElementById("car").childNodes를 통해 가져오는 
			childNodes는 HTML 태그(요소)뿐만 아니라 태그 사이의 공백, 줄바꿈(텍스트 노드), 
			그리고 주석까지 모두 포함합니다.
			</pre>
			
			<!-- 추가 버튼 누르면  
				let textNode = document.createTextNode("welcome"); 출력 되게 만들기 
			-->
			
			<div id="div1">
				<p id="p1">Hello</p>
				<p id="p2>">World</p>
			</div>
			
			
			<button type="button" onclick="append()">추가</button>
			
			<script type="text/javascript">
			
				function append() {
					let p_tag = document.createElement("p");
					//p_tag.innerHTML = "WELCOME";
					let textNode = document.createTextNode("welcome");
					p_tag.appendChild(textNode);
					
					let div1 = document.getElementById("div1");
					div1.appendChild(p_tag);
				}
			
			</script>
			
			
			
			
			
			
			
			
	</body>

</html>

work

work 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	table { border: 2px;
			border-style: solid;
				
}

table, th, td{
		border-style: solid;
		border-width: 3px;
		border-color: purple;	
		
	}
</style>
</head>
<body>

<h1>배열의 연산</h1>
<table>
	<thead>
	 	<tr>
	 		<th>첨자</th> <th>a</th> <th>b</th> <th>a*b을 계산</th>
	 	</tr>
	</thead>
	
	<tbody>
		<tr>
			<th>0</th> 
			<td>5</td> <td >33</td> 
			<td> <input type="button" value="계산결과"  onclick="one()"> </td>
		</tr>
		
		<tr>
			<th>1</th> 
			<td>12</td> <td>14</td> 
			<td><input type="button" value="계산결과"  onclick="two()"></td>
		</tr>
		
		<tr>
			<th>2</th> 
			<td>18</td> <td>65</td> 
			<td><input type="button" value="계산결과"  onclick="three()"></td>
		</tr>
		
	</tbody>
</table>

	<script type="text/javascript">
		
	function one() {
		let a = document.getElementsByTagName("td")[0].innerHTML;
		let b = document.getElementsByTagName("td")[1].innerHTML;
		
		let result= a*b;
		
		alert(result);		
			
		}
	function two() {
		let a = document.getElementsByTagName("td")[3].innerHTML;
		let b = document.getElementsByTagName("td")[4].innerHTML;
		
		let result= a*b;
		
		alert(result);
		
			
		}
	function three() {
		let a = document.getElementsByTagName("td")[6].innerHTML;
		let b = document.getElementsByTagName("td")[7].innerHTML;
		
		let result= a*b;
		
		alert(result);
		
			
		}
	
	</script>




</body>
</html>

work 2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1> 단가 * 수량 알람표</h1>
<table border = "1" >
    <thead>
        <tr>
            <th>갯수 </th>  <th>제품a</th>  <th>제품 b</th> <th> 제품 c</th>
        </tr>
    </thead>
    <tbody id ="tbody"></tbody>
</table>

<script type="text/javascript">
// 1. 단가 변수들을 스크립트 태그 안으로 이동시켰습니다.
let a = 300;
let b = 450;
let c = 520;

let tbody = document.getElementById("tbody");


//       <반복문을 통한 tr , th 만들기>
// 2. array.length 대신 갯수를 몇 번 반복할지 숫자를 지정해줍니다. (예: 1개부터 5개까지)
// 변수 i가 곧 '갯수'가 됩니다.
for (let i = 1; i <= 10; i++) {
    
    let tr = document.createElement("tr"); // tr 태그 블록 생성
                                           //let tr 이라는 변수를 만들어 = 여기에 요소를 넣을 건데 html 에서 tr 태그 블록과 같은 형식으로 만들어 라는 뜻

    // 3. <th> 태그에 현재 갯수(i)를 넣어줍니다.
    let th = document.createElement("th");  
    th.innerHTML = i;                      //우리가 10전까지만 만들게 했으니까 i 가 포문 통해서 10전까지 반복하는 동안 t h 태그 블록을 계속 생성하게 만든것 
    
    // 4. 각 제품별로 [단가 * 갯수]를 계산하여 원을 붙여줍니다.
    //createTextNode 공장 자체는 수학 계산을 할 줄 모릅니다. (글자만 다루는 공장이에요!)
	//자바스크립트라는 똑똑한 비서가 공장에 재료를 넘겨주기 전에 괄호 안을 미리 싹 계산해서 완성품으로 전달해 주기 때문에 코드 안에서 저런 계산이 가능했던 거랍니다!

    let td1 = document.createElement("td");
    td1.appendChild(document.createTextNode((a * i) + "원"));  

    let td2 = document.createElement("td"); 
    td2.appendChild(document.createTextNode((b * i) + "원"));  

    let td3 = document.createElement("td");
    td3.appendChild(document.createTextNode((c * i) + "원")); 

    // 5. 생성한 태그들을 조립하여 표(tbody)에 넣습니다.
    //내가 만든 HTML 부품을 어딘가에 집어넣고 싶을 때는 언제나 appendChild를 사용하시면 됩니다.
    //나는 th 부품을 tr 에 넣을 거야 
    //tr 은 자바 스크립트 안에서 선언한 let tr이야 
    
    tr.appendChild(th);
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    //html에서 사용한 id는 어디로든 문이야 그래서 서로 연결되어 있어 
    //let tbody 쓰고 도큐먼트.겟일러먼트파이 아이디로 html id 가져와서 사용할 수 있었어 이제 선언 안해도 사용할 수 있게 된거야 
    tbody.appendChild(tr);
}
</script>
</body>
</html>

work3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h2>(문제)</h2>

<h2>사나이들의 영화인 탑건은 군인 영화입니다. 그러면 육군, 해군, 공군 중 어느 군의 영화일까요? </h2>

<br/>

<input type="button" value="답을보다" onclick="btnclick()"  >

<br/><br/>


 * 버튼을 한 번 클릭하면 힌트가 표시됩니다. 
 * 버튼을 두 번 클릭하면 답이 표시됩니다. 
 
 
 
<script type="text/javascript">
 let loop=0; //변수 선언  -> "컴퓨터에게 '지금 버튼을 몇 번째 누른 상태인지' 기억하게 만들려고"
 //온클릭을 할 때마다 컴퓨터는 계속해서 자꾸 까먹으니까 변수 상자를 만들어서 몇 번 클릭 했는지 인식하게 만들려고 하는 거

 	function btnclick() {
 		
 		if(loop ==0){
 			alert('힌트');
 		    loop = 1 ;
 		}
 		
 		else if (loop ==1) {
 			alert('해군이지롱');
 		    loop = 2;
		}
 	
 		/*
 		아 위에서부터 실행해서 힌트 경고창으로 띄워주고 루프를 1로 바꾼 것

1. 웹페이지에서 클릭하고 경고창으로 힌트 뜬다
2. 다시 돌아오면 거기다가 1을 더해서 2번째인 정답이 출력되게 만든거지?		
 		
 		
		lf 랑 else if 사용 
		
		 클릭 한 번 했을 때는 조건문으로 들어와서 힌트 경고창 띄우기 실행하고 그 다음 준비 상태가 되는데 else if로 두 번째 클릭을 만들게 되니까
 		*/
	}

</script>
</body>
</html>

work 4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1> 문제 </h1>
<h1> 다음 이차 방정식을 해를 구하고 , 그 버튼을 클릭하십시오  </h1>

<br/> 

<h1> x<sup>2</sup> -5x =-6</h1> <!-- 제곱 사용법 x^2 쓰고 싶으면 <sup> 태그 사용하기  -->

<br/>
 
<button type="button" onclick="result(1)">x=1</button>
<button type="button"  onclick="result(2)">x=2</button>
<button type="button"  onclick="result(3)">x=3</button>
<button type="button"  onclick="result(4)">x=4</button>
<button type="button"  onclick="result(5)">x=5</button>
<br/><br/>
답은 두 개얌 
<script type="text/javascript">

	
	//Math -> java 내장 함수 : 수학 전용 계산기 객체 : 야 계산기 불러와 하고 입력하는 명령 
	//어떤 숫자의 제곱근을 구해야 한다 -> 자바스크립트에서는 Math.sqrt() 사용하기 
	//let answer1 = (-b +Math.sqrt(b * b -4 *a*c))
	
	//하지만 나는 구냥 답 선택하게 할 거지롱 -2 랑 -3이 정답이양
	
 function result(x) {
	
		let re = Math.pow(x,2) - (5*x);
		if(re === -6){
			
			 alert("정답");
		}
		else{
			alert("오답");
		}
}
	

</script>
</body>
</html>

work 5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
 table { border: 2px;
 	     border-style:solid;
	
}

table, th, td{
		border-style: solid;
		border-width: 3px;
		border-color: purple;	
		
	}
</style>
</head>

<body>
<h1>포털 사이트 </h1>
"열기 "버튼 클릭하면 홈페이지 새창 열기 
<table>
 	<tr>
 		<th>네이버</th> 
 		<td>https://www.naver.com/</td> 
 		<td><input type="button" value="열기 " onclick="naver()"></td>
 	</tr>
 	
 	<tr>
 		<th>다음</th> 
 		<td>https://www.daum.net/</td> 
 		<td><input type="button" value="열기 " onclick="daum()"></td>
 	</tr>
 	
 	<tr>
 		<th>줌</th> 
 		<td>https://zum.com/</td> 
 		<td><input type="button" value="열기 " onclick="zum()"></td>
 	</tr>
 	
 	
</table>



<script type="text/javascript">

function naver() {
	 location.href="https://www.naver.com";
	
}

function daum() {
	 location.href="https://www.daum.net/";
	
}

function zum() {
	 location.href="https://zum.com/";
	
}

</script>








</body>
</html>

work 6

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
body{
	background-color: #000;
	color: #fff;
}
</style>

</head>
<body>

<h1>사진들</h1>

<div align="center">
<table>
<tr>
	<td>
		<img alt="" name="out" src="./img/c.jpg" width="260" height="440" border="5"/>
	</td>
	<td valign="top" style="padding-left: 20px">
		사진의 선택<br/>
		<form name="frm">
			<select name="picture" onchange="pictureChange()">
				<option>사진의 선택</option>
				<option value="./img/c.jpg">건물복도</option>
				<option value="./img/d.jpg">성당안</option>
				<option value="./img/e.jpg">성당밖</option>
				<option value="./img/a.jpg">메이지건물</option>
			</select>
		</form>
	</td>
</tr>
</table>
</div>

<script type="text/javascript">
function pictureChange() {
	let index = document.frm.picture.selectedIndex;
	//alert(index);
	
	if(index !== 0){
		document.out.src = document.frm.picture.options[index].value;
	}
}

</script>

</body>
</html>

부트스트랩, w3

jamk-diary — Wed, 1 Jul 2026 19:37:38 +0900

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

https://getbootstrap.com/

Bootstrap

Powerful, extensible, and feature-packed frontend toolkit. Build and customize with Sass, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

getbootstrap.com

javascript 과제

jamk-diary — Tue, 30 Jun 2026 18:27:03 +0900

과제: "나만의 미니 주소록" 만들기

목표: HTML 화면에 입력창을 만들고, 자바스크립트로 데이터를 관리하여 화면에 보여주는 프로그램을 작성해 보세요.

[단계별 힌트]

1단계: HTML 구성하기

이름을 입력할 수 있는 <input> 태그와 '추가하기' <button> 태그를 만드세요.
결과가 출력될 빈 <ul id="addressList"> 태그를 하나 만들어 두세요.

2단계: 데이터 저장하기 (배열)

전역 변수로 빈 배열 let myAddressBook = [];을 하나 선언하세요.
버튼을 클릭했을 때 실행될 함수를 만들고, 그 안에서 input에 적힌 값을 가져와 배열에 추가해 보세요.

3단계: 화면에 그리기 (DOM)

배열에 데이터가 추가될 때마다, document.createElement("li")를 사용해서 새로운 목록 태그를 만드세요.
만들어진 li 태그의 innerHTML에 배열의 값을 넣고, addressList의 자식 요소로 붙여보세요 (appendChild 사용).

4단계: 객체로 업그레이드 (클래스/JSON)

단순히 '이름'만 넣지 말고, name과 age를 묶어서 하나의 객체(또는 클래스)로 배열에 저장해 보세요.
화면에 출력할 때도 "이름: 00, 나이: 00" 형태로 예쁘게 나오게 해보세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="text" id="name" placeholder="이름 입력" size="20">
	<input type="number" id="age" placeholder="나이 입력" size="20">
	
	<button type="submit" onclick="btclik()">제출</button>

<!-- 결과 쌓기 -->
 	<ul id="listArea"></ul>
 	
 <script type="text/javascript">
 let address =[];
 
 function btclik() {
	 let name=document.getElementById("name").value;
	 let age=document.getElementById("age").value;
	console.log('name');
 	

	let human ={
			"humanname":name,
			"humanage" :age		
	}
	
	address.push(human);
	
	let li = document.createElement("li");
	li.innerHTML = "이름: " + name + ", 나이: " + age;
	document.getElementById("listArea").appendChild(li);
 };
	
	
	
 
 function push() {
	
}
 </script>

</body>
</html>

[수강일지36] 자바 스크립트

jamk-diary — Tue, 30 Jun 2026 18:23:26 +0900

Javascript 서버 설정

Sample1 <internal , external>

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- internal -->
<script type="text/javascript">
</script>

<!-- external -->
<script type="text/javascript" src=""></script>

</head>

<body>

<!-- 
		Java Script 
		Script(대본) 란 실행되는 명령어들의 모음 
		-> 다른 프로그램이나 환경 위에서 실행되는 코드
		
		운영체제(Windows, 리눅스, iOS) 위에서 실행되는 shell script
		웹 브라우저에서 실행되는 Java script
		응용 프로그램에서 실행되는 macro script  
		
		Client 언어. front-end
		목적: html 상에 tag 에 접근하기 위한 스크립트
			 보조 프로그래밍적인 요소이다
			 화면을 제어하기 위한 스크립트이다
			 compile을 하지 않는다 -> 가볍다 -> 속도가 빠르다	
			 
		ex) 회원가입 -> 	id가 빈칸?
						id의 문자수 제한	
						link를 제어할 수 있다
						
		JavaScript 간략화 -> Jquery -> angler -> node.js -> react -> vue
		
		Animation 처리, Timer, Camera 연결		
		STT(Speech To Text), TTS(Text To Speech)
		
		tag(input, button..) 접근 -> property(속성) == attribute
		id		-> javascript -> 1개 유효
		class	-> 다수
		name	-> 다수 -> link로 이동 시에 값을 전달
		
		각 태그에 접근하기 위한 객체
		DOM(Document Object Model)
		해당 문서(html document)에 접근해서 읽고 조작할 수 있는 API(Application Programming Interface) 
		getElementById
		getElementsByClass
		getElementsByName
		getElementsByTagName
				
		internal : 내부구현 <head> <body>
		
		external : 외부파일		
 -->

<!-- internal -->
<script type="text/javascript">
// java script 영역(area)

/*
	범위 주석문
*/

// 콘솔 출력
console.log('Java Script 실행');

// 경계창
//alert("경계창 실행");
//window.alert('')

// 입력창
//var v = prompt("문자열 입력");
//console.log(v);

</script>


<p id="demo">안녕하세요 <b>반갑습니다</b></p>

<script type="text/javascript">
// DOM 을 이용해서 태그 접근

var v = document.getElementById("demo").innerHTML;  // getter
console.log(v);

document.getElementById("demo").innerHTML = "Hello JS"; // setter

</script>



</body>
</html>

1. 자바스크립트(JavaScript)란 무엇일까?

우리가 웹 페이지를 만들 때, HTML이 건물의 '뼈대'라면 자바스크립트는 건물에 생명을 불어넣는 '전기나 수도 시스템' 같은 존재예요.

웹 브라우저에서 실행: 우리가 흔히 쓰는 크롬(Chrome) 같은 브라우저 안에서 움직여요.
화면 제어: 사용자가 버튼을 눌렀을 때 반응하게 하거나, 글자를 바꾸는 등 화면을 살아 움직이게 만들죠.
가볍고 빠름: 코드를 미리 복잡하게 변환(컴파일)할 필요가 없어서 아주 빠르고 효율적이에요.

2. HTML과 대화하는 방법: DOM

자바스크립트는 브라우저에 있는 HTML 태그들을 직접 다룰 수 있어요. 이걸 DOM(Document Object Model)이라고 부릅니다.

Getter(가져오기): document.getElementById("demo").innerHTML처럼 사용하면, "demo라는 아이디를 가진 태그의 내용을 가져와!"라는 뜻이에요.
Setter(설정하기): 가져온 자리에 새로운 값을 넣으면 화면에 보이는 내용이 즉시 바뀝니다. 마치 마법 지팡이로 화면의 글자를 슥삭 바꾸는 것과 같죠!

3. 데이터를 담는 그릇: 변수(Variable)

프로그래밍에서 가장 중요한 것 중 하나가 바로 '데이터를 저장하는 것'이에요. 이를 변수라고 합니다.

var / let: 데이터를 담는 상자예요. 예를 들어 let age = 22;라고 하면 "age라는 상자에 22라는 숫자를 담을게!"라는 뜻입니다.
const: 이건 '상수'라고 해요. 한 번 값을 넣으면 절대 바꿀 수 없는 강력한 상자죠. (예: const address = "제주시";)
배열(Array): 여러 개의 데이터를 한 줄로 세워두고 싶을 때 사용해요. [ ] 대괄호를 이용해 cars = ["benz", "bmw", "audi"]처럼 표현합니다.

index1 ( 자바스크립트가 데이터를 다루는 방식과 객체 지향적인 요소들을 어떻게 사용하는지 보여주는 예제)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<script type="text/javascript">
// variable(변수)
/*
	integer, String, Character, MyClass, HumanDto
	
	MyClass cls = new MyClass();
	String str = new String("Hello");
	
	Object cls = new MyClass();
	Object str = new String("Hello");	
	
	Object == var -> let
*/

	var number = 123;	// int
	var pi = 3.141592;	// double
	var name = "홍길동";	// string
	var answer = true;	// boolean
	
	var num = "성춘향";
	console.log(num);
	
	num = 1024;
	console.log(num);	
	
	myname = "일지매";
	console.log(myname);
	
	var myname = "";

	let youname;	
	youname = "성춘향";
	
	var myname = "홍두께";
//	let youname = "";

	// Array : 배열
	// Array == Object
	
//	String cars = new String[3];	
	let cars = new Array(3);
	cars[0] = "benz";
	cars[1] = "bmw";
	cars[2] = "audi";	
	console.log(cars);
	
//	String mycars[] = { "benz", "bmw", "audi" };
	let mycars = ["benz", "bmw", "audi"];	
	console.log(mycars);
	
	for (i = 0; i < mycars.length; i++) {
		console.log(mycars[i]);
	}
	
	for (let i in mycars) {
		console.log(mycars[i]);
	}
	
	for (var i = 0; i < cars.length; i++) {
		if(cars[i] === "bmw"){	// == :reference  === :value
			console.log(i + ":" + cars[i]);
		}
	}
	
	let cars2 = [	["saab", 1],
					["bmw", 2],
					["benz", 3]	];
	console.log(cars2[2][1]);
	
	/*
	Java
	class Human{
		String name;
		int age;
		
		public Human(String name, int age){
			this.name= name;
			this.age = age;
		}
		public print(){
			System.out.println(name + " " + age);			
		}		
	} 	
	*/
	
	// Java Script
	class Human{
		constructor(name, age){
			this.name = name;
			this.age= age;
		}
		print(){
			this.address = "부산시";
			console.log(this.name + " " + this.age);
		}		
	}
	
	let human = new Human("홍길동", 22);
	console.log(human.name);
	human.print();
	console.log(human.address);
	
	// eg6
	let obj = {
			"firstname":"춘향",		// key:value  -> hashmap => JSON
			"lastname":"성",
			"age":15,
			methodName:function(){
				console.log(this.lastname + this.firstname + " " + this.age);
			}			
	};
	
	console.log(obj.firstname);
	console.log(obj.lastname);
	obj.methodName();
	
	//let address;    // <- 변수
	
	const address = "제주시";		// <- 상수 == final String ADDRESS = "제주시";
	// address = "울산시";		// <- error
	
	

</script>

</body>
</html>

var vs let

자바스크립트에서 변수는 자바(Java)처럼 타입을 딱 정하지 않아도 돼요.

유연함: var num = "성춘향"(문자열)이었다가, 바로 다음 줄에 num = 1024;(숫자)라고 넣어도 전혀 문제없어요.
var vs let: var는 예전 방식이고, 요즘은 더 안전한 let을 주로 써요. let은 똑같은 이름의 변수를 다시 만드는 실수를 방지해주거든요.

2. 배열(Array): 데이터를 한 줄로 세우기

배열은 연관된 데이터들을 한 곳에 모아두는 '기차 칸' 같은 거예요.

사용법: cars = ["benz", "bmw", "audi"]처럼 대괄호 [] 안에 쉼표로 구분해서 넣으면 끝!
반복문: for문을 사용하면 기차 칸에 들어있는 데이터를 하나씩 꺼내서 출력할 수 있어요. for (let i in mycars) 같은 방식은 "배열에 있는 모든 걸 하나씩 꺼내줘"라는 아주 편리한 문법입니다.

3. 클래스(Class): 설계도면 만들기

Human 클래스를 만든 부분은 "사람이라는 객체는 이런 정보(이름, 나이)를 가져야 해!"라고 설계도를 그리는 작업이에요.

constructor (생성자): 사람을 새로 만들 때(예: new Human("홍길동", 22)) 기본 정보를 쏙 집어넣는 초기화 작업을 담당해요.
메서드(Method): print()처럼 사람이 할 수 있는 행동을 미리 정의해두고, 필요할 때마다 human.print()라고 불러서 실행하는 거죠.

4. JSON: 데이터를 깔끔하게 묶기

let obj = {"firstname": "춘향", "lastname": "성", "age": 15} 부분은 JSON(JavaScript Object Notation)이라고 해요.

데이터를 키(Key):값(Value) 쌍으로 저장해서, 나중에 obj.firstname처럼 아주 직관적으로 데이터를 꺼내 쓸 수 있게 해줍니다. 요즘 웹 통신에서 가장 많이 쓰는 방식이에요!

5. 상수(const): 변하지 않는 약속

마지막에 const address = "제주시";라고 했죠?

const는 한 번 정하면 절대로 바꿀 수 없는 상수예요. 만약 누군가 address = "울산시"라고 코드를 바꾸려 하면, 브라우저가 "안 돼! 이건 바꿀 수 없는 값이야!"라고 에러를 띄워줍니다. 중요한 정보를 보호할 때 꼭 필요하겠죠?

index2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
#demo{
	background-color: red;
}
</style>

</head>
<body>

<!-- id, class, name -->
<!-- 
		getElementById
		getElementsByTagName
		getElementsByClass
		getElementsByName
 -->

<!-- getElementsByTagName --> 

<p>안녕하세요</p>

<p>반갑습니다</p>

<p><b>건강하세요</b></p>

<script type="text/javascript">
let str = document.getElementsByTagName("p")[0].innerHTML;
console.log(str);

document.getElementsByTagName("p")[0].innerHTML = "나는 문제 없어";

let pTagArr = document.getElementsByTagName("p");
console.log(pTagArr[2].innerHTML);
console.log(pTagArr[2].innerText);

for (var i = 0; i < pTagArr.length; i++) {
	console.log(pTagArr[i].innerText);
}
</script>

<!-- getElementById -->
<!-- 일반 == 출력태그 == label -->
<p id="demo">나는 반드시 성공합니다</p>

<h3 id="demo">나의 장래는 밝습니다</h3>

<script type="text/javascript">
let demo = document.getElementById("demo").innerHTML;
console.log(demo);

document.getElementById("demo").innerHTML = "Never Change My Mind";
</script> 

<!-- 입(출)력태그 -->
<input type="text" id="text" size="20" placeholder="입력" value="초기값"/><br/>

<select id="fruit">
	<option value="apple">사과</option>
	<option value="pear" selected="selected">배</option>
	<option value="banana">바나나</option>
</select>

<br/><br/>

<script type="text/javascript">

let text = document.getElementById("text").value;
console.log(text);

let fruit = document.getElementById("fruit").value;
console.log(fruit);

</script>

<!-- 
	getElementsByClassName
 -->
<input type="text" class="cls" placeholder="이름" value="홍길동"/><br/>

<input type="text" class="cls" placeholder="주소" value="인천시"/><br/>

<input type="email" class="cls" placeholder="이메일" value="hgd@nate.com"/><br/>

<script type="text/javascript">
let address = document.getElementsByClassName("cls")[1].value;
console.log(address);

let human = document.getElementsByClassName("cls");
console.log(human.length);

for (var i in human) {
	console.log(human[i].value);
}
</script>

<!-- name -> checkbox, radio -->
<input type="checkbox" name="hobby" checked="checked"/>picture
<input type="checkbox" name="hobby" checked="checked"/>movie
<input type="checkbox" name="hobby" />game

<script type="text/javascript">
let hobby = document.getElementsByName("hobby");

for (var i = 0; i < hobby.length; i++) {
	console.log(i + " " + hobby[i].checked);
}
</script>

<br/>

좋아하는 과목은?<br/>
<input type="radio" name="lang" value="국어">국어<br/>
<input type="radio" name="lang" value="영어" checked="checked">영어<br/>
<input type="radio" name="lang" value="수학">수학<br/>

<script type="text/javascript">

let value = document.querySelector('input[name="lang"]:checked').value;
console.log(value);

</script>










 






</body>
</html>

1. 태그를 찾는 4가지 방법

자바스크립트가 HTML의 어떤 부분을 고칠지 정하려면 먼저 '찾아야'겠죠?

getElementById: id는 한 문서에 하나만 존재하므로, 딱 하나를 정확히 콕 집어 가져올 때 써요.
getElementsByTagName: <p>나 <div> 같은 태그 이름을 기준으로 다 가져와요. 여러 개가 나오니까 [0]처럼 순번(인덱스)을 붙여서 구체적으로 지정해야 합니다.
getElementsByClassName: 같은 클래스 이름을 가진 애들을 묶음으로 가져와요. 여러 개가 있을 때 자주 쓰이죠.
getElementsByName: 주로 입력 폼(checkbox, radio)에서 같은 이름을 가진 애들을 관리할 때 사용합니다.

2. 읽고 쓰기 (innerHTML vs value)

innerHTML: <p>내용</p>처럼 태그와 태그 사이에 있는 글자를 가져오거나 수정할 때 씁니다.
value: <input type="text">처럼 사용자가 입력창에 적은 값을 가져오거나 수정할 때 씁니다. (이거 정말 자주 쓰이니 꼭 기억하세요!)

3. 반복문으로 묶음 관리

getElementsByTagName이나 ClassName으로 가져오면 여러 개가 한꺼번에 담긴 '배열' 형태가 됩니다. 이때 for문을 사용하면 모든 태그를 하나씩 꺼내서 내용을 확인하거나 일괄적으로 변경할 수 있어요.

4. querySelector (고급 팁)

코드 마지막에 보면 document.querySelector('input[name="lang"]:checked')라는 게 있죠? 이건 CSS 선택자처럼 문법을 써서 "특정 조건을 만족하는 딱 하나"를 아주 똑똑하게 찾아내는 방법이에요. 요즘 실무에서는 이 방법을 가장 많이 씁니다!

index3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- event -->

<p onclick="alert('p click')">여기가 p 태그입니다</p>

<!-- 버튼을 클릭했을 때 입력된 값을 가져 오고 싶은 경우 -->
<input type="text" id="memo" placeholder="입력"/>

<button type="button" onclick="buttonClick()">버튼</button>

<script type="text/javascript">
function buttonClick() {
	// alert('buttonClick() 호출');
	
	let memo = document.getElementById("memo").value;
	
	document.getElementsByTagName("p")[0].innerHTML = memo;
}
</script>



</body>
</html>

1. 이벤트(Event): "무언가 일어났을 때!"

웹 페이지에서 사용자가 하는 모든 행동(클릭, 마우스 올리기 등)을 이벤트라고 불러요.

onclick: HTML 태그에 직접 "이걸 클릭하면~"이라는 명령을 심는 방식입니다. 예제에 있는 <p onclick="alert('p click')">은 사용자가 그 문구를 클릭하는 순간 브라우저가 'p click'이라는 경고창을 띄우게 하죠.

2. 함수(Function): "명령어 묶음"

코드가 길어지면 하나하나 실행하기 번거롭겠죠? 그래서 자주 쓰는 코드들을 상자에 담아두고 이름을 붙여놓은 것이 바로 함수입니다.

function buttonClick() { ... }: 여기서는 buttonClick이라는 이름의 상자를 만들고, 그 안에 "입력창의 값을 가져와서 글자를 바꿔라"는 명령어를 담아둔 거예요.
효과: 버튼을 누를 때마다 일일이 복잡한 코드를 적을 필요 없이, "클릭되면 buttonClick() 함수를 실행해!"라고 한마디만 하면 됩니다.

3. 실시간 화면 제어

이 예제의 핵심은 사용자의 입력을 화면에 반영하는 과정이에요.

가져오기 (Getter): let memo = document.getElementById("memo").value;
- id가 "memo"인 입력창을 찾아서, 그 안에 적힌 값(value)을 memo라는 변수에 저장합니다.
보내기/수정 (Setter): document.getElementsByTagName("p")[0].innerHTML = memo;
- 화면에 있는 첫 번째 <p> 태그([0])를 찾아서, 그 안의 내용을 방금 저장한 memo 값으로 싹 바꿔버리는 거죠!

WORK 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<div align="center">
<!-- <img alt="taiti" src="./images/tahiti01.jpg" onclick="alert('타히티 사진입니다')"/> -->
<img alt="taiti" src="./images/tahiti01.jpg" onclick="btnClick()"/>
</div>

<script type="text/javascript">
function btnClick() {
	alert('tahiti 사진입니다');	
}

</script>


</body>
</html>

WORK2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>한국에서 제일 높은 산은?</h3>
답:<input type="text" id="answer" placeholder="정답입력" size="20"/>

<button type="button" onclick="btnClick()">답하다</button>
<input type="button" onclick="btnClick()" value="답하다" />
    
<script type="text/javascript">
function btnClick() {
	let answer = document.getElementById("answer").value;
	if(answer === ""){
		alert("정답을 기입해 주십시오");
	}else if(answer === '한라산'){
		alert('정답입니다');
	}else{
		alert('정답이 아닙니다');
	}
}

</script>

</body>
</html>

WORK3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h3>변수의 연산</h3>
a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.
<br/><br/>
<button type="button" onclick="plus()">덧셈</button>
<button type="button" onclick="minus()">뺄셈</button>
<button type="button" onclick="multi()">곱셈</button>
<button type="button" onclick="div()">나눗셈</button>
<button type="button" onclick="rest()">나머지</button>
<br/><br/>

<input type="text" id="a" size="10" placeholder="a"/>
<input type="text" id="oper" size="5" disabled="disabled"/>
<input type="text" id="b" size="10" placeholder="b"/>
=
<input type="text" id="result" size="10" disabled="disabled"/>

<script type="text/javascript">
let a, b;

function getValue() {	
	let val = document.getElementById("a").value.trim(); 	
	// 빈칸인지 조사
	if(val === ''){
		alert('값을 입력해 주십시오');
		return;
	}	
	// 숫자인지 조사
	if(isNaN(val) === true){	// Not A Number
		alert('숫자를 입력해 주십시오');
		return;
	}
	
//	a = parseInt(document.getElementById("a").value);
//	b = parseInt(document.getElementById("b").value);
	
	// 소수점 수까지 가능
	a = Number(document.getElementById("a").value);
	b = Number(document.getElementById("b").value);	
}

function plus() {
	getValue();	
	document.getElementById("oper").value = "+";
	document.getElementById("result").value = a + b;
}

function multi() {
	getValue();	
	document.getElementById("oper").value = "x";
	document.getElementById("result").value = a * b;
}

function div() {
	getValue();	
	
	if(b === 0){
		alert('0으로 나눌 수 없습니다');
		return;
	}
	document.getElementById("oper").value = "/";
	document.getElementById("result").value = a / b;
}

</script>

</body>
</html>

WORK4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>체육관 이용 요금</h1>
기본 사용료(4시간) 40,800원
<br/><br/>

<input type="checkbox" id="ch1" onclick="sum(0)" value="20000">야간조명(20,000원)
<br/>
<input type="checkbox" id="ch2" onclick="sum(1)" value="4000">배구네트 x 2장(4,000원)
<br/>
<input type="checkbox" id="ch3" onclick="sum(2)" value="5000">배구공 x 10(5,000원)
<br/><br/>
합계금액:<input type="text" id="total" value="40800">원정

<script type="text/javascript">
let total = parseInt(document.getElementById("total").value);

function sum( n ) {
	
	let ch;
	if(n == 0) 		ch = 'ch1';
	else if(n == 1) ch = 'ch2';
	else if(n == 2) ch = 'ch3';
	
	let value = parseInt( document.getElementById(ch).value );
	// alert(value);
	
	// checked
	let state = document.getElementById(ch).checked;
	//alert(state);
	
	if(state == true){
		total = total + value;
	} else{
		total = total - value;
	}
	
	document.getElementById("total").value = total;
}


</script>


</body>
</html>

[수강일지33] css

jamk-diary — Thu, 25 Jun 2026 18:51:37 +0900

index

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>


<h2>in-ternal 방식 <br/>
 :head 안에 적는 방식 st 만 치고 컨+스 하면 자동 완성 </h2>
<style type="text/css">
p{
	background-color: red;

}



</style>

<!-- external : css 파일 만든 다음에 입력함 : 외부파일에서 스타일을 불러오기  -->
<link rel="stylesheet" href="style.css"/>


</head>


<body>
<pre>
	CSS(cascading Style sheet )
	:tag 에 디자인을 입히는 것 = 디자인

	문자의 컬러 , 종류, 배경
	배경화면을 설정 (layout:화면구성) -> 시멘틱 tag
	이미지 load, 테두리(border) 설정
	
	attribute(속성= 주제) -> property(상세설정)
	       style 		   background-color
	       
	      방식 
	      inline :  tag 안에 기입 ->  <p style="background-color: white">
	      internal: head 안에 기입 
	      external: 외부 파일로 저장하고 불러오기 
	    
</pre>	      


<h3>in-line 방식</h3>
<h3 style="background-color: blue">welcome to my world</h3>

<p style="background-color: #00ff00">i can do it</p>

<h3>in-ternal 방식  사용 후 p 태그 사용해서 적어보기 </h3>
<p>hello css<p>
<h3>위를 통해 알 수 있는 것 : title 쪽에 인터널 방식을 사용해도 나중에 적은 인라인 방식이 먼저 적용된다</h3>

<h3> external 방식 사용 후 외부파일에서 스타일 불러와서 적용해보기 </h3>
<h1> 안녕하세요 반갑습니다</h1>





 
 </body>
</html>

style.css

@charset "UTF-8";

h1{
	background-color: #ffff00;
}

index1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
  <style type="text/css">
	
	 /* 모두 같은 값으로 적용하고 싶을 떄는 *를 사용한다 */
	*{ 
	 /* background-color: green; */ /*컬러를 아예 적어주는 방법*/
	 /* background-color: #00ff00;*/ /*16진수  이용방법*/
	  background-color: rgb(0,255,0); /*rgb 이용방법''*/
	 
	 
	 /* text-align: center;*/
	}
	
	 /* p태그를 사용한 모든 문장  #ff0000 으로 변경 */
		p{
		color: #ff0000;
		}
	
	 /* h3태그를 사용한 모든 문장  오른쪽으로 정렬  */
		h3{
		color:rgb(0,0,255);
		text-align: right;
		}
		
	 /* id를 work 로 사용한 것은 배경색 분홍색으로 변경  */	
		#work{
		background-color: pink
		}
	 
	 /* p태그에 id를 work 로 사용한 것은 글자색 노란색으로 변경   */		
		p#work{
			color: yellow;
		}
	 
	 /* cls 사용한 것은 배경색 노랑, 글자 검정, 사이즈 24로 변경   */		
		.cls{
			background-color: yellow;
			color: black;
			font-size:24px
		}
	 
	 /* cls를 사용하는 것중에서  div 태그 단 것만 따로 변경할 수 있을 떄    */			
		div.cls{
			font-size:18px;
			color: red;
		}
	
  </style>
</head>
<body>
<pre>
		id: JavaScript 에서 접근가능/ css 에서도 접근이 가능하고 사용할 수 있다 / 앞에 #을 붙여서 사용 	/id 는 하나만 가능
	 Class: JavaScript 에서 접근가능/ css에서 적용이 가능하다				/ 앞에 .을 붙여서 사용 	/다중 사용 가능 
	  name: JavaScript 에서 접근가능/ css에서 사용하지 않는다				/link 시에 값을 전송한다
	  
	  [문법]
	  		태그명 / #id  / .calls {
	  		property명 : value(값)
	  				  :
	  				  :
	 		 }
	  
	  
	  
</pre>
<br/>
	<p>잠실 아파트 매각 시세차익 30억 논란…가족 간 편법 증여 의혹도</p>
	<h3>한 후보자 인사청문회의 핵심 쟁점은 부동산 문제다. </h3>

	id 명은 원하는대로 설정 가능 
	<p id="work">국민의힘은 한 후보자의 부동산 보유 및 처분 과정 등을 검증할 예정이다.</p>

	<h3 id="work">한 후보자가 가족 간 부동산 임대 과정에서 헐값 임대·편법 증여를 했다는 의혹도 제기됐다.</h3>

	cls 사용시 전부 같은 값으로 적용된 걸 확인 할 수 있다 
	<h2 class="cls">연건동 건물은 단독 주택 2채를 연결 통로로 이어 하나로 사용했다는 불법 증축 의혹도 제기된 바 있다.</h2>
	
	<h4 class="cls">한 후보자 측은 다주택·시세차익 논란 등과 관련해서는 인사청문회에서 답하겠다고 밝혔다 </h4>
	
	div 태그 안에 cls 로 잡아서 같은  cls 임에도 다른 게 적용된 걸 확인 할 수 있다 
	<div class="cls">한 후보자는 공식 사과하며 재발 방지 대책 마련을 약속한 바 있다.</div>



</body>
</html>

index.2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 <style type="text/css">
 body {
 /*
	background-color: rgb(108,161,251);
	background-image: url("./images/background.jpg");
	background-repeat: no-repeat;
	background-position: center top;

	background:rgb(108,161,251) url("./images/background.jpg") no-repeat center top;
*/	
	background-image:url("./images/icon.jpg");
	
}
 
 	
 
 </style>
 
</head>
<body>
 
 <table style="border:1; text-align: center; background-color:rgb(105,131,201); "  >
 	<tbody>
 		<tr>
			<td style="font-size: 200%"><pre>
				배경 이미지 삽입 	background-image: url("./images/background.jpg");
				배경 이미지 가로축 삽입	background-repeat: repeat-x;
				배경 이미지 세로축 삽입	background-repeat: repeat-y;
				배경 이미지 한장만 삽입	background-repeat: no-repeat; 
				배경 이미지 포지션 상단	background-position: top;

				단축 문장 : background:rgb(108,161,251) url("./images/background.jpg") no-repeat center top;

				아이콘으로 만들어서 삽입 background-image:url("./images/icon.jpg");
  			</pre></td>
  		</tr>
  </tbody>	
</table>

</body>
</html>

index3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	body{
	color: green;
	text-align: center;
	}
	h3{
	color: rgb(255,0,0);
	text-decoration: overline;
	}
	P{
	color:blue;
	}
	
	/*transform :변환*/
	.upper{
	text-transform: uppercase;
	}
	
	.lower{
	text-transform: lowercase;
	}
	
	.cap{
	text-transform: capitalize;
	}
	
	.setif{
	font-family:"Times New Roman";
	font-style:italic;
	font-size: 1.5em;
	color: rfb(255,255,0);
	font-stretch: wider;
	background-color: pink;

	}
	
	a{
	text-decoration: none; /* 위에서 설정했던 디폴트 값 제거 */
	}
	
	a:link{
	color: pink;
	text-shadow: black;
	}
	
	a:visited {
	color: purple;
	text-decoration: underline;
	}
	
	a:hover {
	color: green;
	background-color: yellow;
	text-decoration: underline;
	}

</style>
</head>
<body>

<h3>b1a4팬카페</h3>

<p>진영신우산들바로공찬대박b1a4</p>


<p class="upper">we are one</p>
<p class="lower">we are one</p>
<p class="cap">we are one</p>

<p class="setif">welcome to bana world</p>

<a href="http://www.google.com">환영합니다 b1a4 팬카페입니다 </a>










</body>
</html>

index 4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<style type="text/css">
	.message{
	/*	바깥 여백 설정 방법 
	
		margin-top: 10px;
		margin-right: 20px;
		margin-bottom: 10px;
		margin-left: 20px;
	
		
		 바깥 여백 단축키 */ 
	margin: 10px 20px 10px 20px; 
		 
		
		
	/*	 테두리 설정 방법 
		border-style:dotted; 
		border-color: blue;
	
	
		 테두리 설정 단축키*/ 
	border: solid blue 3px; 
		
	/* 안쪽 여백 단축키 */	
	
	padding-left: 15px 20px 30px 40px;
		
	}
	
	</style>
</head>
<body>

	<div class="message">welcome to my world</div>

</body>
</html>

index5

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

.ul{

/*list-style-type:circle;*/

list-style-image: url("./images/icon.jpg");

font-family:"Times New Roman";

padding-left:34px;

}

.ol{

/* list-style-type: upper-roman;*/

list-style-type: lower-alpha;

}





</style>

</head>

<body>



<ul class="ul">

<li><a href="https://www.ediya.com/">coffe </a></li>

<li><a href="https://www.coca-cola.com/kr/ko">soda</a></li>

<li><a href="https://www.maeil.com/">milk</a></li>

</ul>



<ol class="ol">

<li>Apple</li>

<li>pear</li>

<li>Banana</li>

</ol>

</body>

</html>

커피 누르면 해당 페이지로 이동하게 연결해둠

index6

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 <style type="text/css">
 	
	table{
		width:100%;
		border-collapse: collapse; /*라인 하나로 설정해라*/
		text-align:center;
	}
	
	/*> 를 사용하면 어디어디 안에 ,를 사용하면 동등하게 모두 */
	table, th, td{
		border-style: solid;
		border-width: 3px;
		border-color: purple;	
		
	}
	
	/*th태그만 따로 설정하기  */
	th{
		height: 50px;
		background-color: pink;
		color:white;
		
	}
	
	td{
		text-align:center;
		height: 30px;
	}
	.left{
		text-align: left;
		padding-left: 15px;
	}
 </style>
</head>
<body>



<table>
	<thead>
		<tr>
			<th>번호</th><th>이름</th><th>나이</th><th>신장</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th>1</th><td class="left">홍길동</td><td>17</td><td>186.2</td>
		</tr>
		<tr>
			<th>2</th><td  class="left">성춘향</td><td>14</td><td>164.3</td>
		</tr>
		<tr>
			<th>3</th><td  class="left">일지매</td><td>21</td><td>172.5</td>
		</tr>
	</tbody>	
</table>










</body>
</html>

index7

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.cm{
	font-size: 1mm;
}

.inch{
	font-size: 1in;
}


.pt{
	font-size: 1pt;
}

.pc{
	font-size: 1pc;
}

.px{
	font-size: 1px;
}


.em{
	font-size: 1em;
}

.per{
	font-size: 100%;
}

</style>
</head>
<body>

<h2>font size</h2>

	<p class="cm"> font size 1 cm</p>
	<p class="mm"> font size 1 mm</p>
	<p class="inch"> font size 1 inch</p> <!-- 1 inch = 2.54cm -->
	<p class="pt"> font size 1 pt</p>	  <!--  point  -->
	<p class="pc"> font size 1 pc</p>	  <!--  파이카 == 12pt  -->
	<p class="px"> font size 18 px</p>
	<p class="em"> font size 20 em</p>
	<p class="per"> font size 100% </p>
</body>
</html>

work

work 1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
	.c{
	 	padding-left:50px;
	}
	.cl{ 
		padding-left: 120px;
		padding-top: 50px;
	}
	.cls{
		padding: 50px 100px  50px 100px;
	}
	</style>
</head>
<body>
<h1 class="c">명언</h1>

<p class="cl"> 징키스칸 어룩 </p>

<p class="cls">

집안이 나쁘다고 탓하지 말라.
나는 아홉 살 때 아버지를 잃고 마을에서 쫓겨났다.

가난하다고 말하지 말라.
나는 들쥐를 잡아먹으며 연명했고,
목숨을 건 전쟁이 내 직업이고 내 일이었다.

작은 나라에서 태어났다고 말하지 말라.
그림자 말고는 친구도 없고 병사로만 10만.
백성은 어린애, 노인까지 합쳐 2백만도 되지 않았다.

배운게 없다고 힘이 없다고 탓하지 말라.
나는 내 이름도 쓸 줄 몰랐으나 남의 말에 귀 기울이면서
현명해지는 법을 배웠다.

너무 막막하다고, 그래서 포기해야겠다고 말하지 말라.
나는 목에 칼을 쓰고도 탈출했고,
뺨에 화살을 맞고 죽었다 살아나기도 했다.

적은 밖에 있는 것이 아니라 내 안에 있었다.
나는 내게 거추장스러운 것은 깡그리 쓸어버렸다.

나를 극복하는 그순간 나는 징기스칸이 되었다. </p>
</body>
</html>

work2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<style type="text/css">
	
	.ul{
		list-style-image:url("./images%20(4)/star.gif");
	}
		
	
	</style>
</head>
<body>

<ul  class="ul" >
	<li  ><pre>
	목록 항목 A
	그 상세한 설명. 
	</pre></li>
	
	<li ><pre>
	목록 항목 B
	그 상세한 설명. 
	</pre></li>
	
	<li ><pre>
	목록 항목 B
	그 상세한 설명. 
	</pre></li>
</ul>

</body>
</html>

work3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	
	.ul{
		list-style-image: url("./images%20(4)/exq.gif");
		border: 2px;
		border-style: solid;
		border-color: gray;
		background-color: orange;
		padding: 30px;
		}
		


</style>


</head>
<body>

<ul class="ul">
	<li> 참고 이 메시지에 주의하세요!</li>
</ul>

</body>
</html>

work 4

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	p{	
	 	border: 1px;
		border-style: none;
		border-radius: 5px;
		box-shadow: 2px 2px 5px gray;
		background-image: linear-gradient(to bottom, #b6fbff, #83a4d4);
		padding: 15px;
		margin: 10px;
		}
		
		
	body { 
		 background-color: gray;
	}

</style>


</head>
<body>

<p >
	CSS를 사용한 장식 테두리<br/>
	좋아하는 메시지를 작성합니다. 
</p>
</body>
</html>

work5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
	background-image:url("./images%20(4)/red.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.d {
	padding-top: 300px;
	padding-top: inherit;

	}



</style>
</head>
<body>

</body>
</html>

<div class="d">
<h1>징기스칸 어록</h1>


	<pre>
집안이 나쁘다고 탓하지 말라.
나는 아홉 살 때 아버지를 잃고 마을에서 쫓겨났다.

가난하다고 말하지 말라.
나는 들쥐를 잡아먹으며 연명했고,
목숨을 건 전쟁이 내 직업이고 내 일이었다.

작은 나라에서 태어났다고 말하지 말라.
그림자 말고는 친구도 없고 병사로만 10만.
백성은 어린애, 노인까지 합쳐 2백만도 되지 않았다.

배운게 없다고 힘이 없다고 탓하지 말라.
나는 내 이름도 쓸 줄 몰랐으나 남의 말에 귀 기울이면서
현명해지는 법을 배웠다.

너무 막막하다고, 그래서 포기해야겠다고 말하지 말라.
나는 목에 칼을 쓰고도 탈출했고,
뺨에 화살을 맞고 죽었다 살아나기도 했다.

적은 밖에 있는 것이 아니라 내 안에 있었다.
나는 내게 거추장스러운 것은 깡그리 쓸어버렸다.

나를 극복하는 그순간 나는 징기스칸이 되었다.

	</pre>
</div>

work7

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table{	border-width:3px;
		border-style:solid;
		border-color:gray;
		border-collapse: collapse; /*라인 하나로 설정해라*/
	}
	
th, tb,td {
	border-width:1px;	
	border-style:solid;	
	}	

</style>
</head>
<body>

	<table >
		<thead > 
			<tr>
				<th>분류</th> <th>제품</th> <th>설명</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td rowspan="2">과일</td> <td>사과</td> <td>햇사과</td>
			</tr>
			<tr>
				<td>배</td> <td>싱싱함</td>
			</tr>
		</tbody>
		
	
	</table>




</body>


</html>

work8

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	a:hover{
		color: green;
		background-color: yellow;
		text-decoration: underline;
	}

</style>
</head>
<body>
<a href="https://www.google.co.kr/index.html">구글홈페이지link</a>
</body>
</html>

마우스 올리면 색 변화된다

work9

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">

	body {
	background-image: url("./images%20(4)/back.jpg");
	background-repeat: no-repeat;
	background-size: cover inherit;
	
	}

	p{ font-size: 20px;
		background-color: rgb(255,255,255,0.3);
		padding: 10px 20px 10px 25px;
		margin: 15px 20px 15px 40px;
	}



</style>
</head>
<body>

<p>여기는 산이야!</p>
</body>
</html>

해보고 싶었던 것 해보기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.to { 
		border: 2px solid transparent;
		
		
		background-image: url("./images%20(4)/tomato.png") , linear-gradient(#fff, #fff), linear-gradient(to right, tomato, orange, pink);
		/* 3. 각 배경 레이어의 범위를 지정 (이미지는 테두리 안쪽 패딩 영역까지만 나오도록 설정) */
		background-origin: padding-box, content-box, border-box;
		background-clip: padding-box, content-box, border-box;
		background-repeat: no-repeat,no-repeat,no-repeat;
		background-size: 50px 50px, auto, auto;
		border-radius: 30px 10px 40px 0px;
		padding: 10px 10px 10px 40px;
						} 


</style>
</head>
<body>

<h3 class="to"> 나는 작은 토마토야 방울 토마토랑 헷갈리면 안 돼 알았지?</h3>

</body>
</html>

[2026-06-24]

jamk-diary — Thu, 25 Jun 2026 18:37:31 +0900

실습 과제 1: 자기소개 출력하기 (변수와 출력)

목표: 다양한 자료형의 변수를 선언하고, 문자열 더하기 연산자(+)를 사용해 한 문장으로 출력합니다.

요구사항:
1. 이름(String), 나이(int), 키(double)를 저장하는 변수를 각각 만드세요.
2. 변수에 본인의 데이터를 할당하세요.
3. System.out.println을 한 번만 사용하여 아래와 같이 출력하세요.
출력 예시:

package work1;

public class work1 {
public static void main(String[] args) {
	String na="홍길동"; //이름
	int ag=18; //나이
	double cm=182.2; //키
	
	System.out.println("안녕하세요 제 이름은 " + na +"이고, 나이는 " +ag + "살 , 키는 " +cm +"cm입니다");
	
	
	
}
}

실습 과제 2: 편의점 영수증 계산기 (산술 연산자)

목표: 여러 물건의 가격을 합산하고 나머지를 구하는 과정을 통해 산술 연산자에 익숙해집니다.

요구사항:
1. 콜라 가격(coke)은 1,500원, 과자 가격(snack)은 2,000원입니다.
2. 콜라 3개와 과자 2개를 샀을 때의 총 금액을 계산하여 변수 total에 저장하세요.
3. 만 원(10,000원)을 냈을 때 받을 거스름돈을 계산하여 출력하세요.
힌트: total = (coke * 개수) + (snack * 개수);

package work1;

public class work2 { 
	public static void main(String[] args) {
		int coke = 1500;
		int snack= 2000;

		int total=(coke *3) +(snack *2);

		System.out.println(total);
	}



}

⚖️ 실습 과제 3: 홀짝 및 성인 인증기 (비교 및 논리 연산자)

목표: 비교 연산자와 논리 연산자의 결과값(boolean)이 어떻게 나오는지 확인합니다.

요구사항:
1. 어떤 숫자 num이 10일 때, 이 숫자가 짝수인지 확인하여 true/false를 출력하세요. (힌트: 2로 나눈 나머지가 0인지 확인)
2. 본인의 나이를 변수 myAge에 저장하고, 이 값이 19세 이상인지 확인하여 출력하세요.
3. isAdult라는 변수에 (나이가 19세 이상) 이면서 (민증을 가지고 있음 - boolean hasID = true;) 두 조건이 모두 참일 때만 true가 나오도록 코드를 짜보세요.

package work1;

import java.util.Scanner;

public class work3 {
public static void main(String[] args) {


//홀수 인지 짝수인지 확인하기 
	int num = 10;		
	if(num % 2 == 0) {
		System.out.println("true");
	}
	else {
		System.out.println("false");
	}
	 
	//미성년자 식별 
	int age;
	Scanner sc = new Scanner(System.in);
	System.out.print("나이를 입력해 주세요 : ");
	age=sc.nextInt();
	
	System.out.println("-----------검사중입니다-----------");

	boolean hasID = true;

	boolean isAdult = (age >= 19) && hasID;

	
	//출력 

	if (isAdult) {
        // 나이도 19세 이상이고, 민증도 참(true)일 때만 실행
        System.out.println("성인 인증 성공! 어른입니다.");
    } else {
        // 나이가 19세 미만이거나, 나이는 맞는데 민증이 없는(false) 모든 거짓 상황을 처리
        System.out.println("인증 실패: 미성년자이거나 신분증이 없습니다.");
    }

	
}
}

jamk-diary 님의 블로그

[260708] Ajax를 통해 로그인 페이지 만들기

내장 객체(out / request) 실습

==== 내장 객체(out / request) 실습창====

request 객체로 읽어온 데이터: -> 이름은 성춘향이고, 나이는 15세입니다.

[수강일지 40] 웹페이지의 데이터 통신/ 서블릿(Servlet) 기초와 Forward vs Redirect 개념

Sample1 수업 목적: 웹의 기초적인 소통 흐름 배우기

주요 학습 내용

Sample2 수업 목적: 다양한 양식의 데이터 전송 및 백엔드 동적 화면 구현 배우기

주요 학습 내용

Sample 3 수업 목적: Forward와 Redirect를 활용한 서블릿 간 데이터 전송 및 흐름 제어 배우기

포워드(Forward) vs 리다이렉트(Redirect) 완벽 비교

️ 포워드 사용 시 필요한 3대 클래스

1. HttpServletRequest (데이터 주머니 및 패스포트)

2. RequestDispatcher (비밀 통로 안내원)

3. HumanDto (내가 만든 데이터 택배 상자)

전체 흐름 최종 한눈에 보기

[수강일지 39] jquery

이 노트가 담고 있는 핵심 내용 3가지

1. 프론트엔드 생태계에서의 역사와 위치

2. jQuery의 기본 공식 (형식)

3. 이 노트의 하이라이트: 자바스크립트 vs jQuery 문법 비교 (Getter / Setter)

이 코드의 핵심 포인트 3가지

한 줄 요약"jQuery로 화면의 특정 요소(#demo)를 붙잡아서, 내가 원하는 스타일 클래스(style)를 동적으로 입히는 문법(prop 또는 attr)을 다룰 수 있는가!"

사용 목적

이 예제의 핵심 포인트 2가지

이 코드의 핵심 관전 포인트 (블로그 정리용)

[수강일지 38] view

부트스트랩, w3

javascript 과제

과제: "나만의 미니 주소록" 만들기

[단계별 힌트]

[수강일지36] 자바 스크립트

1. 자바스크립트(JavaScript)란 무엇일까?

2. HTML과 대화하는 방법: DOM

3. 데이터를 담는 그릇: 변수(Variable)

var vs let

2. 배열(Array): 데이터를 한 줄로 세우기

3. 클래스(Class): 설계도면 만들기

4. JSON: 데이터를 깔끔하게 묶기

5. 상수(const): 변하지 않는 약속

1. 태그를 찾는 4가지 방법

2. 읽고 쓰기 (innerHTML vs value)

3. 반복문으로 묶음 관리

4. querySelector (고급 팁)

1. 이벤트(Event): "무언가 일어났을 때!"

2. 함수(Function): "명령어 묶음"

3. 실시간 화면 제어

[수강일지33] css

[2026-06-24]

실습 과제 1: 자기소개 출력하기 (변수와 출력)

실습 과제 2: 편의점 영수증 계산기 (산술 연산자)

⚖️ 실습 과제 3: 홀짝 및 성인 인증기 (비교 및 논리 연산자)

한 줄 요약
"jQuery로 화면의 특정 요소(#demo)를 붙잡아서, 내가 원하는 스타일 클래스(style)를 동적으로 입히는 문법(prop 또는 attr)을 다룰 수 있는가!"