Contents
접기
영역 분할 태그
브라우저 내에서 공통된 역할을 담당하는 요소들을 집합시켜 다른 요소와 구별하고
그룹화된 요소를 브라우저의 특정 위치에 배치시키도록 하기 위한 태그
| 영역분할 태그 | ||
| 블럭 요소 | - 위에서 아래로 쌓이는 구조이다. - 경계가 있다. (boder-box) - 너비와 높이가 적용된다. (css를 이용해 너비와 높이 그리고 위치를 조정할 수 있다.) |
|
| - div 태그 : 영역분할에 사용되는 대표적인 태그 - 너비와 높이가 있다.(인라인 요소는 너비와 높이를 조정할 수 없다.) - 외에도 sementic 태그인 header, footer, section, article hn,p, ol, ul, dl 등이 있다. |
||
| 인라인 요소 | - 왼쪽에서 오른쪽으로 쌓이는 구조이다. - 경계 속성이 없다. - 인라인 요소는 너비와 높이를 줄 수 없다. (바꾸고 싶다면 css) |
|
| - span 태그 : 인라인 요소이면서 인라인 요소의 영역분할 담당 - b, i, u, img, a, span, (텍스트)...등이 있다. |
||
| 특이점 | - 인라인 요소를 블럭요소로, 블럭 요소를 인라인 요소로 변경할 수 있다. display: inline-block; (css 에서 사용) |
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>영역 분할 태그</title>
</head>
<body>
<h2>영역 분할 태그</h2>
<p>
브라우저 내에서 공통된 역할을 담당하는 요소들을 집합시켜 다른 요소와 구별하고 <br>
그룹화된 요소를 브라우저의 특정 위치에 배치시키도록 하기 위한 태그
</p>
<hr>
<h3>div 태그 - 영역분할에 사용되는 대표적인 태그</h3>
<fieldset>
<legend>블럭 요소의 특징</legend>
<ul>
<li>위에서 아래로 쌓이는 구조이다.</li>
<li>경계가 있다. (boder-box)</li>
<li>너비와 높이가 적용된다. - css를 이용해 너비와 높이 그리고 위치를 조정할 수 있다.</li>
<li>
div 태그 외에도 sementic 태그인 header, footer, section, article
hn,p, ol, ul, dl 등도 블럭요소로써 너비와 높이가 있다.(인라인 요소는 너비와 높이를 조정할 수 없다.)
<br> 인라인 요소를 블럭요소로, 블럭 요소를 인라인 요소로 변경할 수 있다.
</li>
</ul>
</fieldset>
<h3>span 태그 - 인라인 요소이면서 인라인 요소의 영역분할 담당</h3>
<fieldset>
<legend>인라인 요소의 특징</legend>
<ul>
<li>왼쪽에서 오른쪽으로 쌓이는 구조이다.</li>
<li>경계 속성이 없다.</li>
<li>인라인 요소는 너비와 높이를 줄 수 없다. (바꾸고 싶다면 css)</li>
<li>b, i, u, img, a, span, (텍스트)...</li>
</ul>
</fieldset>
</body>
</html>
form 태그
- 사용자의 정보를 입력받는 태그
- form 요소는 사용자의 데이터를 입력받는 요소들을 의미한다.
- form 요소의 대부분은 인라인 요소이다.
- 회원 가입 화면, 로그인 화면, 회원 정보 수정 화면, 검색창 등이 모두 폼 관련 태그로 구성된다.
| form 태그 | ||
| method | 사용자가 입력한 내용들을 서버쪽 프로그램으로 어떻게 넘겨줄지 지정 | |
| 속성값 | get - 주소 표시 줄에 사용자가 입력한 내용이 그대로 드러난다. 256 byte ~ 4096 byte 까지의 데이터만 서버로 넘길 수 있다. |
|
| post - 대부분의 방식. 사용자의 입력을 표준 입력으로 넘겨주기 때문에 입력 내용의 길이에 제한을 받지 않고 사용자가 입력한 내용이 드러나지 않아야 한다. |
||
| name | 폼의 이름을 지정. 한 문서 안에 여러개의 <form> 태그가 있을 경우 폼들을 구분하기 위해 사용한다. | |
| action | <form> 태그 안의 내용들을 처리해줄 서버 상의 프로그램을 지정 | |
| target | action 속성에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다. | |
input type - 입력
| 코드 | 의미 |
| <label for="userid">Uesr Id : </label> <input type="text" maxlength="15" name="userid" id="userid" placeholder="아이디 입력"> |
- type="text" : 한 줄의 텍스트를 입력하기 위한 용도 - label for 와 id 값이 일치 해야 동일한 것이라고 인식한다. - name : 서버에서 변수명으로 쓰인다. - maxlength : 쓸 수 있는 길이를 정해 놓았다. (한글은 더 길게 잡아야 한다.) |
| <input type="password" maxlength="15" name="userpwd" id="userpwd" placeholder = "비밀번호 입력" > | - type="password" : 비밀번호 등 외부에 노출되지 않는 정보를 입력하기 위한 용도 - 입력을 해도 보이지 않게 . 이나 * 로 가려준다. |
| <input type="hidden" name="hiddenData" value="서버로 전달되는 데이터 값"> |
- <span>type = "hidden"</span> - type="hidden" : 사용자에게 보이지는 않지만 서버로 넘어가는 정보를 정의하는 필드 (반드시 value 와 name 을 지정해야한다.) |
| <label for="picture">사진 첨부</label> <input type="file" name="picture" id="picture"> <form action="" method="post" enctype="multipart/form-data"> |
- type="file" : 파일을 서버에 첨부해서 전송하기 위한 버튼. 반드시 2가지 정보를 추가해야 한다. -form 태그에서 1) method="post", 2) enctype="multipart/form-data" 속성 |
<!-- *** -->
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- action = 사용할 서버를 작성한다.-->
<form action="" method="post" enctype="multipart/form-data">
<!-- 중요한 정보는 post로 ! -->
<div class="content">
<div class ="header">
<h2>사용자의 정보를 입력받는 태그</h2>
<p>
form 요소는 사용자의 데이터를 입력받는 요소들을 의미한다. <br>
form 요소의 대부분은 인라인 요소이다. <br>
회원 가입 화면, 로그인 화면, 회원 정보 수정 화면, 검색창 등이 모두 폼 관련 태그로 구성된다.
</p>
</div>
<div class="article">
<h3>input 태그 중 입력 상자 : type="text", type="password", type = "hidden"</h3>
<fieldset>
<legend>사용자로부터 직접 입력</legend>
<label for="userid">Uesr Id : </label>
<!-- label for 와 id 값이 일치 해야 동일한 것이라고 인식한다. -->
<!-- name = 서버의 변수명-->
<input type="text" maxlength="15" name="userid" id="userid" placeholder="아이디 입력">
<label for="userpwd">Password : </label>
<input type="password" maxlength="15" name="userpwd" id="userpwd" placeholder = "비밀번호 입력" >
<!-- 입력을 해도 보이지 않게 . 이나 * 로 가려준다. -->
<!-- <span>type = "hidden"</span> -->
<!-- 사용자는 보지 못하고 서버쪽으로 정보를 넘길때 사용하는 옵션이다. -->
<input type="hidden" name="hiddenData" value="서버로 전달되는 데이터 값">
<label for="picture">사진 첨부</label>
<input type="file" name="picture" id="picture">
</fieldset>
</div>
input type -선택
- name 속성은 같은 이름으로 설정해야 같은 그룹이 된다.
- checked="checked" 속성은 가장 많이 사용하는 사용자의 지역으로 미리 선택 해놓는다.
| 코드 | 의미 |
| <input type="radio" name="location" checked="checked"> 서울 <input type="radio" name="location"> 부산 |
- type="radio" : 여러 항목중에 하나만 선택할 때 사용 |
| <select name="school" id=""> <optgroup> <option value="서울고등학교">서울고등학교</option> <option value="RED">빨강색</option> </optgroup> </select> |
- select / option : 여러 항목 중에 하나만 선택할때 사용 - <optgroup> : option 을 그룹화 시키는 역할이다. |
| <input type="checkbox" name="hobby" id="" value="낚시" checked="checked"> 낚시 <input type="checkbox" name="hobby" id="" value="자전거" > 자전거 |
- input type="checkbox" : 여러 항목 중 여러 개를 선택할 때 사용 - : 줄바꿈을 일으키지 않으면서 공백을 넣고 싶을 때 사용 |
| <label for="reason">반품사유</label> <textarea name="" id="" cols="100" rows="10"></textarea> |
- <textarea> : 여러 줄 글 상자 -시작태그와 끝태그 사이에 내용이 들어가면 안된다. cols = 컬럼의 수 rows = 줄 수 |
<div class="article">
<h3>type="radio" : 여러 항목중에 하나만 선택할 때 사용</h3>
<fieldset>
<legend>Location</legend>
<!-- name 속성은 같은 이름으로 설정해야 같은 그룹이 된다.-->
<!-- checked="checked" 속성은 가장 많이 사용하는 사용자의 지역으로 미리 선택 해놓는다.
전부 이 속성을 적어놓으면 마지막 값에 적용된다.-->
<input type="radio" name="location" checked="checked"> 서울
<input type="radio" name="location"> 부산
<input type="radio" name="location"> 제주
</fieldset>
<h3>select / option : 여러 항목 중에 하나만 선택할때 사용</h3>
<fieldset>
<legend>출신학교</legend>
<select name="school" id="">
<optgroup>
<option value="서울고등학교">서울고등학교</option>
<option value="경기고등학교">경기고등학교</option>
<option value="부산고등학교">부산고등학교</option>
<option value="제주고등학교">제주고등학교</option>
</optgroup>
</select>
<select name="color" id="">
<optgroup> <!--option 을 그룹화 시키는 역할-->
<option value="RED">빨강색</option>
<option value="BLUE">파란색</option>
<option value="YELLOW">노란색</option>
<option value="SKYBLUE">하늘색</option>
</optgroup>
</select>
</fieldset>
</div>
<div class="article">
<h3>input type="checkbox" : 여러 항목 중에 여러개를 선택할 때 사용</h3>
<fieldset>
<legend>Hobby</legend>
<input type="checkbox" name="hobby" id="" value="낚시" checked="checked"> 낚시
<input type="checkbox" name="hobby" id="" value="자전거" > 자전거
<input type="checkbox" name="hobby" id="" value="수영"> 수영
<input type="checkbox" name="hobby" id="" value="등산"> 등산
</fieldset>
<fieldset>
<h3>select / option : multiple 속성을 이용해서 여러개 선택할 수 있다.</h3>
<select name="color2" multiple="multiple">
<optgroup> <!--option 을 그룹화 시키는 역할-->
<option value="RED">빨강색</option>
<option value="BLUE">파란색</option>
<option value="YELLOW">노란색</option>
<option value="SKYBLUE">하늘색</option>
</optgroup>
</select>
</fieldset>
</div>
<div class="article">
<h3>textarea : 여러 줄 글 상자</h3>
<label for="reason">반품사유</label>
<textarea name="" id="" cols="100" rows="10"></textarea>
<!-- 시작태그와 끝태그 사이에 내용이 들어가면 안된다. cols = 컬럼의 수 rows = 줄 수 -->
</div>
input type - 버튼
| 코드 | 의미 |
| <input type="button" value="전송"> | type="button" : 버튼 모양을 생성. 아무런 기능도 없다. (JS와 연동해서 주로 사용 -> 모양만 버튼으로 만들고 추가 작업을 하지 않을때) |
| <input type="submit" value="전송2"> |
type="submit" : from action 속성에 지정한 URL(혹은 서버프로그램-경로) 로 데이터를 전송할때 사용 |
| <input type="reset" value="취소"> |
type="reset" : 리셋 버튼(입력 초기화) |
<div class="btngroup">
<input type="button" value="전송">
<input type="submit" value="전송2">
<input type="reset" value="취소">
</div>
</div>
</form>
</body>
</html>
method 에서 post 와 get 방식의 차이
만들어진 html 브라우저에서 개인정보를 입력 했을때를 가정해보자
| method 에서 post 와 get 방식의 차이 | |
| post 방식 | get 방식 |
| 사용자가 입력한 내용이 드러나지 않아야 한다. |
주소 표시 줄에 사용자가 입력한 내용이 그대로 드러난다. |
| <form action="" method="post" enctype="multipart/form-data"> | <form action=""> |
| 파일 경로 : file:///Users/___ /Library/CloudStorage/GoogleDrive-______@gmail.com/My%20Drive/workspace/Test_Frontend/html/Day_02/formContent.html |
파일경로 : file:///Users/___ /Library/CloudStorage/GoogleDrive-_____@gmail.com/My%20Drive/workspace/Test_Frontend/html/Day_02/formContent.html?userid=1234&userpwd=1234&hiddenData=%EC%84%9C%EB%B2%84%EB%A1%9C+%EC%A0%84%EB%8B%AC%EB%90%98%EB%8A%94+%EB%8D%B0%EC%9D%B4%ED%84%B0+%EA%B0%92&picture=pic3.jpeg&location=on&school=%EB%B6%80%EC%82%B0%EA%B3%A0%EB%93%B1%ED%95%99%EA%B5%90&color=BLUE&hobby=%EB%82%9A%EC%8B%9C&hobby=%EB%93%B1%EC%82%B0&color2=YELLOW |
'풀스택 개발 학습 과정 > 프론트엔드' 카테고리의 다른 글
| [HTML + CSS]CSS 3 - Position (0) | 2024.02.25 |
|---|---|
| [HTML + CSS] CSS 2 - 텍스트 스타일, 배경색과 이미지, Display, Float (0) | 2024.02.25 |
| [HTML + CSS] CSS 1 - CSS 선택자 종류 (0) | 2024.02.17 |
| [HTML + CSS] HTML 태그 - 1 (0) | 2024.02.15 |
