HTML : 웹을 구성하는 뼈대이다. 웹 페이지의 내용과 구조를 담당한다.
태그(tag)란 ?
<h1>Hello HTML</h1>
요소 : <태크> 내용 </태그>
앞쪽 태그 : 시작(열린) 태그
뒷쪽 태그 : 종룔(닫힌) 태그
부모와 자식 관계
<div> 여기가 부모 요소
<div></div> 여기가 자식요소
</div>
<div> 상위(조상 요소)
<div> 상위(조상 요소)
<div></div> 하위(후손 요소)
</div>
</div>빈 태그(empty tag)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> 이런걸 빈 태그라고 한다 종료 태그가 없는것을 empty tag라고 한다.
예시 <input/> : 사용자가 데이터를입력하는 요소, 어떤 데이터타입을 입력받을 것인지에 대해서 보여줘야한다.
<input type = "text"/> 사용자에게 일반 텍스트를 입력 받겠다.
<input type = "checkbox"/> 사용자에게 체크 여부를 입력 받겠다.
<태그> 편리하다. html 1/2/3/4/5
</태그> 안전하다. XHTML/ HTML5
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<태그 속성 = "값">내용</태크>
<img/> 이미지 삽입하는 요소 어떤이미지?
<img src = "경로" alt="고양이 : 이미지 이름 대체 텍스트"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>Hello World!</div>
<span>Hello World</span>
</body>
</html>
글자와 상자
요소 가 화면에 출력 되는 특성
인라인 요소 : 글자를 만들기 위한 요소들
블록 요소 : 상자(레이아웃)를 만들기 위한 요소들
인라인 대표 요소 : span
<span>Hello</span>
<span>World</span>본질적인 인라인 요소로 본질적으로 아무것도 나타내지 않는, 콘텐츠 영역 설정하는 용도로 쓰인다.
위의 코드는 수평으로 쌓인 ouput을 제공한다. ex_ Hello World
줄바꿈 = 띄어 쓰기를 의미한다.
인라인 요소의 특징 중 하나는 포함한 콘텐츠 크기만큼 자동으로 크기가 줄어든다는 것이다.
ex_ Hello World 보다 Hello의 글자 크기가 더 크게 제공된다.
인라인 요소의 다음 특징은 인라인 요소는 글자를 특징하는 것으로 가로 세로 크기를 갖을 수 가 없다.
ex
<span style = "width: 100px;">Hello</span>
<span style = "height: 100px;">World</span>전혀...크기 변화 없다.
인라인 요소의 그 다음 특징은 인라인 요소는 위 아래의 여백을 지정할 수 없다. 단 왼오 지정 가능하다.
<span style="margin : 20px 20px;">Hello</span> -> 요소의 외부 여백을 지정하는 css 속성
<span style="padding: 20px 20px;">World</span> -> 요소의 내부 여백을 지정하는 css 속성 인라인 요소는 자식 요소로 블록 요소를 사용할 수 없다
<span><span></span></span> 사용 가능
<span><div></div></span> 사용 불가
대표 블록 요소 : div
<div></div> 대표적인 블록 요소이다. 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다.
블록 요소는 요소가 수직으로 쌓인다. 수평으로 쌓이는 인라인과 다르다.
블록요소는 부모 요소 크기만큼 자동으로 늘어난다. 포함한 콘텐츠 크기 만틈 자동으로 줄어들기도한다.
즉 가로는 최대한 늘어날려고하고, 세로는 최대한 줄려고 한다.
<div style="width: 100px;">Hello</div>가로
<div style="height: 40px;">World</div>세로
<div style="margin: 10px;">Hello</div> 외부 여백
<div style="padding: 10px;">World</div> 내부 여백 div 요소는 참 잘 적용 된다. 즉, 시각적 제어 하기에는 블록 요소가 인라인 요소보다 사용하기 좋다는 것을 알 수 있다.
블록요소는 자식으로 블록 포함 가능하다.
<div><div></div></div> 가능
<div><span></span></div> 블록 안 인라인 요소도 가능 
안녕하세요!