[HTML]Study 요약 정리 2

1. 북마크

이동하고 싶은 곳에 <a name=“이름”> 입력
링크를 걸고자 하는 앵커에 <a href=“#이름”> 내용 </a> 입력

<a href=“#이름”>에서 북마크 지정 없이 #만 입력하면
무조건 가장 위로(top) 올라가게 됨

* 북마크는 화면에 보이지 않으나 프로그램에서 인식됨

 

2. “Ul, li” 목록 태그

ul (unordered list) : 순서 없는 목록 리스트
li (list item)


<ul type=“모양 명칭”>
<ul>
	<li> blue </li>
	<li> white </li>
	<li> black </li>
</ul>

3. “Ol” 목록 태그

ol (unordered list) : 순서 있는 목록 리스트


<ol start=“2”ol type=“I”>

	<li> 초등학교 </li>
	<li> 중학교 </li>
	<li value=“7”> 고등학교 </li>
	<li> 대학교 </li>

</ol>

* Ol type 종류

1234… abcde…
I II III IV …

Ol start 지점부터 시작됨
중간에 Value 값으로 변경가능

 

4. 정의 목록 태그

dl (dictionary list) : 순서가 없는 정의 목록 태그이며 li 대신 dt, dd를 사용
dt : 정의 / dd: 설명

<dl>

	<dt> 김밥 </dt>
	<dd> 치즈를 넣은 김밥은 치즈 김밥 </dd>
	<dd> 참치를 넣은 김밥은 참치 김밥 </dd>

	
</dl>

 

5. 폼 태그

<from> ~ </from>

'action' 또는 'method'와 함께 사용
<FORM NAME="form" METHOD="post" ACTION=“url">

* ID와 password 입력 창 등
다양한 폼 형식이 있음

Input 태그
Select 태그
Textarea 태그

--
Method: 전송방식
Get:: 연관 키워드
Post: 로그인 아이디 등

 

6. Form Input

<input> : 다양한 입력폼을 만드는 태그
Type 속성

Text : 한줄 text 입력 폼
Password : 패스워드 입력 폼
Checkbox : yes/no 선택 폼
Radio : 다중 목록 중 하나만을 선택하기 위한 선택 폼
file : 전송할 파일을 선택하기 위한 폼 (업로드)
hidden : 클라이언트에게 보이지 않고 전송할 값을 지정하는 폼
submit : 전송 버튼
reset : 초기화 버튼
button : 일반 버튼(버튼 모양) .javascript와 연동하여 사용
image : 이미지 전송 버튼      ex) <input type="text“ ->

* Radio 예시

<input type="radio" name="aaa" value="예" checked> 예
<input type="radio" name="aaa" value=“아니요" > 아니요

 

* Checkbox 예시

<input type="checkbox" name="프로그램" value=“영화">영화
<input type="checkbox" name="프로그램" value=＂공연">공연
<input type="checkbox" name="프로그램" value=＂카페" checked>카페
<input type="checkbox" name="프로그램" value=＂바다">바다

 

* Checked 입력 시 해당요소에 체크되어 보여짐

 

7. Form  select

<select> : 목록 리스트 중 선택하도록 하는 태그

회원가입창에서 직업, 학력, 전화번호 등
속성: multiple: 다중 선택
<option> 선택한 item 등록

* 작성 예시

<select name="aa">
<option value="미달">초등학교</option>
<option value="미달">중학교</option>
<option>고등학교</option>
<option>전문대학교</option>
<option>대학교</option>

 

* Multiple 입력법

<select name=“aa” multiple=“multiple”>

 

* Value 값을 지정하여 원하는 값을 보낼 수 있음

 

8. Form textarea

<textarea> : 긴 텍스트를 입력 할 수 있는
	    텍스트 필드를 만드는 태그

자기소개 칸
Cols: 열수
Rows: 행수

* 일반

<textarea name="aa"> </textarea>

 

* 줄수와 칸수를 지정하는 방법

<textarea name="aa" rows=“~" cols=“~"> </textarea>

 

* 기본값 입력

<textarea name="aa" rows=“~" cols=“~">
자기소개를 작성해주세요. </textarea>

 

9. 표 만들기

tr: Table Row
td: Table Deta
Cellspacing: 공백으로 표 안쪽 두께 만들기
Cellpadding: 안쪽 글씨 여백
줄:row / rowspan=""
칸:columm / colspan=""

* 작성 예시

<table border="1” width="300" height="300”>

		<tr><td>칸1</td><td>칸2</td></tr>
			
			<tr>
				<td>칸3</td>
				<td>칸4</td>
			</tr>
</table>

 

* <td colspan="2"></td> 두 칸을 의미하여 두 번째 칸에 대한 td는 작성하지 않음

 

10. Block 요소 : div, h1~h6, p, ol, ul

 

11. inline 요소 : Span, img, a 등

12. Html5 새로운 태그

header : 문서의 헤더 부분의 구조를 나타내는 태그
nav : 문서의 네비게이션 구조를 나타내는 태그
figure : 문서의 멀티미디어 요소를 나타내는 태그
section : 특정 콘텐츠들을 그룹화 시켜주는 태그
article : 작은 의미 단위의 콘텐츠를 나타내는 태그
footer : 문서의 푸터 부분의 구조를 나타내는 태그
aside : 문서의 사이드 콘텐츠. 서브 콘텐츠를 나타내는 태그

 

13. nth-child 선택자

기존의 css에서 id와 class의 역할을 수행 할 수 있음

Nth-child(n), First-child, last-child

지정된 부모가 기준이 된다. 지정된 부모가 없으면 body가 기준