CSS · HTML
HTML 블록과 인라인
혜원21
2019. 10. 15. 20:14
*
요소의 표시 방법에는 블록 구조와 인라인 구조가 있다.
이 두 단어는 스킨 편집 할 때 몇 번 들어봤다.
- 블록 구조
정의 : 항상 새 줄에서 시작하고 전체 너비를 사용한다.
블록 구조의 태그
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 인라인 구조