[HTML] Block-level element / inline element / 특수문자
by mini_min[HTML]
Block-level element / inline element / 특수문자
✔️ Block-level element : 블록 레벨 요소
: 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고, 혼자 한 줄을 차지한다.
📓 특징
- 항상 새로운 라인에서 시작
- 화면 크기 전체의 가로 폭을 차지한다. width:100%
- 블록 레벨 요소 내에 inline 레벨 요소 포함 가능!
ex) div , h1~h6, p, ol, ul, hr, table, form 등
✔️ inline element : 인 라인 레벨 요소
: 인 라인 레벨 요소는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치된다.
📓 특징
- 새로운 라인에서 시작하지 않으며, 문장 중간에 들어갈 수 있음!
- content 너비 만큼만 가로 폭을 차지한다.
- margin 과 padding 속성은 좌우 간격에만 반영되고, 상하 간격은 반영 ❌
- 상하 여백은 line-height 로 지정 가능
- inline 레벨 요소 내에 block 레벨 요소 포함 ❌
ex) span, a, strong, img, br, input, select, textarea, button 등
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> block 과 inline 태그 </h3>
<h3> block 태그 </h3>
<p style="background: aqua;">스프링</p>
<p style="background: fuchsia;">웹</p>
<p style="background: gray;">css</p>
<hr>
<h3> inline 태그 </h3>
<span style="background: aqua;">안드로이드</span>
<span style="background: lime;">자바</span>
<span style="background: tomato; color: white;">서블릿</span>
</body>
</html>
✔️ html 특수문자
| 표현문자 | 문자엔티티 | 숫자엔티티 | 설명 |
| 공백 | |   | 공백 문자 하나 |
| & | & | & | & 부호 표시 |
| < | < | < | < 부호 표시 |
| > | > | > | > 부호 표시 |
| " | " | " | " 표시 |
| ' | ' | ' | ' 표시 |
| ? | ? | ? 표시 | |
| @ | @ | @ 표시 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3> html 특수 문자 </h3>
<p>
<br> : 라인을 넘긴다.
</p>
<hr>
<p>
html은 공백을 많이 띄어도 한 칸만 떨어진다.
이럴 경우에는 &nbsp; 으로 공백을 띄울 수 있다.
</p>
<p>
자바 스프링
</p>
</body>
</html>
'HTML' 카테고리의 다른 글
| [HTML] 주요 formatting 태그 / <b> / <em> / <i> / <pre> / <sub> / <sup> (0) | 2022.09.06 |
|---|---|
| [HTML] 공통 속성(Global Attributes) / data-* / contenteditable (0) | 2022.09.06 |
| [HTML] <body> / <h x> / <p> / <br> / <hr> 태그 (0) | 2022.09.06 |
| [HTML] 기본 태그 - http-equiv / <!DOCTYPE> / <html> / <head> / <title> / <meta> (0) | 2022.09.06 |
| [HTML] HTML 개념 / 기본 구조 / 마크업 언어 (0) | 2022.09.06 |
블로그의 정보
개발자 미니민의 개발로그
mini_min