[HTML] Inline 태그와 Block 태그 비교, 종류

HTML

: 하이퍼 텍스트 마크업 언어

- <> 괄호로 되어 있는 태그로 구성됨

 

태그의 분류

1. inline 태그

2. Block 태그

 

1. Inline 태그

: 구성 요소 역할

# 다른 인라인 요소를 포함할 수 있다.

# 다른 블록 요소를 포함할 수 없다.

# 구성 요소 역할이기 때문에, 높이(height)나 넓이(width) 여백(margin, padding) 등 속성을 부여할 수 없다.

# 종류

span	- 의미 없음, 컨텐츠들을 목적에 따라서 묶어야 할 때 사용
a	- anchor : 웹 페이지, 외부 사이트 연결 - 속성 값  - target   * _self(default) : 현재 탭 or 창   * _blank : 새로운 탭 or 창   * _parent : 현재 탭을 불러낸 부모 탭   * _top : 최상위 탭  - title : 커서를 올렸을 때 설명  - id : 같은 페이지 안에서 이동할 때
button	- 버튼
i	- italic : 기울임
input	- 사용자가 정보를 입력하는 부분을 만들 때 사용 - 속성은 text, password, email 등 다양함 (추후 포스팅)
script	- 실행 가능한 코드를 웹 페이지에 포함시키거나 참조하기 위해 사용

 

 

2. Block 태그

: 라인 전체를 가져가는 태그 = 한 라인을 독점해서 사용(너비 100%)하는 태그이며 Inline처럼 요소를 구성하는 것이 아닌 한 영역을 구성할 때 사용

# Inline 태그와 다르게 영역을 구성하는 역할이기 때문에, 높이(height)나 넓이(width) 여백(margin, padding) 등 속성을 부여할 수 있다.

# 또 다른 자식으로 Block이나 Inline 태그 모두 올 수 있다.

## 하지만, Block 태그 중 <p>는 자식으로 Inline 태그만 올 수 있다.

# 종류

div	- 의미 없음, 컨텐츠들을 목적에 따라 묶을 때 사용
form	- 폼 생성 - 속성 값   * method : 전송방식(get, post) 선택   * name : form 식별 이름   * action : form을 전송할 서버의 스크립트 파일 지정   * target : action에서 지정한 스크립트 파일을 현재 창이 아닌, 다른 위치에 열도록 지정
h1~h6	- 제목 - h1에서 h6 순서로 글자가 작아진다.
header	- 제목 지정 - head는 웹 페이지 정보가 들어가지만, header는 사용자가 임의로 구역을 지정할 수 있음 = 여러번 사용 가능
nav	- navigation links : 문서 연결 링크 - 사실 div와 역할이 다를 것이 없지만, 의미를 부여함 - 주로 메뉴, 목차, 인덱스 등에서 사용함
section	- 맥락에 따라 주제별 콘텐츠로 묶을 때 사용 - 사실 div와 역할이 다를 것이 없지만, 의미를 부여함
aside	- 본문 이외의 내용 - 사실 div와 역할이 다를 것이 없지만, 의미를 부여함 - 주로 광고, 링크 등 사이드 바에 사용
table	- 테이블 생성 - 요소   * tr : 테이블의 각 행을 정의   * th : 테이블의 각 열을 정의   * td : 하나의 테이블 셀을 정의
ul	- 순서가 없는 목록 - 태그 내에 li 요소를 포함하여 항목을 표시
ol	- 순서가 있는 목록 - 태그 내에 li 요소를 포함하여 항목을 표시 - 속성   * type    - 1 : 숫자(default)    - a : 영어 소문자    - A : 영어 대문자    - i : 로마 숫자 소문자    - l : 로마 숫자 대문자   * start : 시작 목록의 순번을 숫자로 지정   * reversed : 항목을 역순으로 표시

// HTML, CSS 실습하면서 Inline, Block에 대한 이해가 부족한 상태로 실습을 하다 보니, 스타일이 적용되지 않거나 의도하던 대로 적용되지 않은 적이 많았는데, 이를 시작으로 항상 염두해야겠음!