요소
<태그>내용</태그>
<태그 속성="값">내용</태그>
- <img src="./cat.jpg" alt="고양이">
- <input type="text">
- text: 사용자에게 일반 텍스트를 입력 받을 때 사용
- 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>
블록 요소 안에는 인라인 요소 사용 가능
'Front > HTML' 카테고리의 다른 글
| HTML 태그 정리 (0) | 2023.03.28 |
|---|---|
| HTML 전역 속성 (0) | 2023.03.28 |