[REACT/HTML] HTML 기초

** 자기 공부용 및 암기용으로 포스팅하는 글 입니다.

** 정확한 정보는 보장 할 수 없으니, 참고용으로만 봐주시면 감사하겠습니다.

** 제 개인적인 생각 및 자기 암시목적으로 작성되기에 이점 양해 부탁드립니다.

 

---

들어가기에 앞서..

REACT를 사용하기 위해서 HTML에 대해 알아야 할 필요가 있다. 

REACT를 잘 사용하기 위해서 기초를 공부해보자.

 

---

★ 알아볼 내용

1. HTML 기본 구조 및 SELF-CLOSING TAG

2. 자주 사용하는 HTML TAG 요소

3. Class와 id

4. HTML5의 시멘틱 요소

---

 

1.  HTML 기본 구조 및 SELF-CLOSING TAG

HTML은 웹페이지의 틀을 만드는 기초적인 마크업 언어이다.

<>으로 묶인 TAG 들의 집합으로 이루어져 있으며 < TAG_name >으로 열며 </ TAG_name >으로 닫는다.

어떤 태그의 경우는 < TAG_name/>으로 단순하게 열거나 닫을 수 있는데 이는 TAG 내부 내용이 없어야 하며, SELF-CLOSING TAG라고 불리운다. 

---

2.  자주 사용하는 HTML TAG 요소

태그	설명	예시
<div>	여러 태그를 하나의 구역으로 묶음. 한 줄을 모두 차지.
<span>	하나의 태그를 여러 개로 나누어 묶음. 컨텐츠의 크기만큼 공간을 차지
<img>	이미지 설정	<img src="이미지URL">
<a>	링크 설정	<a href="URL" target="_blank">URL</a>
<ul>	언바운드 리스트 목록 생성
<li>	리스트 아이템을 추가
<input>	Text나 Radio, Checkbox를 설정
<textarea>	여러 줄을 입력 가능한 텍스트 입력 공간 설정
<button>	사용자가 누를 수 있는 버튼 기능 추가	<button>버튼명</button>
<h1>~<h6>	글씨들의 크기 조절
<!-- -->	주석

---

3. Class와 ID

Class 와 Id 모두 요소를 식별하는 용으로 사용하며, JavaScript에서 해당 요소를 조작하거나 CSS에서 해당 요소를 스타일지정하기 위해서 사용이 된다. 

id속성은 고유한 식별자를 부여하기 위해 사용하며, 동일한 id를 가진 요소는 문서 내에 단 하나만 존재해야 한다.

class속성은 공통된 스타일이나 동작을 적용할 때 사용하며, 하나의 요소가 여러 개의 class를 가질 수도 있다.

추가적으로 CSS에서 해당 요소를 스타일링 할 때, id는 `#아이디명`이라고 스타일 요소를 설정하고, class는 `.클래스명`으로 스타일 요소를 설정한다.

JavaScript에서는 아래와 같이 해당 요소를 선택해서 사용할 수 있다.

//구 버전
let element = document.getElementById('unique-element');
element.style.backgroundColor = 'yellow';
let elements = document.getElementsByClassName('common-style');
for (let i = 0; i < elements.length; i++) {
    elements[i].style.backgroundColor = 'yellow';
}

//최신 표준 
let element = document.querySelector('#unique-element');
element.style.backgroundColor = 'yellow';

let elements = document.querySelectorAll('.common-style');
elements.forEach(el => el.style.backgroundColor = 'yellow');

---

4. HTML5의 시멘틱 요소

HTML5에서 사용하며, 각각의 div와 span요소에 이름을 추가하는 개념이라고 보면 된다. 

유지보수와 검색 노출등의 장점이 있으며 소스가 간편화 되어 가독성도 상승하는 효과가 있다.

출처 : https://sangyeon96.gitbooks.io/do-it-html5-css3/content/Chapter10-2.html

 

시멘틱 요소 종류	설명
<header>	페이지의 상단을 묶어 둔 것 <h1>~<h6> tag를 최소 하나 이상 가지고 있어야 함. 내부에 또 다른 시멘틱 요소를 넣기가 불가능
<nav>	탐색 링크의 집합을 정의 메인메뉴의 경우 사용하는 것을 적극권장.
<selection>	문서의 일부분을 묶을때 사용. 주로 제목이 있는 주제별 콘텐츠 그룹이다. <h2>~<h6> tag를 하나 이상 사용하는 것을 권장
<article>	독립적인 콘텐츠를 정의 예시로 신문기사나 포럼 게시물들을 권장 <h2>~<h6> tag를 하나 이상 사용하는 것을 권장
<aside>	페이지 콘텐츠 이외의 콘텐츠를 정의 예시로 최근 본 상품 등으로 사용
<footer>	문서 또는 섹션의 바닥글을 정의 주로 저작권 정보나 주소 정보를 쓰는 란
<main>	문서의 주요 내용을 지정
<figure>	일러스트레이션,다이어그램, 사진 등 자체 포함된 콘텐츠를 지정 내부에 <figcaption>을 적을 경우 간략한 콘텐츠에 대한 설명을 적을 수 있음
<time>	날짜/시간 정의
<address>	주소 정의
...	차후 추가 예정...