- input박스와 label
<label for="email">이메일</label>
<input type="email" id="email"/>
for와 id는 같아야 이용하기 편리하다.
- form으로 둘러싸는 이유
<form action="loginAction">
<label for="email">이메일</label>
<input type="email" id="email"/>
<label for="pwd">비밀번호</label>
<input type="password" id="pwd"/>
<button type="submit">로그인</button>
</form>
form으로 둘러싸야 정보의 전송이 가능하다!
- radio버튼
- radio버튼 이용시 체크사항
1. label 을 제공하는 두가지 방법 확인
2. input type="radio" 의 모양 확인
3. input type="radio" 를 그룹으로 묶는 방법 확인
- 그룹으로 묶어서 field를 설명할 때 : fieldset을 이용
cf ) name속성은 server에서 식별하기 위한 attribute이다.
cf ) form method="get" 했을 때의 주소창
" file:///C:/ncs03/sublime_work/html/insertAction?id=abc&pwd=abc&gender=on " => 정보가 주소창을 통해 전달된다
gender=on : radio버튼을 선택해도 담아지지 않았음을 나타낸다.
-> radio버튼을 담을 곳이 필요
value값을 통해 값을 담을 수 있다.
file:///C:/ncs03/sublime_work/html/insertAction?id=abc&pwd=abc&gender=woman&hobby=book&ho
- checkbox
- 같은 name으로 묶어도 그룹화 되지 않는다.
**출력결과**
cf ) <fieldset>은 외곽선을 만들어준다.
꼭 기억하기! 1. label 을 제공하는 두가지 방법 확인 2. input type="radio" 의 모양 확인 3. input type="radio" 를 그룹으로 묶는 방법 확인 4. fieldset legend를 통해서 추가 정보를 제공 5. input type="checkbox"의 모양 확인 label로 묶어도 그룹화 안됨 6. select option 구성하는 방법 확인 -option을 정해놔야 처리가 편리해진다. 7. input type="file"의 역할 확인 8. textarea가 무엇인지 확인 -textarea는 개행기호까지 인식한다.
|
- CSS 종류
-내부CSS
<head>
<style>
/**내부 css**/
.bold {
font-weight: bold;
}
</style>
-inlineCSS
<body>
<span style="font-weight:bold;">possimus</span>
</body>
- CSS 대신 간략히 쓸 수 있는 html기호들
- <b> </b> : 단순히 굵은 글씨
- <strong> </strong> : 굵은글씨 + 강조의 느낌
- <i> </i> : 단순 이텔릭체
- <em> </em> : 이텔릭체 + 강조의 의미
- sub : 문자의 크기 작게 아래에 표현
- sup : 문자의 크기를 작게 위쪽에 표현
- ins : 밑줄 표현
- del : 글 가운데 줄긋기
- : 공백 한 칸 주기
- & : '&'를 표현하는 문자
- < > : < > 기호 사용할 때
- pre : 입력 그대로 출력하기
- address : address 입력시 구조 파악하기 쉽도록 입력
**출력 결과**
- <abbr> : 마우스를 hover하면 입력한 글이 부가적 설명으로 보인다.
- <q> : 인용구로 만들어준다.
- <blockquote> : 들여쓰기를 해준다.
**출력결과**
- h1, h2, h3, h4, h5 비교하기
**출력결과**
'WEB기초 > HTML' 카테고리의 다른 글
| [HTML] HTML5 이용하기 02 - 정규식 이용하기 (170417) (0) | 2017.04.17 |
|---|---|
| [HTML] HTML5 이용하기 01 (170413) (0) | 2017.04.13 |
| [HTML] a링크 이용과 table 개념 알아보기 (0) | 2017.03.10 |
| [HTML] html입문 02 (170310) (0) | 2017.03.10 |
| [HTML] html 입문 01 (170309) (0) | 2017.03.09 |
댓글