본문 바로가기
웹코딩 배우기/· HTML

HTML 블록과 인라인

by 닐기 2019. 10. 15.

요소의 표시 방법에는 블록 구조와 인라인 구조가 있다.

이 두 단어는 스킨 편집 할 때 몇 번 들어봤다.

 

- 블록 구조

정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다.

 

블록 구조의 태그

address
article
aside
blockquote
canvas
dd
div
dl
dt
fieldset
figcaption
figure
footer
form
h1-h6
header
hr
li
main
nav
noscript
ol
p
pre
section
table
tfoot
ul
video

- 인라인 구조

정의 : 새 줄에서 시작하지 않고 태그에 포함된 컨텐츠 너비만큼만 사용한다.

 

인라인 구조의 태그

a
abbr
acronym
b
bdo
big
br
button
cite
code
dfn
em
i
img
input
kbd
label
map
object
output
q
samp
script
select
small
span
strong
sub
sup
textarea
time
tt
var

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div style="border: 1px solid black;">블록구조1</div>
<div style="border: 1px solid blue;">블록구조2</div>
<div style="border: 1px solid tomato;">블록구조3</div>
<p>블록 구조는 새 줄에 표시되고 기본적으로 지정하지 않으면 화면의 가로 값을 모두 사용한다.</p>

<p>이라인 이전 내용.<span style="border: 1px solid black;">인라인 구조</span>인라인 이휴 내용</p>
<span style="border: 1px solid black;">인라인 구조1</span>
<span style="border: 1px solid blue;">인라인 구조2</span>
<span style="border: 1px solid tomato;">인라인 구조3</span>

</body>
</html>
블록구조1
블록구조2
블록구조3

블록 구조는 새 줄에 표시되고 기본적으로 지정하지 않으면 화면의 가로 값을 모두 사용한다.

이라인 이전 내용.인라인 구조인라인 이휴 내용

인라인 구조1 인라인 구조2 인라인 구조

 

반응형

댓글0