2022. 8. 10. 18:21ㆍ국비학원기록/html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div와 span요소</title>
#블록요소는 한 줄 전체를 쓰는것, 인라인요소는 한줄 전체가 아닌 작성한 내용만큼의 공간만 쓰는것#
#div는 만약 인라인요소를 div로 묶을시 그 부분을 블록요소로 만들어 한 줄 전체를 공간으로 쓰게만듬#
#span은 반대로 인라인요소로 만들어서 작성한 그 공간만큼만 쓰게 만드는것#
<style>
/* *{border: solid blue 1px;} */ #경계선 속성값 주석 #
.space {border:solid red 1px;} # 지정한 클래스에 경계선 빨간색 1px을 적용 이하 동문 #
.span1 {color:black; border: solid purple 1px;} # 이하 동문 #
.span2 {color:blue: border: solid purple 1px;} # 이하 동문 #
</style>
</head>
<body>
<div>
<h2>div요소" 블록 공간 사용</h2>
<p class="space">p 요소 공간 </p>
<strong>텍스트</strong>
</div>
<hr>
<div>
이름:이순신
<span class="span1">이름: &npsp;</span><span class"span2">이순신</span> # 스판으로 묶어 공간축소 #
</div>
<hr>
<span style="border: solid purple 1px; display:block; padding: 10 px; margin: 30px; margin-left: 0px;">
블록으로 표시되는 span
# display:block; 속성값을 넣어 스판요소를 블록값으로 변환시킨것 #
<!-- 기본적인 div와 span 사용시 주의사항-->
<style>
div, span {border:dotted red 1px;} #스타일 값에 넣어 아래 div 및 span 값에 일괄적으로 경계선 적용#
</style>
<div><span>span내용1</span><span>span내용2</span></div>
# 위의 방법 (div 요소 안에 span 사용)은 올바른 사용법입니다. #
<hr>
#아래의 방법은 (span 요소 안에 div 사용)은 바람직하지 않은 방법입니다. 그냥 div로 묶어서 스판처리를 하는게 나음 굳이 아래 방법으로 안해도 된다#
<span><div>div내용1</div><div>내용2</div></span>
</body>
</html>
======================================================================================
다양한 타입의 input 요소
HTML에서는 다양한 타입의 input 요소를 사용하여 사용자로부터 입력을 받을 수 있습니다.
HTML에서 사용할 수 있는 대표적인 input 요소의 타입은 다음과 같습니다.
1. 텍스트 입력(text)
2. 비밀번호 입력(password) 암호는 한글x
3. 라디오 버튼(radio)
4. 체크박스(checkbox)
5. 파일 선택(file)
6. 선택 입력(select) <밸류값 넣지말기>
7. 문장 입력(textarea)
8. 버튼 입력(button)
9. 전송 버튼(submit)
10. 필드셋(fieldset)
HTML5 input 요소의 속성
HTML5에서 새롭게 추가된 input 요소의 속성은 다음과 같습니다.
1. autocomplete
2. autofocus
3. form
4. formaction
5. formenctype
6. formmethod
7. formnovalidate
8. formtarget
9. height and width
10. list
11. min and max
12. multiple
13. pattern
14. placeholder
15. required
16. step
HTML5에서 추가된 input 요소의 타입
HTML5에서 새롭게 추가된 input 요소의 타입은 다음과 같습니다.
1. 숫자 입력(number)
2. 입력 범위 지정(range)
3. 색상 입력(color)
4. 날짜 입력(date)
5. 시간 입력(time)
6. 날짜와 시간 입력(datetime-local)
7. 연도와 월 입력(month)
8. 연도와 주 입력(week)
9. 이메일 입력(email)
10. URL 주소 입력(url)
11. 전화번호 입력(tel)
12. 검색어 입력(search)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>입력요소</title> #입력요소 input type 들에 관한 수업, input 타입값 미 지정시 타입이 text로 자동지정됨 #
</head>
<body>
<h2> 사용자 입력 처리요소 </h2>
<h3>텍스트 및 암호 입력</h3>
<form>
<fieldset style="width:20%">
# fieldset 태그는 시작태그부터 끝 태그까지를 묶는것임 경계선 지정시 사진처럼 경계선도 표시해줌#
<input type="text" name="userld" id="userld" placeholder="아이디를 입력하세요" autofocus>
# <!-- id는 "html문서 내에서만" 호출할때 사용하는 것 아이디는 한 html 문서에서 1나의 id만 지정가능 중복x --> #
#고로 다수의 태그 변경할때는 클래스를 지정하여 이용하고 유니크한건 id로 지정하면 될 듯#
# <!-- autofocus 사용자 입력을 할때 html을 키자마자 제일 첫번째칸을 선택, 강조해줌 --> #
<input type="password" name="userPw" id="userPw" placeholder="암호를 입력하세요">
<hr>
<input type="text" name="userld" id="userld" placeholder="아이디를 입력하세요" value="user01" readonly>
#입력 요소 타입을 텍스트로 지정하고 변수를 userld로 선언, id값은 userld로 선언, 텍스트창에 placeholder 속성 값을 이용하여 "아이디를 입력하세요" 라고 미리보기텍스트 되있게 지정, value값은 "user01"값을 지정,
밸류값을 미리 지정해놓으면 그 값을 처음에 적용시켜놓을 수 있고 지우고 다른텍스트를 입력시 그 내용에 밸류값으로 바뀌어서 변수 그릇에 담기는것임 밸류를 미리 지정했다고해서 후에 사용자가 텍스트를 입력한다고 밸류값이 고정되는건 아니라함
텍스트 입력시 그 값이 value 값이 되고 그 value 값이 name로 지정한 userld 값에 담겨 서버로 전송함 readonly 속성은 보기만 가능하고 텍스트입력은 안되게 한다는 뜻 #
<input type="password" name="userPw" id="userPw" placeholder="암호를 입력하세요" value="1111">
#마찬가지로 입력 요소 타입을 "password" 값으로 지정 하여 비밀번호 입력으로 바꾸고 name, 즉 변수값을
userPw로 선언, id 값도 userPw로 지정함 플레이스홀더를 통해 암호를 입력하세요 문구를 미리보기로 띄워줌
밸류값이 들어가있는건 그냥 예시로 숫자가 가려지는지 보여주기위해 넣어주신듯?#
</fieldset>
일반텍스트입니다.
<br>
<br>
<fieldset> # 필드셋 태그로 묶어줌 #
<!-- 밸류값이 네임으로 지정한 변수값에 담겨 서버로 전송되는 예시-->
<input type="radio" name="fruit" value="apple"> 사과 <br>
# 입력요소 타입을 "라디오"로 지정하여 체크목록을 만들어줌 fruit 을 변수값으로 선언,
사과라고 적혀있는 텍스트 옆에 버튼을 누르면 apple 라는 밸류값이 fruit 변수값에 담겨 서버에 전송됨#
<input type="radio" name="fruit" value="orange" checked> 오렌지<br>
#위와 같지만 checked 체크드 속성값은 처음부터 클라이언트에서 오렌지부터 체크가 되있게끔 설정하는 기본값을 설정해준것임#
<input type="radio" name="fruit" value="배"> 배<br>
<input type="radio" name="fruit" value="수박" disabled> 수박<br>
#disabled 속성은 적용시 해당 태그를 비활성화 시킴 즉 체크하지 못하게 함
#변수값이 4개다 같은건 어떤 선택을해도 해당하는 과일의 밸류값으로 변경되어
그 변수값에 담기게 하기 위해서인듯 예시로 사과옆에있는 라디오 버튼을 체크하면
사과옆 밸류값 apple가 fruit 변수에 담겨져 서버에 전송됨 이하 동문 #
</fieldset> #필드셋 묶기 끝#
<hr>
<input type="file" name="uploads" accept="image/*">
#입력요소 타입을 "file" 즉 파일로 지정함 변수명은 uploads로 선언, 파일첨부시 사용하는 입력요소타입임.
accept="image/* 이건 파일 첨부시 모든 이미지 파일 전부를 확장자 상관없이 보여주겠다는 뜻#
<input type"file" name="uploads" multiple>
#마찬가지로 같은 파일첨부 입력요소 타입이지만 뒤에 multiple, 멀티플 속성을 넣어서 한번에 여러개의 파일을
첨부할 수 있게 해줌 저 속성값이 없으면 1개의 파일밖에 첨부하지 못함#
<hr>
<input type="reset" value"전체 다시 입력">
# <!-- value 속성이 없으면, 초기화가 버튼 기본값, 클라이언트의 입력요소를 초기화함--> #
<input type="button" value="버튼1">
<input type=submit" value="로그인">
#<!--value 속성이 없으면, 제출이 버튼기본값으로 적용 서버 전송 버튼-->#
<hr>
<button type="reset">전체 다시 입력</button>
<button type="button">버튼2</button>
<button type="submit">로그인</button>
<input type="hidden" name="userGrade" value="평민"> # <!--히든값에 대해 다시 알아보기--> #
<hr>
<textarea name="opinion" style="width:350px; height:150px; "placeholder="의견을 작성해주세요..."
></textarea><br>
# textarea 태그는 텍스트를 작성하는 사각형 공간을 만듬, 변수는 opinion으로 선언, 스타일값을 통해 크기 조절한뒤
플레이스 홀더로 기본 미리보기 값을 지정했음, 추가 팁으로 textarea 열고 닫음 사이에 여백, 내용이 있으면 안되고 코드 정리시에도 저런식으로 붙여야 공백없이 서버에 전송시킬 수 있음 #
<textarea name="opinion" cols="50: rows="20: placeholder+"의견을 작성해주세요.."><textarea>
# cols는 글자수로 사이즈를 변경 #
# rows는 세로 글자수 사이즈로 변경 #
<hr>
이름 : <br><input type="text" name="student_name" maxlength="50" size="30"><br>
# maxlength=" " 는 최대 글자수 제한하는 속성값이다.
즉 클라이언트에서 입력할 수 있는 텍스트를 50글자로 제한했다는 것 #
# size=" "는 보이는 사이즈를 제한하는것 20이면 20글자수까지 보이게끔 변경한다 #
학번 : <br><input type="text" name="student_id"><br>
#이하 동문#
<hr>
<input type"text" name="value1" autocompleate="on">
#autocompleate 속성은 값을 on으로 줬을시 해당 텍스트 타입 입력요소에
클라이언트가 입력했던 내용을 저장하여 미리보기로 표시해주는 기능이다.
즉 해당 입력요소에 epdy100@gmail.com 을 입력했다면 그 밑에 같은 epdy100@gmail.com 저장되었던게 미리보기로 표시된다 자동로그인이나 로그인정보 저장 같은 기능임 #
</form>
</body>
</head>
'국비학원기록 > html' 카테고리의 다른 글
| 3일차 추가 인풋 및 레이아웃 (0) | 2022.08.11 |
|---|---|
| 1일차 HTML 기초 작성 (0) | 2022.08.09 |