<h1>Hello~</h1><태그>내용</태그>
<태그> : 시작(열린)태그
내용 : 요소의 내용
</태그> :종료(닫힌)태그
<태그>
<태그>내용</태그>
</태그>외부에 있는 태그 : 부모 요소
내부에 있는 태그 : 자식 요소
<태그>
<태그>
<태그>내용</태그>
</태그>
</태그>상위(조상)요소 : 나를 기준으로 나를 감싸고 있는 모든 요소들 (부모 요소도 포함)
부모 요소 : 나를 기준으로 나를 감싸고 있는 바로 윗 단계 요소
하위(후손)요소 : 나를 기준으로 내가 감싸고 있는 모든 요소들 (자식 요소도 포함)
자식 요소 : 나를 기준으로 내를 감싸고 있는 바로 아랫 단계 요소
- 빈(Empty)태그
<태그>- 빈(Empty)태그 안에 속해있어야 하는 내용
<태그 속성 ="값">내용</태그>속성="값" : 기능의 확장
ex)
<img />이미지를 삽입하는 요소(태그)
포함해야하는 정보 : 어떤 이미지를 삽입해야 하는지, 이미지 이름은 뭔지
<img src="./cat.jpg" alt="고양이>-> 즉 위와 같이 속성과, 값이필요
src : 이미지 경로 (화면의 출력)
alt : 이미지의 이름 (대체 텍스트/Alternate Text)
즉, 빈태그들은 내용을 채울수 없는 (비어있는)태그이기 때문에 대부분의 경우 속성과 값을 이용해서 태그의 기능을 온전하게 사용하게 된다.
예외로는
<br>: 줄바꿈은 따로 속성과 값이 필요 없음
사용자가 데이터를 입력하는 요소(태그)는 어떤 데이터 타입을 입력 받을 건지 ex
<input /><input type="text"/>type : 데이터의 타입
text : text 사용자에게 일반 텍스트를 입력 받음
ex) 사용자가 hello world 작성시 -> 화면에 hello world 출력
<input type="checkbox"/> type : 데이터의 타입
checkbox : 사용자에게 체크 여부를 입력 받음
프론트엔드 공부중!