7일차_HTML 기본 문법 개요_20210701

HTML 기본 문법

요소(Element)

: <태그>  내용   </태그>

: 시작태그, 요소의내용(Contents), 종료태그

ex)<h1>Hello~~</h1>

 

HTML 부모와 자식 관계의 이해

부모div와 자식div 태그

<태그> : 부모 요소

  <태그>내용</태그> : 자식 요소

</태그> : 부모 요소

: 들여쓰기를 통해 자식요소와 부모요소의 구분을 시각적으로 정리

 

들여쓰기(Indent) : Tab

내어쓰기(Outdent) : Shift + Tab

 

<태그>

  <태그>

    <태그>내용</태그>

  </태그>

</태그>

: 상위(조상) 요소란 기준을 제외한 기준을 감싸고 있는 모든 요소들(바로 윗단계인 부모 요소 부터)

: 하위(후손) 요소란 기준을 제외한 기준 내부에 있는 모든 요소들(바로 아랫단계인 자식 요소 부터)

 

빈태그 Empty태그

ex)

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

<태그> : 편리함! HTML 1/2/3/4/5

or

<태그/> : 안전함! XHTML / HTML5

:되도록 슬래쉬를 붙이도록 연습하기~

 

기능의 확장

<태그 속성="값">내용</태그>

: Attribute = "value"

ex)

<img src="" alt="">

<img src="./cat.jpg" alt="고양이"/>

: 많은 경우 빈태그들은 속성과 값을 입력하는 것이 기본적인 사용법으로 이용된다.(내용이 안들어가는 태그이므로)

<input type="text">

<input type="checkbox" name="" id="">

<input type="text"/> <input type="checkbox"/>