반응형
[2021.07.28] 인턴 +149 HTML Block and Inline Elements - 11 (블록 및 인라인 요소)
Block-level Elements
- 항상 새 줄에서 시작
- ★★★ 항상 사용 가능한 전체 너비를 차지 ★★★
- 위쪽 여백과 아래쪽 여백이 있음(인라인 요소에는 X)
Block-level Elements example
<!DOCTYPE html>
<html>
<body>
<div style="border: 4px solid black">Hello World</div>
</body>
</html>
<출력 결과>
+@ <div> Element
- 종종 다른 HTML 요소에 대한 컨테이너로 사용
- <div>요소에 속성이 필요 없지만, style, class ,id가 존재함
<!DOCTYPE html>
<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
</body>
</html>
<출력 결과>
-----------------------------------------------------------------------------------------------------------------------------------
Inline Elements(인라인 요소)
- 새 줄에서 시작X
- ★★★ 필요한 만큼만 너비를 차지 ★★★
Inline Elements Example
<!DOCTYPE html>
<html>
<body>
<p>This is an inline span <span style="border: 1px solid black">Hello World</span> element inside a paragraph.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>
</body>
</html>
<출력 결과>
+@ <span> Element
- 텍스트, 문서의 일 부분 표시하는 데 사용
- <span>요소에 속성이 필요 없지만, style, class ,id가 존재함
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
</body>
</html>
<출력 결과>
반응형
'Web' 카테고리의 다른 글
| [2021.07.28] 인턴 +149 HTML id & iframes - 13 (0) | 2021.07.28 |
|---|---|
| [2021.07.28] 인턴 +149 HTML class Attribute? - 12 (+@ How to use class attributes in javascript?) (0) | 2021.07.28 |
| [2021.07.28] 인턴 +149 HTML List(리스트) - 10 (0) | 2021.07.28 |
| [2021.07.27] 인턴 +148 HTML Tables(테이블) - 9 (0) | 2021.07.27 |
| [2021.07.27] 인턴 +148 HTML Image - 8 (0) | 2021.07.27 |
댓글