HTML 요소

요소

<태그>내용</태그>

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

1. <img src="./cat.jpg" alt="고양이">
2. <input type="text">
   1. text: 사용자에게 일반 텍스트를 입력 받을 때 사용
   2. checkbox: 사용자에게 체크 여부를 입력 받음

 

요소가 화면에 출력되는 특성: 인라인 요소, 블럭 요소

1. 인라인(Inline) 요소: 글자를 만들기 위한 요소들

a. span: 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 요소가 수평으로 쌓임. 포함한 콘텐츠 크기만큼 자동으로 줄어듬.

ex1) <span style="width: 100px;">Hello</span>       
                           //width: 요소의 가로 너비를 지정하는 CSS 속성

ex2) <span style="height: 100px;">Hello</span>       
                           //height: 요소의 세로 너비를 지정하는 CSS 속성

ex3) <span style="margin: 20px 20px;">Hello</span>
                           //margin: 요소의 외부 여백을 지정하는 CSS 속성

ex4) <span style="padding: 20px 20px;">Hello</span>
                           //padding: 요소의 내부 여백을 지정하는 CSS 속성

 

인라인 요소(ex. span) 에는 블록 요소(ex. div) 사용 불가!

--> 대체적으로 인라인 요소가 제약이 있음

---

2. 블록(Block) 요소: 상자(레이아웃)을 만들기 위한 요소들

 a. div: 대표적인 블록 요소. 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도. 요소가 수직으로 쌓임. 포함한 콘텐츠 크기만큼 자동으로 줄어듬.

ex5) <div style="width: 100px;">Hello</div>

ex6) <div style="height: 40px;">World</div>

블록 요소 안에는 인라인 요소 사용 가능