안녕하세요. 오늘은 구획, 입력, 폼에 대해 알아보겠습니다 :)
구획
구획은 header, main, aside, footer, nav, div, span, section, article 태그가 있다.
이러한 구획은 의미가 있는 구획과 의미가 없는 구획이 있는데 header, main, aside, footer, nav, section, article은 의미가 있는 구획으로 할 수 있고 div, span은 의미가 없는 구획으로 말할 수 있다. 각각의 구획 태그를 코드를 통해 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>구획</title>
</head>
<body>
<header></header>
<!-- header : 페이지 상단부 구획, 메뉴, 로그인, 회원가입, 고객센터 버튼 -->
<main></main>
<!-- main : 페이지의 메인 내용 -->
<aside></aside>
<!-- aside : 페이지의 부수적인 내용-->
<footer></footer>
<!-- footer : 페이지 하단부 구획, 주고 사업자정보, 연락처, 저작권, 사이트맵 등등 표시-->
<nav></nav>
<!-- nav : Navigator 메뉴를 담는데 이용한다. 메뉴, 사이트 맵, 뭔가 다른 페이지로 이동하는 것들을 모아 놓는 것. -->
<!------------------------------------------------------->
<!-- 의미 없는 구획 -->
<div></div>
<!-- div : divide 단순히 나누기 위해 사용. -->
<span></span>
<!-- span : 단순히 나누기 위해 사용. -->
<!-- 의미 있는 구획 -->
<section></section>
<article>
<h2>기사 제목</h2>
<section>
<video></video>
</section>
<div>광고 영역</div>
<section>
<p>기사 문단1</p>
<div>광고 영역</div>
<p>기사 문단2</p>
</section>
</article>
<!-- article : 홀로서기를 할 수 있다. -->
-->
</body>
</html>추가적으로 article과 section은 쓰임에서 많은 혼동을 가져다줄 수 있다고 한다. 개발자들이 어떻게 정의를 내리는지에 따라 쓰임이 다를 수 있지만 우리는 한 가지만 기억하도록 하자. article은 독립적으로 사용이 가능하며 section을 묶을 수 있다. 즉, section에 비해 article이 좀 더 구체적이라고 할 수 있다.
입력
사용자로부터 입력을 받기 위한 태그이다. 태그명은 input이고 다양한 속성들이 있다. 기본적인 input 속성들만 한번 나열해보겠다.
| checked | type이 checkbox이거나 radio인 input을 기본적으로 체크 |
| maxlength | 입력 값의 최대길이 |
| placeholder | 입력 값이 비어 있을 때 보여줄 문구 |
| min / max | 입력 값이 숫자인 경우, 최소 / 최대 값을 지정 |
| value | 입력의 값 |
| type | 입력 값의 type |
type 속성에는 다양한 값들이 있는데 코드를 통해 하나씩 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>입력</title>
</head>
<body>
<input type="button" value="로그인">
<br>
<label>
<input type="checkbox">
<a>자동 로그인</a>
</label>
<br>
<input type="email" maxlength="10">
<br>
<input type="password">
<br>
<input type="text">
<br>
<input type="file" accept=".jpg,.jpeg,.png">
<br>
<label>
<input name="gender" type="radio">
<a>남</a>
<label>
<input name="gender" type="radio">
<a>여</a>
</label>
<label>
<input name="gender" type="radio">
<a>기타</a>
</label>
<br>
<input type="number" min="10" max="20">
<br>
<input type="tel" placeholder="전화번호를 입력해주세요." value="010">
<!-- type 속성 :
- button : 버튼. value 속성 값으로 텍스트 지정.
- checkbox : 체크 박스. (자동 로그인)
- email : 이메일을 입력 받음.
- file : 파일 업로드 시 이용. accept를 이용해 특정 파일을 받을 수 있게 할 수 있다.
- number : 숫자를 입력 받음.
- password : 비밀번호를 입력 받음.
-radio : 라디오. 선다형 입력. name 속성 값을 같이 이용한다. 서로 연관이 되어있고 그 중 하나만 선택이 되어야 하는 radio들 끼리 동일한 name을 부여한다.
- tel : 전화번호
- text : 일반 텍스트
- reset : 동일한 form 요소 안에 있는 input 값을 초기화한다.
- submit : 동일한 form 요소 안에 있는 input 값을 서버로 전송한다. (요청)
button을 제외한 나머지 type들은 label로 감싸줘야됨.
-->
</body>
</html>
추가적으로 input 태그 말고 select 태그 또한 다양한 선택지에서 하나의 선택을 할 수 있게 하는 태그이며 select 또한 코드를 통해 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>셀렉트</title>
</head>
<body>
<select>
<option disabled selected style="display: none;">통신사 선택</option>
<option>KT</option>
<option>SKT</option>
<option>LGU+</option>
<option>CJ헬로비전</option>
<option>KT알뜰</option>
<option>SKT알뜰</option>
<option>LGU+알뜰</option>
</select>
<!--select : 역할은 radio와 같다. 콤보박스(Combo Box), 드롭다운 박스(Dropdown Box)-->
</body>
</html>
폼
서버로 input 값을 넘겨주기 위해 존재하는 래퍼(wrapper)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>폼</title>
</head>
<body>
<form>
<!-- form : 서버로 인풋 값을 넘겨주기 위해 존재하는 래퍼(Wrapper)
input 중 type이 submit인 버튼을 클릭하면 값을 전송한다.
action 속성 : form 안에 있는 인풋값들을 어느 주소로 요청을 보낼 것인가?
미설정시 동일한 주소로 요청을 보냄
method 속성 : 어떠한 방식으로 요청을 보내는가? 미설정시 get. 값은 get 혹은 post를 이용가능.
-->
<label>
<span>이메일</span>
<input name="email" placeholder="이메일" type="email">
</label>
<br>
<label>
<span>비밀번호</span>
<input maxlength="100" name="password" placeholder="비밀번호" type="password">
</label>
<br>
<label>
<input name="autosign" type="checkbox">
<span>자동 로그인</span>
</label>
<br>
<input type="submit" value="로그인">
</form>
</body>
</html>이렇게 만들어진 화면의 주소는 값을 넣은 뒤 type이 submit으로 된 로그인 창을 누르면 기존의 주소와는 다른 새로운 주소가 나오게 되는데 여기서 나오는 주소의 "?"뒤부터는 주소로 인식하지 않으며 값으로 인식한다. "?"뒤부터는 {키}={값} 쌍으로 이루어져 있고 구분은 &(엠 퍼센트)로 한다. 여기서 키는 input과 select 요소의 name 속성 값이 된다. 값은 value다.
폼 코드 결과 (값을 넣지 않은)
폼 코드 결과 (값을 넣은 후)
값을 넣고 난 주소에는 {키}={값}으로 이메일과 비밀번호를 알려줌.
위에 폼에는 method 속성을 설정하지 않았으므로 get 방식을 통해 모두 나오지만 post 방식을 사용하면 위 주소의 {키}={값}은 나오지 않는다.
이상으로 구획, 입력, 폼에 대해 포스팅을 마치겠습니다. 벌써 내일이면 월요일이네요...............
즐거운 일요일 보내세요!
'HTML&CSS' 카테고리의 다른 글
| [CSS]-3. GRID와 FLEX (1) | 2022.04.24 |
|---|---|
| [CSS]-2. POSITION (0) | 2022.04.20 |
| [CSS]-1. 적용방법 및 선택자 (0) | 2022.04.18 |
| 제목, 목록, 표 HTML (0) | 2022.04.16 |
| HTML (0) | 2022.04.14 |