HTML 인라인 요소와 블록레벨 요소의 기본 개념 및 활용예_HTML/Xhtml_웹페이지 제작

HTML 태그는 인라인 요소와 블록 수준 요소의 두 가지 유형으로 구분됩니다. 먼저 인라인 요소와 블록 수준 요소의 개념을 이해해 보겠습니다.

블록 수준 요소: 는 일반적으로 인라인 요소를 수용할 수 있는 다른 요소를 위한 컨테이너이며, 다른 블록 수준 요소는 같은 줄에 있는 다른 요소를 제외합니다. 너비와 높이는 높이( height) 속성으로 설정할 수 있으며, 일반 흐름의 블록 수준 요소는 수직으로 배치됩니다. 일반적인 블록 요소는 "div"입니다

인라인 요소(인라인 요소): 인라인 요소는 텍스트나 다른 인라인 요소만 수용할 수 있습니다. 이 요소는 블록 수준 요소의 자손이며 다른 인라인 요소가 같은 줄에 위치할 수 있도록 합니다. 높이와 너비는 설정할 수 없습니다. 일반적인 인라인 요소는 "a"입니다.

블록 수준 요소의 개념에 따르면 블록 수준 요소의 앞뒤에 줄 바꿈이 있다는 것을 이해할 수 있습니다. 이는 요소 앞뒤에
태그를 추가하는 것과 같습니다. 블록 수준 요소는 블록이나 직사각형으로 생각할 수 있으므로 블록 수준 요소는 높이 및 너비 속성을 설정할 수 있습니다

예:
css 파일:

코드 복사

코드는 다음과 같습니다.

#div1{
너비:200px;
높이:200px
배경:#666
}
div2{
너비: 200px; 200px;
배경:#F00
}

html 파일:

코드 복사코드는 다음과 같습니다.

div1
블록 수준 요소는 같은 줄에 있는 다른 요소를 제외합니다. it

div2
블록 수준 요소는 같은 줄에 있는 다른 요소를 제외합니다.

> ;

표시 효과:

두 div 요소가 같은 줄에 있지 않습니다
인라인 요소의 개념에 따르면 인라인 요소 전후에는 줄 바꿈이 없다는 것을 이해할 수 있습니다. 인라인 요소를 선으로 생각할 수 있으므로 높이 및 너비 속성을 설정할 수 없습니다.

블록 요소 태그

address - 주소

blockquote - 블록 인용
center - 가운데 정렬
dir - 디렉토리 목록
div - 일반적으로 사용되는 블록 수준은 CSS 레이아웃의 기본 태그이기도 합니다.
dl - 정의 목록
fieldset - 양식 제어 그룹
form - 대화형 양식
h1 - 제목
h2 - 자막
h3 - 레벨 3 제목
h4 - 레벨 4 제목
h5 - 5 레벨 제목
h6 - 레벨 6 제목
hr - 가로 구분선
isindex - 입력 프롬프트
menu - 메뉴 목록
noframes - 프레임 선택적 콘텐츠, (프레임을 지원하지 않는 브라우저의 경우 표시 이 블록 콘텐츠
noscript - 선택적 스크립트 콘텐츠(스크립트를 지원하지 않는 브라우저의 경우 이 콘텐츠 표시)
ol - 정렬 형식
p - 단락
미리 - 서식이 지정된 텍스트
테이블 - 테이블
ul - 정렬되지 않은 목록

인라인 요소

a - 앵커

abbr - 약어
acronym - 첫 번째 단어
b - 굵게(권장하지 않음)
bdo - bidi 재정의
big - 큰 글꼴
br - 줄 바꿈
cite - quote
code - 컴퓨터 코드(소스 코드 인용 시 필수)
dfn - 필드 정의
em - 강조
font - 글꼴 설정(권장하지 않음)
i - italic
img - 이미지
input - 입력 상자
kbd - 키보드 텍스트 정의
label - 테이블 레이블
q - 짧은 따옴표
s - 밑줄
samp - 샘플 컴퓨터 코드 정의
select - 항목 선택
small - 작은 글꼴 텍스트
span - 일반적으로 사용되는 인라인 컨테이너, 텍스트 내 블록 정의
strike - 밑줄
strong - 굵은 강조
sub - 아래 첨자
sup - 위 첨자
textarea - 여러 줄의 텍스트 입력 상자
tt - 타자기 텍스트 정의
var - 변수 정의