Summary

• Inline & Block Element
• 전역 속성

Notes

1. Inline Element

• 요소가 수평으로 쌓인다
• 가로/세로 크기가 컨텐츠 크기만큼 자동으로 줄어든다
• width/height 지정 불가, margin/padding 가로 크기만 지정 가능
• 블록 요소를 자식으로 가질 수 없다

1-1. span

• 인라인 요소 구분

1-2. img

• 이미지를 삽입하는 요소 (Image)
• alt는 필수 속성

1-3. a

• 지정한 페이지로 이동하는 하이퍼링크를 만든다

1-4. br

• 줄바꿈 (Break)

1-5. input

• 기본적으로 인라인이지만 블록 요소의 특징을 가질 수 있다 (Inline-block)
• 요소가 수평으로 쌓이고(inline), 가로/세로 크기 지정 가능(block)
• 사용자에게 데이터를 입력 받는 요소

1-6. label

• 라벨링이 가능한 요소의 제목
• input type="checkbox"와 함께 사용

2. Block Element

• 요소가 수직으로 쌓인다
• 가로 크기가 부모 요소의 크기만큼 자동으로 늘어난다
• 세로 크기가 컨텐츠 크기만큼 자동으로 줄어든다
• width/height 지정 가능, margin/padding 지정 가능
• 인라인, 블록 요소 모두를 자식으로 가질 수 있다

2-1. div

• 블록 요소 구분

2-2. h1~6

• 제목을 의미하는 요소 (Heading)

2-3. p

• 문장을 의미하는 요소 (Paragraph)

2-4. ul & ol & li

• ul : 순서가 없는 목록 (Unordered List)
• ol : 순서가 있는 목록 (Ordered List)
• li : 목록 내 각 항목 (List Item)

2-5. table (Table Element)

• table : table 요소 선언
• tr : Table Row
• td : Table Data (Column)

3. 전역 속성

• title : 요소의 정보나 설명 지정
• style : 요소에 적용할 CSS 지정
• class : 요소를 지칭하는 중복 가능한 이름
• id : 요소를 지칭하는 고유한 이름
• data-이름="데이터" : 요소에 데이터를 지정

4. defer

JS가 body의 내용을 참조할 경우 script 태그에 defer 속성을 준다.

• defer : HTML 문서 선분석 후 JS를 해석

Tags

1. <title></title>
2. <link rel="" href="" />
3. <style></style>
4. <script src=""></script>
5. <meta />
<meta charset="UTF-8"/>
<meta name="" content="" />
6. <input />
<input type="text" />
<input type="text" value="미리 입력될 데이터" />
<input type="text" placeholder="입력될 데이터의 힌트" />
<input type="text" disabled />
<input type="checkbox" />
<input type="checkbox" checked />
<input type="radio" name="" />	//name 그룹에서 택1

//Inline
1. <span></span>
2. <img src="" alt="" />
3. <a href="" target="_blank"></a>
4. <br />
5. <label></label>

//Block
1. <div></div>
2. <h1~6></h1~6>
3. <ul></ul>
4. <ol></ol>
5. <li></li>

//Table
1. <table></table>
2. <tr></tr>	//table row
3. <td></td>	//table data(column)