728x90
2021년 01월 12일 9시 ~ 15시 30분 zoom으로 수업 진행
input 태그의 속성
| 속성 | 기능 | 이미지 |
| text | 한 줄의 입력 필드 정의 |  |
| password | 비밀번호를 입력하는 필드 정의 입력하면 원 모양으로 변경하여 보여준다 |
 |
| number | 숫자를 입력하는 입력 필드 정의 min : 최솟값 정의 max : 최댓값 정의 step : 입력 할 숫자들 사이의 간격 정의 value : 요소의 초깃값 정의 |
 |
| range | 값이 범위안에 존재해야하는 경우 사용하는 입력 필드 슬라이드 바를 조정하여 범위 내의 숫자를 선택한다. min : 최솟값 정의 max : 최댓값 정의 step : 입력 할 숫자들 사이의 간격 정의 value : 요소의 초깃값 정의 |
 |
| 이메일 주소를 입력하는 필드 |  |
|
| search | 검색 필드(일반 필드와 똑같이 동작) | |
| tel | 전화번호를 입력하는 필드 | |
| url | url 주소를 입력하는 필드 |  |
| date | 날짜를 입력하는 필드 |  |
| month | 월과 연도를 선택하는 필드 |  |
| week | 주, 연도를 선택하는 필드 |  |
| time | 시간을 선택하는 필드 |  |
| radio | 라디오 버튼 정의 라디오 버튼은 제한된 개수 중에서 하나만 선택할 수 있다. |
 |
| checkbox | 체크박스 정의 중복체크 가능 |
 |
| color | 색상을 선택하는 필드 |  |
| file | 업로드할 파일을 선택할 수 있는 입력 필드와 "파일 선택" 버튼을 정의 |
 |
| hidden | 사용자에게 보이지 않는 숨겨진 입력 필드 정의 |
|
| button | 버튼 정의 주로 자바스크립트를 활성화 시키기 위해 사용하는 버튼 |
 |
| submit | 폼을 제출하는 버튼 |  |
| reset | 모든 폼 요소의 값을 초기화 시키는 버튼 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form</title>
</head>
<body>
<!-- 0112 -->
<form>
<h2>숫자와 관련된 input 태그</h2>
수량 : <input type="number" name="amount" min="0" max="100" value="50" step="5">
<br>
점수 : <input type="range" min="0" max="100" value="40" step="10">
</form>
<form>
<h2>날짜/시간 관련된 input 태그</h2>
date : <input type="date"><br>
month : <input type="month"><br>
week : <input type="week"><br>
time : <input type="time"><br>
</form>
<form>
<h2>라디오 버튼과 체크박스</h2>
성별 : <input type="radio" id="male" name="gender" value="M" ><label for="male">남자</label>
<input type="radio" id="female" name="gender" value="F" checked><label for="female">여자</label>
<!-- name을 동일하게 맞췄더니 하나만 선택할 수 있게 되었다.
checked 속성을 추가하면 처음 로딩되었을때 해당 라디오버튼이 선택되어있다.
label에 for 속성을 이용해 input 요소의 name과 연결했더니 , 라벨의 텍스트를 클릭해도 라디오버튼이 선택되는 것을 볼 수 있다.
-->
<br>
취미 : <input type="checkbox" id="baseball" name="hobby" value="baseball">야구
<input type="checkbox" id="basketball" name="hobby" value="basketball">농구
<input type="checkbox" id="football" name="hobby" value="football">축구
<!-- 체크박스는 여러 개를 동시체크할 때 사용하는 요소, name을 전부 같이 맞춰도 중복 체크가 가능하다 -->
<br><br>
<input type="submit" value="전송">
<!-- 전송 버튼을 누르면 주소창에 ?gender=M 이런 식으로 추가된다.
쿼리스트링 : name과 value가 쌍으로 존재
-->
</form>
<form>
<h2>그 밖에 input 태그</h2>
색상 선택 : <input type="color" name="color"><br>
파일 선택 : <input type="file" name="upload">
히든 : <input type="hidden" name="hidden" value="1"><br>
<!-- 화면에 보이지 않는 태그 -->
<button>버튼</button><button type="submit">submit</button>
</form>
<form>
<h2>select 태그와 option 태그</h2>
국적 :
<select>
<option value="ko"> 한국 </option>
<option value="en"> 미국 </option>
<option value="fr"> 프랑스 </option>
</select>
<br>
<select size="2" multiple>
<!-- select 박스의 크기를 2로 지정해 한 화면에 2개씩만 보이게 설정
multiple 속성을 추가해서 다중 선택을 가능하게 한다.
-->
<option value="ko"> 한국 </option>
<option value="en"> 미국 </option>
<option value="fr"> 프랑스 </option>
</select>
</form>
<br><br>
<h2>textare</h2>
<textarea cols="30" rows="10" style="resize: none;"></textarea>
<!-- style="resize: none;"을 주지 않으면 textarea 사이즈 조절을 맘대로 할 수 있음 -->
</body>
</html>
| 속성 값 | 기능 | 생김새 |
| GET | url에 폼 데이터를 추가해 서버로 전달 query string에 포함되어 전송되기 때문에 길이 제한있음 |
 |
| POST | 폼 데이터를 별도로 첨부하여 서버로 전달 GET 방식보다 보안성이 높다 |
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>form01</title>
</head>
<body>
<!-- action : 수신대상, method : 전송방식(get, post) -->
<form action="html10_form01_res.html" method="GET">
<fieldset>
<legend>회원가입</legend>
<p> 아이디 : <input type="text" name="id"> </p>
<p> 비밀번호 : <input type="password" name="pw"> </p>
<p>
이메일 수신여부
<input type="radio" name="radio" value="y"> y
<input type="radio" name="radio" value="n"> n
</p>
<p>
관심 분야
<input type="checkbox" name="cb1" value="html"> html
<input type="checkbox" name="cb2" value="css"> css
<input type="checkbox" name="cb3" value="javaScript"> javaScript
</p>
<input type="hidden" name="hidden01" value="hidden_value">
<p>
지역
<select name="selected">
<optgroup label="서울">
<option value="kang-nam">강남</option>
<option value="sa-dang">사당</option>
<option value="yeok-sam">역삼</option>
</optgroup>
<optgroup label="경기">
<option value="suwon">수원</option>
<option value="anyang">안양</option>
<option value="hanam">하남</option>
</optgroup>
</select>
</p>
<p>
<input type="submit" value="전송"><input type="reset" value="취소">
<input type="button" value="그냥 버튼">
</p>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
div{
border:1px dashed cornflowerblue; /*모든 div 태그에 테두리를 지정*/
margin: 10px; /*테두리 바깥쪽 여백-*/
}
#body {
/* id가 body 인 태그의 style 지정*/
height: 400px;
}
#left {
width: 55%;
height: 85%;
float: left;
}
#right {
width: 35%;
height: 85%;
float: right;
}
</style>
</head>
<body>
<!--
시멘틱 구조, 시멘틱 태그
header : 제목, 로고, 아이콘 ,...
nav : 메뉴
section : 컨텐츠를 주제별로 묶고 싶을 경우
article : 독립적으로 사용할 수 있는 내용을 정의
aside : 광고나 메인내용과 상관없는 내용을 정의
footer : 저자, 저작권, 연락처, ....
-->
<div id = "header">
<h1> 제목 </h1>
<div>
<span>
<a href="html01_block_inline.html">메뉴1</a>
</span>
<span>
<a href="html02_title.html">메뉴2</a>
</span>
<span>
<a href="html03_hr_quotation.html">메뉴3</a>
</span>
<span>
<a href="html04_text.html">메뉴4</a>
</span>
</div>
</div>
<hr>
<div id="body">
<div id="left">
<p>왼쪽 본문 내용</p>
</div>
<div id="right">
<p>오른쪽 본문 내용</p>
<div id="login">
<table>
<tr>
<th>ID</th>
<td><input type="text"></td>
</tr>
<tr>
<th>PW</th>
<td><input type="text"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="전송"></td>
</tr>
</table>
</div>
</div>
</div>
<hr>
<div id="footer">
<address>copyright © all rights reserved ...</address>
</div>
</body>
</html>
시맨틱 태그
의미를 가지는 태그
header : 헤더를 의미 (일반적인 헤더에 들어가는 것들 제목, 로고, 아이콘)
nav : 메뉴 , 하이퍼링크를 모아놓은 부분
aside : 사이드에 위치하는 공간, 광고나 메인내용과 상관없는 내용을 정의
section : 본문의 여러 내용 (article)을 포함하는 공간, 컨텐츠를 주제별로 묶고 싶을 경우
article : 본문의 주 내용이 들어가는 공간, 독립적으로 사용할 수 있는 내용을 정의
footer : 저자, 저작권, 연락처등이 들어간다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.html5 {
border: 1px dotted coral;
margin: 10px;
}
section {
height: 400px;
}
#left {
width: 45%;
height: 85%;
float: left;
}
#right {
width: 45%;
height: 85%;
float: right;
}
</style>
</head>
<body>
<header class="html5">
<h1>제목</h1>
<nav class="html5">
<span> 메뉴 1 </span>
<span> 메뉴 2 </span>
<span> 메뉴 3 </span>
<span> 메뉴 4 </span>
</nav>
</header>
<section class="html5">
<article class="html5" id="left">
<p>왼쪽 본문 내용</p>
</article>
<article class="html5" id="right">
<p>오른쪽 본문 내용</p>
</article>
</section>
<footer class="html5">
<address>copyright © all rights reserved ...</address>
</footer>
<!-- 같은 스타일을 여러 종류의 태그에 적용하고 싶을 경우 위와 같이 class로 변수를 똑같이 지정하여 css 지정해준다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS</title>
<!-- 외부에서 css 파일 불러오기 -->
<link href="resources/css01.css" rel="stylesheet" type="text/css">
<!-- 내부에서 css 적용하기 -->
<style type="text/css">
p {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<!-- css Cascading Style Sheets -->
<h1>css 기본문법</h1>
<h3>작성 방식 3가지</h3>
<b style="color: coral;">1. 인라인 스타일시트 : 우선순위가 높다</b>
<p>
<span>2. 내부 스타일시트 : html 내부에서 간단하게 작성</span>
<!-- title 아래에 style태그 사용 -->
<br>
<b>3. 외부 스타일시트 : 외부에 css 파일을 만들어서 현재 html 파일에서 불러오는 방법</b>
<!--
b 태그가 2개인데 왜 이거만 외부 css 파일의 영향을 받을까?
위에 선언된 b 태그는 인라인 스타일시트가 적용되어있다, 인라인 스타일시트가 우선순위가 높기때문!
-->
</p>
</body>
</html>
css01.css
/*
주 석
*/
b {
color : yellowgreen;
}
'기록 > 자바_국비' 카테고리의 다른 글
| [배운내용정리] 0114 자바 국비교육 _ HTML_CSS (0) | 2021.01.14 |
|---|---|
| [배운내용정리] 0113 자바 국비교육 _ HTML_CSS (0) | 2021.01.13 |
| [배운내용정리] 0111 자바 국비교육 _ HTML (0) | 2021.01.11 |
| [배운내용정리] 0108 자바 국비교육 _ HTML (0) | 2021.01.10 |
| [배운내용정리] 0107 자바 국비교육 _ Oracle + JDBC (0) | 2021.01.10 |
