목표: p, div, span 등의 차이점
요약
- Display 요소의 특징(block과 inline 개념 파악하기)
안녕하세요 냥장판 입니다
HTML 배우는 초기에
단락(paragraph)은 p, 레이아웃 분할(division)은 div, 특정 부분(span)만 묶어주는 span 에 대해서 들어본적이 있을거에요.
들어본적이 없더라도 보셨을거라 생각합니다
이들의 차이점에 대해서 설명해 드릴게요
그 전에 display 속성값의 특징에 대해 잠깐 알고가야해요
1. Display 요소값의 특징(Block, Inline)
Display 요소는 두개의 특징을 가져요
- Block
- Inline
차이점은 아래서 보실테지만,
새로운 요소값을 사용할 때 시작줄이 새로운 줄이냐 아니냐로도 나뉩니다.
2. Block-level 요소
Block 레벨은 아래 그림과 같이
한 부분을 통째로 블럭처럼 사용하는 것이에요.
새로운 Block 요소는 새로운 라인에서 Block을 시작합니다.
그래서 두 Block간에는 겹치는 일이 없어요.
Block-level 요소 종류는 아래와 같습니다.
| <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> |
한 예로 div에 대해 알아보죠.
아래처럼 블럭 내에 컨텐츠가 오게되요.
3. Inline-level 요소
Inline-level 요소는 문단 중간에 들어간다고 생각하시면 됩니다.
새로운 라인에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.
inline은 컨텐츠 안에있는 부분을 강조하고 싶을 때 사용하고,
아래 보는것 처럼 새로운 라인에서 시작하지 않아요.
inline 특징을 가지는 태그나 속성값은 아래와 같이 많습니다.
| <a> <abbr> <acronym> <b> <dbo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kdb> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var> |
block과 inline을 비교하면 아래와 같아요.
Hello World에 빨간색 네모박스 쳐져있는게 보이시죠?
span을 사용한 거에요.
소스코드는 아래와 같고요.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Block 과 inline - 냥장판 🐱👤</title>
</head>
<body>
<div style="background-color:lightgrey; color:green; text-align:center">
<h1>div tag</h1>
<p>
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
</p>
</div>
<div style="background-color:rgb(233, 185, 185); color:rgb(40, 44, 40); text-align:center">
<h1>div tag - new line</h1>
<p>
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
</p>
</div>
<hr>
<p>This is an inline span <span style="border: 1px solid red">Hello World</span> element inside a paragraph.</p>
</body>
</html>
|
cs |
그럼 이만!
'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS 기본 문법, 사용방법 (2) | 2020.01.21 |
|---|---|
| [CSS] CSS를 사용하는 이유 (6) | 2020.01.20 |
| [HTML] charset 의 중요성 ❤ (10) | 2020.01.16 |
| [HTML] Link 태그 사용하기 - 새창에서 페이지 열기 (10) | 2020.01.15 |
| [HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 (6) | 2020.01.14 |
댓글