index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- resource(자원):button, input,calendar,slider -->
<!-- link: 목적 : 이동-->
<!-- 링크로 이동할 있는 종류-->
<!-- 주소-->
<a href="http://zum.com">zum 으로 이동</a>
<br/><br/>
<!-- 링크로 이동 가능, html로 이동 가능 -->
<!-- 옳지 않은 예 -->
<a href="default.html">default 로 이동</a>
<br/><br/>
<!-- 옳은 예 로컬호스트 -->
<a href="http://localhost:9000/sample3/default.html">default.html</a>
<a href="http://192.168.0.129/sample3/default.html">default.html</a>
<!--192.168.0.129 - www.naver.com(Domain system)-->
<!--
Link:이동 , '값을 전달하는 기능' = 목적을 두 가지 가지고 있다
<a href= "" -> 속성
<form action = "" ->from 사용해서 이동할 때는 이동과 값을 전달해야 하는 경우에 쓰인다
-->
<form action="default.html"></form>
<input type="submit" value="default로 이동"> <!-- 버튼 생성 -->
</body>
</html>
default.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>default.html</h1>
</body>
</html>
index2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<br>ul-> user interface <br>
<!-- input tag /placeholder: 입력값을 지정해주는 녀석, vaule: 기본값 지정해주는 녀석 -->
텍스트 입력창: <input type="text" value="홍길동 " placeholder="이름입력" /> <!-- 닫는 태그 따로 없이 마지막에 / --><br>
type="text" 를 적지 않아도 무사히 생성된다 :<input value="홍길동 " placeholder="이름입력" />
<br><br>
숫자 입력창: <input type="number" value="5" max="10" min="1"><br>
숫자 입력창에 기본 값 5 , 최대값10, 최소값1 로 설정해서 화살표를 아무리 눌러도 그 이상 그 이하로 확인할 수 없다
<br><br>
날짜: <input type="date"/>
value 설정하지 않고 입력창을 생성했을 경우 오늘 날짜로 생성된다 <br>
날짜:<input type="date" value="2022-11-22"/>
value 설정하지 않고 입력창을 생성했을 경우 기본값 날짜로 생성된다<br>
날짜:<input type="datetime" value="2022-11-22" />
이건 뭐가 나오는 거람?? <br>
<br><br>
컬러 값 설정:<input type="color">
기본값 설정 안 하면 0으로 나온다 <br>
컬러 값 설정:<input type="color" value="#fff000">
기본값 설정 시 원하는 색상 나온다
<br><br>
범위 설정 : <input type="range" max="100" min="1">
최대 100 최소 1로 범위 설정 <br>
범위 설정 : <input type="range" max="100" min="1" value="50">
기본값 설정하면 중간 50부터 나온다 <br>
<br><br>
<!-- check box -->
체크박스 기능 이용하기
<div>
<input type="checkbox" value="music"/> 음악감상 (이렇게 인풋 태그 밖에 적어주기 )
</div>
<br>개행 br/대신 div로 묶어놓고 대부분 사용한다 <br/>
<br>div 로 묶으면 세로로 출력된다 <br>
<div>
<div><input type="checkbox" value="music"/>음악감상</div>
<div><input type="checkbox" value="picture"/>그린관람</div>
</div>
<br>div 와 span 태그 같이 사용하기 : 가로로 출력된다 <br>
<div>
<span> <input type="checkbox" value="music"/> 음악감상 </span>
<span><input type="checkbox" value="picture"/>그린관람 </span>
</div>
<br><br>
<!-- radio -->
radio를 이용해서 하나만 선택되게 만들기 <br>
<input type="radio" value="venz">벤츠<br/>
<input type="radio" value="audi">아우디<br/>
<input type="radio" value="bmw">bmw<br/>
<br><br>
기본으로 하나 선택되어있게 만들기, 복수 세개 전부 다 선택된다 <br>
<input type="radio" value="venz">벤츠<br/>
<input type="radio" value="audi" checked="checked">아우디<br/>
<input type="radio" value="bmw">bmw<br/>
<br><br>
세개중에 하나만 선택되게 만들기 <br>
<input type="radio" name="car" value="venz">벤츠<br/>
<input type="radio" name="car" value="audi" checked="checked">아우디<br/>
<input type="radio" name="car" value="bmw">bmw<br/>
<br><br>
<!-- select -->
<br>사과 배 바나나 중에 고르기 기본값은 사과<br>
<select>
<option value="apple">사과 </option>
<option value="pear">배 </option>
<option value="banana">바나나 </option>
</select>
<br>selected 사용해서 기본 값 바나나로 변경<br>
<select>
<option value="apple">사과 </option>
<option value="pear">배 </option>
<option value="banana" selected="selected">바나나 </option>
</select>
문장 옆에 셀렉트로 열고 옵션 달면 창이 문장 옆에 달린다.
<font style="font-size: 120%; ">나이를 선택하세요. </font><select>
<option value="0" selected="selected">아래에서 선택 </option>
<option value="10">10~19세 </option>
</select>
<br>자기소개란 처럼 텍스트를 입력해서 넣을 수 있는 칸이 생성된다 <br>
<textarea rows="10 " cols="60"></textarea>
<br>칸 안에 자기소개란 글씨가 들어갔다<br>
<textarea rows="10 " cols="60" placeholder="자기소개 "></textarea>
rows 는 세로 cols 는 가로
<br><br>
<br>동영상 띄워주기 <br>
<video width="400" controls="controls">
<source src="mov_bbb.mp4" type="video/mp4">
</video>
</body>
</html>
index3
<form >
<fieldset>
<legend><b>개인정보</b></legend>
<br/> 형식 안 맞으면 경고 나오게 된다 <br/> <br/>
e-mail: <input type="email" size="30" required=""><br/>
블로그 주소: <input type="url" size="30" required=""><br/><br/>
전화번호: <input type="tel" size="30" required=""><br/><br/>
<input type="submit" value="완료"><br/><br/><!-- 위를 다 입력하고 완료버튼 눌렀는데 위의 형식에 맞지 않으면 경고뜸 -->
</fieldset>
</form>
index3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
태그의 속성 :값을 전달하는 목적의 속성을 말한다
id: javaScript 에서 접근.
현재 document(html)에서 1개만 유효하다
값을 입력하고 출력할 때 사용한다
class: css 에서 접근
javaScript 에서 접근.
현재 document(html)에서 다수를 설정 -> 디자인을 하는 목적을 가진다
name: link(a[엉커],form)를 통해서 값을 전달
javaScript 에서 접근.
현재 document(html)에서 다수를 설정
class , name 둘 다 자바스크립트에서 접근이 가능하다
</pre>
<br/><br/>
<form action="default.jsp"> <!-- 가야될 곳 입력 -->
이름 : <input type="text" name="name" size="8"/><br/>
나이 : <input type="number" name="age" max="100"/><br/>
주소 : <input type="text" name="address" size="16"><br/>
취미 :
<input type="checkbox" name="hobby" value="movie" /> 영화관람
<input type="checkbox" name="hobby" value="picture"/> 그림감상<br/><br/>
자기소개:<br/>
<textarea rows="10" cols="30" name="mind"></textarea>
<br/>값을 전달할 떄 사용하는게 form 전달 매개체 필요<br/>
<br/><br/>
<input type="submit" value="이동"/>
<input type="reset" value="초기화 ">
</form>
</body>
</html>
index.3
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//java 영역 request(요청)
//index4에서 받은 내용 자바에서 받기
//java 영역 request(요청)
//-> //url 보면 같이 홍길동 값 넘겨주고 있다
String name = request.getParameter("name");
System.out.println("name:" + name);
String age = request.getParameter("age");
int iage = Integer.parseInt(age);
System.out.println("age:" + iage);
//체크박스로 체크한 값 받기
//1. getParameter 는 url 에 담겨있다
//name이 체크박스로 체크된 값 여러개 넘기는 방법
String hobby[] = request.getParameterValues("hobby");
for(String h : hobby){
System.out.println(h);
}
String mind=request.getParameter("mind");
System.out.println(mind);
%>
과제
work 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1 style="color: blue">세계의 명언</h1>
<hr style="color: blue"/>
<fieldset style=" heigt:70px; color: blue; border-color: blue; border: 1px solid ">
<h4>인간의 불안은 과학의 발전에서 온다 <font style="color: red"> [나츠메 소세키]</h4>
</fieldset>
<br/><br/>
<fieldset style=" heigt:70px; color: blue; border-color: blue; border: 1px solid ">
<h4>기다리는 것을 아는 것은 원하는 것을 얻을 수 있는 <font style="color: red"> [프랑스 속담]</font> </h4>
</fieldset>
<br/><br/>
<fieldset style=" heigt:70px; color: blue; border-color: blue; border: 1px solid ">
<h4>There's more than one way way to do it.(그 방법은 다양하다) </h4>
</fieldset>
</body>
</html>
| 몰랐던 것 |
hr 색상 변경하는 법 : <hr color= "blue"/> |
work2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<fieldset style="background-color: blue; color: white;">
<h1> 자기 소개 </h1>
</fieldset>
<br/>
<div style="text-align: center">
<img alt =" " src="./images/wok.png" >
</div>
<fieldset style="border-color: blue; border-radius: 20px; height: 150px; ">
<pre style="font-size: 200% ; color: blue; " >
안녕하세요.
좋아하는 음식은 <font style="color: red; font-weight: bold">스파케티</font>입니다.
최근, SF 소설에 관심이 많아졌습니다. </pre>
</fieldset>
</body>
</html>
work3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>설문조사</title>
</head>
<body>
<form action="wo.jsp">
<h1>설문조사</h1>
<br/>
이름: <input type="text" name="name" placeholder="이름을 기입">
<hr/>
<pre>
<font style="font-size:130%; font-weight: bold">질문(1)</font>
<font style="font-size: 120%; ">영어 회화에 관심이 있습니까?</font>
</pre>
<div>
<span><input type="radio" name="answer" value="yes"/>예</span>
<span><input type="radio" name="answer" value="anything"/>둘 다 말할 수 없음 </span>
<span><input type="radio" name="answer" value="no"/>아니요</span>
</div>
<hr/>
<pre>
<font style="font-size:130%; font-weight: bold">질문(2)</font>
<font style="font-size: 120%; ">영어 이외에 관심이 있는 어학이 있으면 선택해 주세요(복수 답변 가능)</font>
</pre>
<div>
<span><input type="checkbox" name="la" value="germany" />독일어</span>
<span><input type="checkbox" name="la" value="france" />프랑스어</span>
<span><input type="checkbox" name="la" value="italy" />이탈리아어</span>
<span><input type="checkbox" name="la" value="spain" />스페인어</span>
<span><input type="checkbox" name="la" value="japan" />일본어</span>
</div>
<hr/>
<pre>
<font style="font-size:130%; font-weight: bold">질문(3)</font>
<font style="font-size: 120%; ">영어 수업에 대한 의견 </font>
</pre>
<textarea rows="5" cols="40" name="op" placeholder="의견을 기입"></textarea>
<hr/>
<pre>
<font style="font-size:130%; font-weight: bold">질문(4)</font>
<font style="font-size: 120%; ">나이를 선택하세요. </font><select >
<option value="0" selected="selected">아래에서 선택 </option>
<option name="age" value="10~19세" >10~19세 </option>
<option value="20~29세" >20~29세</option>
<option value="30~39세" >30~39세 </option>
<option value="40~49세"> 40~49세 </option>
<option value="50~59세"> 50~59세 </option>
<option value="60~69세"> 60~69세 </option>
<option value="70세 이상">70세 이상 </option>
</select>
</pre>
<hr/>
<input type="submit" value="제출"/>
<input type="reset" value="초기화 ">
</form>
</body>
</html>| 알게 된 것 <!-- tooltip: 마우스 올리면 드러나는 작은 말풍선 상자 --> : title="이름을 기입" |
| 알게 된 것 <!-- 약간의 여백 줄 때 사용 --> |
wo.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String name = request.getParameter("name");
System.out.println("이름: " +name);
String answer[] = request.getParameterValues("answer");
for(String a : answer){
System.out.println(a);
}
String answer2[] = request.getParameterValues("la");
for(String a2 : answer2){
System.out.println(a2);
}
String answer3= request.getParameter("op");
System.out.println("의견: " + answer3);
String answer4[] = request.getParameterValues("age");
for(String a4 : answer4){
System.out.println(a4);
}
%>
| 문제 발생 해결하기 문제 원인: 마지막 질문 (3) 을 통해 받는 값이 이상한 현상 발생 문제 해결 : <select > 절에서 value 를 문장으로 받았기 때문에 jsp 에서도 문장으로 받았어야 했다 String age = request.getParameter("age");
System.out.println("연령: " + age + "대"); ------------- 만약 이렇게 숫자로 받았다면? <select name="age">
<option>아래에서 선택</option> <option value="10">10~19세</option> <option value="20">20~29세</option> </select> jsp 에서 받을 때 펄스 인트 사용해서 문장으로 바꾸고 // age
int age = Integer.parseInt(request.getParameter("age")); System.out.println("연령: " + age + "대"); 이렇게 작성해서 출력했다면 성공했을 것이다 |
'HTML > Html 수강일지' 카테고리의 다른 글
| [수강일지33] css (0) | 2026.06.25 |
|---|---|
| [수강일지31] work 정답, 복습, 리스트 ,표, 퍼오기 링크 삽입 (0) | 2026.06.23 |
| [수강일지30] HTML , css (0) | 2026.06.22 |