HTML 기본 문법, 요소, 부모와 자식관계, 태그 속성과 값, span, div 태그

1. 요소(Element)

태그 안에있는 내용까지 포함

<태그> 내용 </태그> 

<시작(열린) 태그> 내용 </ 종료(닫힌) 태그>

 

2. 부모와 자식관계

<태그><태그>내용</태그></태그>

<태그>

    <태그>

        <태그>내용</태그>

    </태그>

</태그>

<태그>: 부모요소

<태그>: 자식요소

<태그>: 상위(조상)요소, 나를 기준으로 나를 감싸고 있는 모든 요소들을 지칭

+ 하위요소

 

3. 빈(Empty)태그

- <태그> : 열린 태그만 작성 (편리함)

- <태그 /> : 열린 태그에 뒤에 /만 붙이기 (안전함, 엄격한 문법)

 

4. 태그 속성과 값

<태그 속성="값">내용</태그>

속성="값" => 태그 전체 요소가 할 수 있는 기능의 확장 

<img />

<img src="./cat.jpg" alt="고양이" />

<input /> 사용자가 데이터를 입력하는 요소(태그)로 어떤 데이터 타입을 받을 건지

<input type(데이터의 타입)="text"/>

<input type="checkbox"/>

 

5. 글자와 상자

요소가 화면에 출력되는 특성, 크게 2가지로 구분함

• 인라인(inline)요소 : 글자를 만들기 위한 요소들
• 블록(block)요소 : 상자(레이아웃)을 만들기 위한 요소들

<span></span>

• 대표적인 인라인 요소! 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도이다.
• 수평
• 포함한 콘텐츠 크기만큼 자동으로 줄어듬 (글자요소들)
• 글자요소는 가로 세로 사이즈를 지정할 수 없다

ex)

<span>Hello</span>

<span>World</span>

Hello World

-> 요소가 수평으로 쌓임

<span style="width:100px;">Hello</span>

<span style="width:100px;">World</span>

Hello World

=> 반응 없음..!

 

<span style="margin:20px 20px;">Hello</span>

<span style="padding:20px 20px;">World</span>

margin : 요소의 외부 여백을 지정

padding : 요소의 내부 여백을 지정

 

<span><div>불가</div></span> 인라인 요소 안에는 블록 요소를 사용할 수 없다.

<span><span>가능</span></span>

 

<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>

margin: 외부 여백을 지정

padding: 내부 여백을 지정

 

<div><div>가능</div></div>

<div><span>가능</span></div>

블럭요소는 제약 사항이 크게 없다고 볼 수 있다.