Knowledge/HTML & CSS
블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소에 대하여
TakeKnowledge
2019. 12. 10. 16:14
반응형
HTML 요소들은 모두 블록 레벨 ( Block level ) 요소와 인라인 ( Inline ) 요소로 분류할 수 있습니다
- 블록 레벨 요소 ( Block Level Elements )
- 특징
- 새로운 줄에서 시작합니다.
- 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
- 다른 블록 레벨 요소와 인라인 요소들을 포함할 수 있습니다.
- 블록 레벨 요소 자체를 text-align을 활용해 가운데 정렬할 수 없습니다.
- 블록 레벨 요소 자체를 Vertical-align을 활용해 수직 정렬할 수 없습니다.
- 블록 레벨 요소인 요소들
|
1
2
3
|
<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>
|
( 혹시나 해서 사족을 달자면 위의 태그들을 암기하듯 외우는 건 무의미하다고 생각합니다. 어차피 쓰다보면 체화되거든요. )
- 인라인 요소 ( Inline Elements )
- 특징
- 새로운 줄을 만들지 않습니다.
- 필요한 너비만 차지합니다.
- 다른 인라인 요소를 포함할 수 있습니다. ( 인라인 요소가 블록 레벨 요소를 포함하는 건 웹 표준에 어긋납니다 )
- height가 적용되지 않습니다.
- width가 적용되지 않습니다
- 인라인 요소인 요소들
|
1
2
3
|
<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>
|
( 위에도 적었지만 이거 억지로 외우지 마세요. 저도 복붙한 겁니다 )
- 요소 레벨 변경
이러한 HTML 요소들은 CSS의 display 속성을 활용해 변경할 수 있습니다.
예를 들어
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소 / 인라인 요소</title>
<style>
div {
background: #3498db;
}
span {
background: #f1c40f;
width: 500px;
}
</style>
</head>
<body>
<div>
block
</div>
<span>
inline
</span>
</body>
</html>
|
이런 코드가 있으면
위와 같이 블록 레벨 요소인 div는 전체 범위를 차지하고 있고 인라인 요소인 span은 width 값을 500이나 줬음에도 불구하고 적용되지 않아 글자만큼의 범위만 가지고 있는 것을 볼 수 있지만
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소 / 인라인 요소</title>
<style>
div {
background: #3498db;
display: inline;
}
span {
background: #f1c40f;
width: 500px;
display: block;
}
</style>
</head>
<body>
<div>
block
</div>
<span>
inline
</span>
</body>
</html>
|
display 속성을 활용해 div를 inline요소로 span을 block-level 요소로 바꾸면
두 요소의 성질이 뒤바뀌는 것을 확인할 수 있습니다.
참조
W3School - HTML Block and Inline Elements
반응형