[React] 강의 1주차 (5) - HTML [3] 핵심 요소 및 주석, 전역 속성

[국비지원교육]  [패스트캠퍼스] React 강의 1주차 (5) - 웹사이트 만들기 [2]핵심 요소

 

- html 핵심요소 정리

- 주석

- 전역속성

---

 

1. html 핵심요소 정리

 

 ** 블록(상자) 요소 = block

• <div> : 특별한 의미가 없는 구분을 위한 요소. (Division)
• <h2> : 제목을 의미하는 요소 (Heading) / 숫자가 작을수록 더 중요한 제목을 정의
• <p> : 문장을 의미하는 요소 (Paragraph)
• <ul> : 순서가 필요없는 목록의 집합을 의미 (Unordered List)
• <ol> : 순서가 있는 목록의 집합을 의미 (Ordered List)
• <li> : <ul>, <ol> 의 자식태그, 목록 내 각 항목(List item)

** 인라인(글자) 요소 = lnline

• <img> : 이미지를 삽입하는 요소 (Image)
  • src : 이미지 경로 (필수속성)
  • alt : 삽입할 이미지의 이름 (필수속성)
• <a> : 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 (Anchor)
  • href : 링크 url
  • target : 링크 url의 표시(브라우저 탭)위치 
• <span> : 특별한 의미가 없는 구분을 위한 요소, 블럭요소 안에도 적을 수 있음.
• <br /> : 줄바꿈 요소(Break)
• <label> : input과 같이 쓰임, 라벨 가능 요소 (input) 의 제목
  • type="radio" : 사용자에게 체크 여부를 그룹에서 1개만 입력 받음
  • name="fruits": 'fruits'란 이름의 그룹

 

** 인라인(글자) + 블록(상자) 요소  = lnline-block

• <input> : 사용자가 데이터를 입력하는 요소
  • type :  입력받을 값의 타입
  • value : 미리 입력된 값(데이터)
  • placeholder : 사용자가 입력할 값(데이터)의 힌트
  • disabled : 입력 요소 비활성화  

** 테이블 요소 = table

<table> : 표 요소, 행(Row)과 요소(Column)의 집합

 

 

 

*** 필수속성을 입력하지 않은 경우, 웹 표준에 어긋나는 작성 입니다.

 

---

 

2. 주석 (commad + /)

: 수정사항이나 설명 등을 작성(주석).

: 브라우저는 이 태그를 해석하기 않기 때문에 화면에 내용이 표시되지 않음

---

3. 전역속성

 

 

1) title : 마우스 오버시 tooltip과 같이 나타납니다.

 <a href="https://www.naver.com/" title="네이버로 이동">NAVER</a>

2) style 

<div style="color: red">Hi</div>

3) class : 요소를 지칭하는 중복이 가능한 이름

<div class="abc">abc</div>

4) id : 요소를 지칭하는 고유한 이름

<div class="abc" id="name">abc</div>

5) data-이름="데이터" : 요소에 데이터를 저장

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

const els= document.querySelectorAll('div');
els.forEach(el => {
	console.log(el.dataset.fruitName);
})

 

 

---