HTMLの概要


基本構文

<태그>내용</태그> - 가장 기본적인 문법
<태그> - 시작(열린)태그(Tag)
</태그> - 종료(닫힌)태그
내용 - 요소의 내용(Contents)
<h1>Hello HTML~</h1>

親子関係の理解

<태그><태그>내용</태그></태그>
<태그>내용</태그> - 자식 요소
<태그><태그>내용</태그></태그> - 부모 요소
<body>
 <div> 부모 요소
  <div></div> 자식 요소
 </div>
</body>

空のラベル

<태그> - 빈(Empty)태그, 종료(닫힌)태그 X
<img src="", alt="">, <link rel="" href="">, <input type="text">
<태그 속성="">내용</태그>
속성="값" - 기능의 확장
<ラベル>-便利です.HTML 1/2/3/4/5
<ラベル/>-安全です.XHTML/HTML5

ワードボックス


画面に出力される要素の特性は、大きく2つに分けられます.
≪行内要素|Line Elements|oem_src≫:テキストを作成する要素.
ブロック(Block)要素:ボックス(レイアウト)を作成する要素.

行内要素

<span>내용</span> - 대표적인 인라인 요소이고, 본질적으로 아무것도 나타내지 않는
콘텐츠 영역을 설정하는 용도입니다.

<span>Hello</span> - 요소가 수평으로 쌓임
<span>World</span>

<span style="width=100px;">Hello</span> - 반응 없음
<span style="height=100px;">World</span> - 반응 없음

width - 요소의 가로 너비를 지정하는 CSS 속성
height - 요소의 세로 너비를 지정하는 CSS 속성

<span style="margin:20px 20px;">Hello</span> - 위, 아래 외부 여백 사용 불가
<span style="padding:20px 20px;">World</span> - 내부 여백 사용 가능

margin - 요소의 외부여백을 지정하는 CSS 속성
padding - 요소의 내부여백을 지정하는 CSS 속성

<span><div></div></span> - <div> 사용 불가, 블록 요소
<span><span></span></span> - <span> 사용 가능, 인라인 요소

ブロック要素

<div>내용</div> - 대표적인 블록 요소이고, 본질적으로 아무것도 나타내지 않는 
콘텐츠 영역을 설정하는 용도입니다.

<div>Hello</div> - 요소기 수직으로 쌓임
<div>World</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> - <span> 사용 가능, 인라인 요소