[패스트 캠퍼스 강의] HTML 핵심 정리

 

<h1>

블록(상자) 요소. 제목을 의미하는 요소. (Heading)

h1~h6. 숫자가 작을수록 더 중요한 제목을 정의. 

h1은 대주제라서 난발하기 보다는 h2~h4 많이 씀. 

 

<p>

블록(상자) 요소. 문장을 의미하는 요소 (Paragraph). p태그 대신 div을 써도 상관은 없음. 

 

<ul>

블록(상자) 요소. 순서가 필요없는 목록의 집합을 의미. (Unordered List)

자식으로 li 태그가 꼭 들어가야 함. 

 

<li>

블록(상자) 요소. 목록 내 각 항목 (List Item)

<ul>
      <li>사과</li>
      <li>딸기</li>
</ul>

 

---

<img>

인라인(글자) 요소. 이미지를 삽입하는 요소 (Image). src, alt 필수 속성. 

 

<a>

인라인(글자) 요소. 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소. (Anchor)

href : 링크 URL

target : 링크 URL의 표시(브라우저 탭) 위치

 

<br />

인라인(글자) 요소. 줄바꿈 요소 (Break)

 

<input>

인라인(글자) 요소. 블록(상자) 요소 = Inline-block . 사용자가 데이터를 입력하는 요소. 

수평으로 쌓이지만, 가로/세로 크기와 여백 지정 가능. 

type : text

value : 미리 입력될 값

placeholder : 사용자가 입력할 값(데이터)의 힌트

disabled : 입력 요소 비활성화

 

type : checkbox

checked

 

type : radio (1개만 선택 가능)

name : 같은 이름이면 같은 그룹. 같은 그룹 내에서 1개만 선택 가능

 

<label>

인라인(글자) 요소. 라벨 가능 요소(input)의 제목.

<label> <input type="checkbox" />Apple </label>

 

< table>

블럭 요소. 테이블 요소. 표 요소. 행(Row)과 열(Column)의 집합. 

 

<tr> table-row

행(Row)을 지정하는 요소.

 

<td> table-cell 

열(Column)을 지정하는 요소. (Table Data)

 

 <table>
      <tr>
        <td>A</td>
        <td>B</td>
      </tr>
      <tr>
        <td>C</td>
        <td>D</td>
      </tr>
    </table>

 

많이 쓰진 않음. 

 

< 주석 >

Ctrl + /

---

전역속성 

title : 요소의 정보나 설명을 지정. 툴팁. 

style : 요소에 적용할 스타일(CSS)을 지정.

class : 요소를 지칭하는 중복 가능한 이름. css쪽에서 점(.)을 붙이고 지칭해줌. 

id : 요소를 지칭하는 고유한 이름. 자주 사용하진 않음. 샾(#)을 붙이고 지칭해줌.

data-이름 : 요소에 데이터를 지정. 나중에 자바스크립트나 CSS에서 사용함. 

 

defer 속성

javascript가 body보다 먼저 선언되어 있는 경우, body부분을 읽기 전에 스크립트가 읽혀서 데이터가 제대로 출력되지 않는 경우가 있는데, defer 속성을 추가해 주면 다 읽는다.