7일차 내용 정리
form
action
폼 데이터를 전송헐 URL을 지정, url로 데이터 전송
method
메서드 지정
get : url을 통해 데이터를 요청 시 사용
post : 데이터를 서버에 전송 시 사용
전송 방식을 post로 하면 입력한 내용이 주소창에 보이지 않는다
<form action = "submit" method = "post"> </form>label
입력 필드에 대한 설명을 제공
for : 요소 설명
id, name : 서버에서 해당 value를 추출할 때 사용
input
- text : 일반 텍스트 입력 필드 생성
input type="text"- password : 비밀번호 입력 필드 생성 (입력된 값은 화면상 노춡X)
input type="password"- email : 이메일 입력 필드 생성
input type="email"- file : 파일 업로드 필드 생성
input type = "file"- number : 숫자 입력 필드 생성
input type = "number"- color : 색상 선택 필드 생성
input type = "color"- datetime_local : 날짜+시간 선택 필드
input type = "datetime_local"- range : 숫자 범위 선택 필드 생성 (슬라이더 형태)
input type = "range"- checkbox : 체크박스 생성 (여러 개의 옵션 선택 가능)
input type = "checkbox"- radio : 라디오 버튼 생성 (하나의 옵션만 선택 가능)
input type = "radio"select
-
name : 이름을 지정, 서버에서 해당 value를 추출할 때 사용
-
multiple : 동시에 여러개 선택 가능
-
size : 옵션의 수 지정
<select name = "" size = "" multiple>
<option value ="" ></option>
.
.
.option
선택 가능한 항목을 정의
select는 option 태그와 함께 사용
value가 없으면 innerText가 전송
-
value : 옵션 선택 시 서버로 전송되는 값
-
selected : 기본 선택 옵션 지정
textarea
여러 줄의 텍스트 입력 필드
form 구성
기본 구조
<form action = "" method = "">
<button type= ""></button>
</form>제출
<button type="submit">제출</button>
or
<input type = "submit" value = "제출"><button>강의 시간에 직접 입력한 CODE 예시로 코드 설명
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form3_style.html</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
}
form>div,
fieldset,
label,
select,
textarea {
margin-bottom: 15px;
display: block;
}
label {
font-weight: bold;
display: block;
margin-bottom: 5px;
}
input[type="text"],
input[type="email"],
input[type="file"],
select,
textarea {
width: 100%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
fieldset {
border: 1px solid #ccc;
padding: 10px 15px;
border-radius: 5px;
}
legend {
font-weight: bold;
padding: 0 5px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}
button {
padding: 10px 20px;
margin-right: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="reset"] {
background-color: #e74c3c;
}
button:hover {
opacity: 0.9;
}
</style>
</head>
<body>
<div class="container">
<h1>회원가입 폼 입니다</h1>
<form action="signup" method="post">
<div>
<input type="email" name="email" id="email" placeholder="이메일 입력...">
</div>
<!--RADIO-->
<fieldset> <!--같은 그룹의 폼 요소들을 논리적으로 묶어줄 때 사용-->
<legend>성별 선택</legend> <!---->
<label> <!--남자를 선택시 man이 값으로 전송-->
<input type="radio" name="gender" value="man" checked>남자
</label>
<label> <!--여자를 선택시 woman이 값으로 전송-->
<input type="radio" name="gender" value="woman">여자
</label> <!--name이 같아야 그룹으로 묶인다-->
</fieldset>
<!--CHECKBOX-->
<fieldset>
<legend>취미 정보 선택</legend>
<label>
<input type="checkbox" name="hobby" value="leather">가죽공예
</label>
<label>
<input type="checkbox" name="hobby" value="drum">드럼
</label>
<label>
<input type="checkbox" name="hobby" value="piano">피아노
</label>
<label>
<input type="checkbox" name="hobby" value="etd">기타
</label>
</fieldset>
<!--OPTION-->
<label for="job">직업</label>
<select name="job" id="job">
<option value="">선택</option>
<option value="gong">공무원</option>
<option value="doctor">의사</option>
<option value="teacher">선생님</option>
<option>기타</option> <!--option에 value가 없으면 innerText가 전송-->
</select>
<!--OUTGROUP-->
<label for="lunch">점심 선택</label>
<select name="lunch" id="lunch" multiple> <!--multiple : 동시에 여러개 선택 가능-->
<optgroup label="김밥천국">
<option>라면</option>
<option>쫄면</option>
<option>김밥</option>
</optgroup>
<optgroup label="우육면가">
<option>우육탕면</option>
<option>도가니탕면</option>
<option>새우완탕면</option>
</optgroup>
</select>
<br>
<!--FILE-->
<!--파일 첨부-->
<label for="file">첨부파일</label>
<input type="file" name="file" id="file">
<br>
<!--TEXTAREA-->
<!--여러줄의 문자열을 전송, \n도 같이 전송된다-->
<label for="comment">하고 싶은 말</label>
<textarea name="comment" id="comment" rows="10"></textarea>
<br>
<button type="submit">가입</button>
<button type="reset">초기화</button>
</form>
</div>
</body>
</html>RESULT
type 종류
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form4.html</title>
</head>
<body>
<div class="container">
<h1>여러가지 형식의 input 요소</h1>
<p>
웹브라우저의 종류와 버전별로 지원이 될수도 있고 안될수도 있다.
<a href="https://caniuse.com">여기서 확인</a>
</p>
<form action="send" method="get">
<!--INPUT TYPE
1. color : 색상
2. range :범위
3. date : 날짜
4. time : 시간
5. datetime_lacal : 날짜와 시간
6. number : 숫자-->
색상 선택 <input type="color" name="color">
<br> <!--최소 최대 간격-->
범위 선택 <input type="range" name="range" min="0" max="100" step="10" value="50">
<br>
날짜 선택 <input type="date" name="date">
<br>
시간 선택 <input type="time" name="time">
<br>
날짜, 시간 선택 <input type="datetime-local" name="datetime">
<br>
숫자 <input type="number" name="number" min="0" max="10" step="1">
<br>
<button type="submit">제출</button>
</form>
</div>
</body>
</html>RESULT
10진수 2자리와 16진수
<10> < 16>
00 00 -> 0
01 01 1
02 02 2
03 03 3
04 04
. .
. .
. .
08 0e
09 0f
10 10
11 11
. .
. .
. .
98 fe 254
99 ff 255COLOR 표현
#으로 시작하는 color 값
red green blue
00 00 00
01 01 01
02 02 02
. . .
. . .
. . .
dd aa ff
. ab 2d
. bf .
ff ff ff
------------------
#000000 -> rgb (0,0,0)
#ff0000 -> rgb(255,0,0)
#ffffff -> rgb(255,255,255)기본값 설정
value
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form5.html</title>
</head>
<body>
<div class="container">
<h1>폼 요소에 기본값 설정하기</h1>
<p>
서버에서 클라이언트에게 폼을 응답할 때 이미 저장된 값을
출력한 채로 응답을 해야 할 떄가 있다.
예를 들어 회원 가입된 정보 보기로로 이동한다면
DB에 이미 저장된 내용을 출력해 주어야 한다.
</p>
<form action="update"> <!--value : 기본값 설정-->
이메일 <input type="email" name="email" value="aaa@naver.com" readonly>
<br> <!--readonly : 읽기 전용-->
<select name="job" id="job">
<option value="">선택</option>
<option value="gong">공무원</option>
<option value="doctor" selected>의사</option> <!--selected : 초기값-->
<option value="teacher">선생님</option>
<option>기타</option>
</select>
<fieldset>
<legend>취미 정보 선택</legend>
<label>
<input type="checkbox" name="hobby" value="leather"> 가죽공예
</label>
<label> <!--checked : 초기 기본 선택-->
<input type="checkbox" name="hobby" value="drum" checked> 드럼
</label>
<label>
<input type="checkbox" name="hobby" value="piano" checked> 피아노
</label>
<label>
<input type="checkbox" name="hobby" value="etc"> 기타
</label>
</fieldset>
<br>
<!--innerText로 제공하는 문자열이 기본값값-->
<textarea cols="20" rows="10">안녕하세요!
Hello
I like cafe
</textarea>
<br>
색상 <input type="color" value="#00ff00">
<br>
날짜 <input type="date" value="2025-05-01">
<br>
날짜, 시간 <input type="datetime-local" value="2025-05-01 14:30">
<br>
<button type="submit">수정하기</button>
<button type="reset">Reset</button>
</form>
</div>
</body>
</html>RESULT
HTML Semantic
의미가 있는 div
- header : 머리글
<header>
<h1>채공부의 블로그</h1>
<p>프로그래밍 웹 개발을 사랑하는 개발자들의 이야기</p>
</header>- nav : 링크 그룹화
<nav>
<ul>
<li><a href="#"></a>홈</li>
<li><a href="#"></a>HTML</li>
<li><a href="#"></a>CSS</li>
<li><a href="#"></a>JavaScript</li>
</ul>
</nav>-
main : 주요 콘텐츠 영역
-
section : 관련된 콘텐츠 그룹화
-
article : 독립적, 재사용 가능한 콘텐츠
-
aside : 부가적인 내용과 관련 정보 표시
<main>
<article>
<section>
section1
</section>
<section>
section2
</section>
<section>
section3
</section>
</article>
<aside>
side contents
</aside>
</main>- footer : 바닥글
<footer>
<p>© 2025 Acron Academy. All rights reserverd</p>
<p>문의 : contact@acornacademy.co.kr</p>
</footer>JavaScript
JavaScript는 ''와 "" 둘 다 가능, Java는 ""만 가능
변수
let 변수명 = 값;상수
값을 한 번 대입하면 결정된 값 그대로만 사용
실수로 다른 값 넣는 걸 방지
const 변수명 = 값;console.log
let A = 10;
-> f12를 눌러 검사로 들어가 console 파트로 간다
A 입력 후 엔터 -> 10
console.log('A') -> A
console.log(A) -> 10
임시로 A = 20 입력 후
console.log(A) -> 20Data Type
number type
숫자
string type
문자
boolean type
True & False (참과 거짓)
Obeject type
순서가 중요하지 않은 데이터 관리 시 사용
여러 개 type이 섞여있는 경우가 많다
let 변수명 = {key:value1, key:value2 ...}array type
자동으로 인덱스가 부여되어 순서있게 관리가 용이덱스가 부여되어 순서있게 관리가 용이
특별한 이유가 없다면 같은 타입의 데이터만 저장되어 있다
let 변수명 = [value1, value2, value3, value4...]object, funtion, array의 구분방법
학원 공부 내용 정리