20230327 kdt 학습일지
input 태그 : 입력 상자
type 속성
text: 문자를 입력받는 글상자
password: 비밀번호를 입력받는 글상자
radio: 여러개의 옵션 중에서 단 하나의 옵션만을 선택할 수 있도록 하는 버튼
✔️ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함
checkbox : 여러개의 옵션 중에서 다수의 옵션을 입력받을 수 있도록 하는 버튼
✔️ 그룹을 맺기 위해 name 속성의 값을 동일하게 해야 함
file: 원하는 파일을 서버로 전송하기 위한 글상자
button: 이벤트가 없는 일반버튼
reset: 입력받은 데이터를 서버에 제출하는 버튼
submit: 원하는 데이터를 서버에 제출하는 버튼
hidden: 보이지는 않으나 서버에 값을 전달하고 싶을 때 사용하는 글상자
email: 이메일을 입력받는 글상자(@ 필요)
url: 사이트를 입력받는 글상자 (http 필요)
tel: 전화번호를 입력받는 글싱자(모바일에서 숫자 키패드를 사용)
date : 원하는 날짜를 입력받는 글상자
number: 원하는 숫자를 입력받는 글상자
<input type ="number" min= "최소값" max ="최대값" step="증가값">
color: 원하는 색상을 입력받는 요소(선택한 색생은 16진수 RGB 컬러값으로 서버에 전달)
search: 검색어를 입력받는 글상자
range: 일정 범위안에 값만을 입력하는 조절바
<input type ="range" min= "최소값" max ="최대값" value="현재값">
속성
name: 요소의 이름을 설정, 서버에서 값을 전달받을 때 key로 사용
id: 요소의 유일한 이름을 설정. HTML문서에서 해당 요소의 스타일을 주거나 동적인 프로그래밍을 할 때 사용(HTML문서내에서 다른 요소와 같은id를 가질 수 없음)
maxlength : 값의 최대 길이를 설정
placeholder: 입력 전 특정 데이터를 입력하도록 안내하는 값을 설정
value: 서버로 전달할 입력양식의 값을 설정
checked: 라디오 또는 체크박스 중에서 미리 값을 설정
readonly: 데이터를 볼 수 있으니 수정할 수 없게 설정(서버로 데이터가 전달됨)
disabled: 입력필드를 사용할 수 없게 설정(서버로 데이터가 전달되지 않음)
required: 데이터를 submmit할 때 필수로 입력하도록 강제하는 설정
라벨 태그
- 폼 양식에서이름을 붙이는 요소
- 다른 요소를 연결하면 해당 영역이 넓어짐
- radio,checkbox의 스타일을 설정시 많이 사용됨
<label for = "요소의 id"> 텍스트 또는 이미지 </label>
버튼 태그에서
- 버튼을 생성하는 요소
- type="reset",type="button", type="submit" (기본값)
<button>버튼클릭</button>
선택상자
- 여러개의 옵션이 드롭다운 르스트로 되어 이씅며 그 중에서 단 하나의 옵션만을 선택
<select>
<option value ="">김사과</option>
<option value ="">반하나</option>
<option value ="">오렌지</option>
</select>
여러줄 글상자
- 여러줄의 텍스트를 입력받는 글상자
<textarea cols="가로 글자수" rows="세로 줄수"> value</textarea>
HTML의 디슽플레이
1. inline
- content 크기 만큼만 자리를 차지하는 요소
- 텍스트, img, span,
- 텍스트의 특징을 가지고 있음
2. block
- 라인을 모두차지하는 요소
- p, h, ul, li, div ...
- 면의 특징을 가지고 있음
span 태그에서
- 줄 단위로 영역이 설정
- inline 특징을 가지고 있음
시맨틱 태그( semantic)
-Semantic: 의미론적인
- 의미가 있는 태그를 사용
시맨틱 태그의 장점
- 검색엔진 최적화
- 스크린 리더를 사용하여 페이지를 탐색할 때 도움
- div>div>div>div>... 끝없는 div를 탐색하는 것보다 효율적
- 개발자에게 명확한 의미를 전달
<header> </header>
- 페이지의 제목과 같은 소개 내용을 포함
- heading 태그나 로고, 검색양식, 작성자 이름등을 포함
<nav></nav>
- 메뉴, 목차등에 사용
<main>/</main>
- 지배적인 컨텐츠 영역을 나타내는 태그
<section></section>
- 구체적인 시맨틱 태그가 없는 문서의 독립적인 영역을 나타냄
- 섹션에는 향상 제목이 있는 것이 일반적
<article>/<article>
- 자체로 의미가 있는 웹페이지 부분이며, 독립적으로 배포 또는 재사용되도록 의도된 문서
- 게시물, 잡지, 블로그 또는 신문기사
<footer>/</footer>
- 작성자에 대한 정보, 저작권 데이터 또는 관련 문서에 대한 링크, 카피라이트 등을 포함
<asdie>/</aside>
- 간접적으로 문서와 관련된 내용
- 사이드바
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>폼 태그</title>
</head>
<body>
<h2>폼 태그</h2>
<from action="#" method="post">
<input type = 'hidden' name = 'hidden' value="서버에 전달될 값">
<p> 아이디: <input type="text" name='userid' id="userid" maxlength="20" placeholder="아이디를 입력하세요"></p>
<p> 비밀번호: <input type="password"name='password' id="userpw" maxlength="20"placeholder="비밀번호를 입력하세요"></p>
<p> 성별:<label for="male">남자</label><input type="radio"id='male'name='gender'value="남자"checked><label for ='female'>여자</label><input type="radio"id='female'name='gender'value="여자"></p>
<P>취미 : 운동<input type="checkbox" name="hobby" value="운동">음악감상<input type="checkbox" name = "hobby" value = "음악감상"> 영화감상<input type="checkbox" name = "hobby" value = "영화감상"> 등산 <input type="checkbox" name = "hobby" value = "등산"> </P>
<P>나이 :<input type='text' name='age'value = '-1'readonly></P>
<p> 주민등록번호:<input tyoe = 'text' name='ssn' disabled></p>
<P> 첨부파일: <input type="file" name = "file"></P>
<p>직업
<select name ="job">
<option value ="프로그래머">프로그래머</option>
<option value ="공무원">공무원</option>
<option value ="전문직">전문직</option>
<option value ="학생">학생</option>
<option value ="취준생">취준생</option>
</select>
</p>
<p>자기소개</p>
<p> <textarea name ="content" cols ="50" rows="5"></textarea></p>
<P> 이메일 : <input type = "email"></P>
<P> 웹사이트 : <input type = "url"></P>
<P> 휴대전화번호 : <input type = "tel"></P>
<P> 생년월일 <input type="date"></P>
<p>좋아하는 숫자: <input type ="number" min= "1" max ="10" step="1"></p>
<P> 좋아하는 색상 :<input type = "color"></P>
<P> 검색어 : <input type="search"></P>
<p> 프로그래밍 능력 : <input type ="range" min= "0" max ="5" value="3"></p>
<P><input type = 'button'value="클릭하세요"onclick="alert('안녕?!')"><input type = 'reset'value="다시입력"><input tupe ='submit'value ="회원가입"><button>버튼클릭</button>></P>
</from>
</body>
</html>
index. html -> resume. html
이력서 클릭
------------------------------과제-------------------------------------------------------과제----------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>homework</title>
<style>
table{width: 700px; height : 100px;border: 0px solid black}
td{border: 1px solid black;}
th{border: 1px solid black;}
</style>
</head>
<body>
<h1> 이력서 </h1>
<table>
<tr>
<td width="150" rowspan="4"><P><img src ="./images/짱구.png"></P></td>
<th>이름</th>
<th colspan="5">고짱구</th>
</tr>
<tr>
<th >나이</th>
<th width="500" colspan="5">24세</th>
</tr>
<tr>
<th >전화번호 </th>
<th colspan="5">010-1111-1111</th>
</tr>
<tr>
<th >주소</th>
<th colspan="5">어딜까요~!</th>
</tr>
</table>
<table>
<hr>
<tr>
<th height="10" colspan="5"> 인적사항</th>
</tr>
<tr>
<th width="90" height ="20" rowspan="2"> 고등학교</th>
<th> 떡잎고등학교</th>
</tr>
</table>
<table>
<tr>
<th width="90" height ="20" rowspan="2"> 대학교</th>
<th> 2010년 3월 2일 입학</th>
</tr>
<tr>
<th>2015년 2월 14일 졸업</th>
</tr>
</table>
<table>
<tr>
<th width="90" height ="10" rowspan="2"> 기타</th>
<th> </th>
</tr>
<tr>
<th></th>
</tr>
</table>
<table>
<hr>
<tr>
<th height="10" colspan="5"> 경력사항</th>
</tr>
<tr>
<th height="30" ></th>
<th> </th>
<th></th>
</tr>
<tr>
<th height="30" ></th>
<th> </th>
<th></th>
</tr>
<tr>
<th height="30" ></th>
<th> </th>
<th></th>
</tr>
<tr>
<th height="30" ></th>
<th> </th>
<th></th>
</tr>
</body>
</html>
--------------------------------------------------------------------------------------------
# index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>최초의 내 사이트</title>
</head>
<body>
<h1>내 홈페이지</h1>
<P>최초의 내 홈페이지에 오신걸 환영합니다</P>
<a href="homework.html"><img src="http://ko123458.dothome.co.kr/image/sea1.png" alt="이력서"></a>
</body>
</html>