HTML/CSS/JS Ch 5~6. HTML 개요, 태그

CH05.

요소(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. 자식 요소로 블럭요소가 올 수 있음

Ch06.

B is BLOCK Element
I is INLINE 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-이름="데이터"></태그>