요소(Element)
<태그> 내용 </태그> <시작(열린)태그> 내용(Contents) <종료(닫힌)태그>
부모와 자식 요소
<태그><태그>내용</태그></태그>
<태그> -> 부모태그
<태그>내용</태그> -> 자식 태그
</태그>- 부모의 부모는 상위(조상)요소
- 자식의 자식은 하위(후손)요소
태그
Empty 태그
<태그> --> HTML 1/2/3/4/5
or
<태그/> --> XHTML/HTML5태그 속성
기능의 확장
<태그 속성="값">내용</태그>
속성: Attribute
값: Value
ex) <img/>
<img src="./cat.jpg" alt="고양이"/>
대부분의 empty 태그는 속성과 값이 필요하다글자와 상자
요소가 화면에 출력되는 특성
- 인라인 (inline)
1. 글자를 만들기 위한 요소
2. 요소가 수평으로 쌓임
3. 줄바꿈시 띄어쓰기가 됨
4. style요소로 크기를 지정할 수 없음
5. 좌우 여백은 지정 가능, 상하 여백은 불가
6. 자식 요소로 블럭요소가 올 수 없음
- 블럭 (block)
1. 상자를 만들기 위한 요소
2. 포함한 콘텐츠 크기만큼 자동으로 줄어듬
3. 요소가 수직으로 쌓임
4. 가로 너비는 부모 요소의 크기만큼 자동으로 늘어남
5. 세로 너비는 포함한 콘텐츠 크기만큼 자동으로 줄어듬
6. style요소로 크기를 지정할 수 있음
7. 좌우, 상하 외부/내부 지정 가능
8. 자식 요소로 블럭요소가 올 수 있음
BLOCK 과 INLINE 태그
BisBLOCK Element
IisINLINE Element
<div></div>B
Division
특별한 의미가 없는 구분을 위한 요소
<h1>~<h6></h1>~</h6>B
Heading
제목을 의미하는 요소
숫자가 작을수록 더 중요한 제목
<p></p>B
Paragraph
문장을 의미하는 요소
<img/>I
Image
이미지를 삽입하는 요소
필수속성: src(경로), alt(이름)
<ul></ul>B
Unordered List
순서가 필요없는 목록의 집합
항목으로<li>B태그가 옴
<a></a>I
Anchor
다른/같은 페이지를 이동하는 하이퍼링크를 지정함
속성: href: 링크 url, target: 표시 위치
target : _blank = 새탭
<span></span>I
특별한 의미가 없는 구분을 위한 요소
글자들의 범위를 잡을때 자주 사용함
<br/>I
break
줄바꿈 요소
<input/>I-B
Inline요소 이면서 Block 요소 (Inline-Block)
inline 처럼 수평으로 쌓이나, Block 처럼 가로세로 좌우 크기나 여백을 지정 가능함
사용자가 데이터를 입력하는 요소
속성: type
type
Value : 미리 입력된 값
placeholder : 사용자가 입력할 값의 힌트
disabled : 입력 요소 비활성화
checkbox : 체크 여부 입력 checked 옵션을 넣으면 default로 체크되어 있음
radio : 그룹에서 1개만 받음<label>과 함께 사용
<label></label>I
라벨 가능 요소의 제목
ex) input태그의 값을 지정해줌
<table></table>Table 요소
표 요소, 행(Raw)과 열(Column)의 집합<tr></tr>Table 요소
tabel row<td></td>Table 요소
table data<table> <tr> <td>A</td><td>B</td> </tr> <tr> <td>C</td><td>D</td> </tr> </table>
속성
전역속성
title
요소의 정보나 설명을 지정
<태그 title="설명"></태그>style
요소에 적용할 스타일 지정
<태그 style="스타일"></태그>class
요소를 지정하는 중복 가능한 이름
<태그 class="이름"></태그>
CSS
.이름 {
color: red;
}id
요소를 지정하는 고유한 이름
<태그 id="이름"></태그>
CSS
#이름 {
color: red;
}data
요소에 데이터를 지정
<태그 data-이름="데이터"></태그>
