블록 레벨 요소 (Block Level Element)
- 블록 레벨 요소는 전후 줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고 혼자 한줄을 차지
- 특징
· 항상 새로운 라인에서 시작한다.
· 화면 크기 전체의 가로 폭을 차지한다. (width : 100%)
· width, height, margin, padding 프로퍼티 지정이 가능하다.
· block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다.
· block 레벨 요소 예 div, h1~h6, p, ol, ul, li, hr, table, form 등 . . .
인라인 레벨 요소 (Inline Level Elemet)
- 인라인 레벨 요소는 전후 줄 바꿈 없이 한 줄에 다른 요소들과 나란히 배치
- 특징
· 새로운 라인에서 시작하지 않으며 문장의 중간에 들어갈 수 있다.
즉, 줄을 바꾸지 않고 다른 요소와 함께 한 행에 위치한다.
· content의 너비만큼 가로 폭을 차지한다.
· width, height 속성은 무시되며, margin과 padding 속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않는다. 즉, padding-top, padding-bottom, margin-top, magrin-bottom속성은 무시된다.
상, 하 여백은 line-height로 지정한다.
· inline 레벨 요소 뒤에 공백(엔터, 스페이스 등)이 있는 경우, 정의하지 않은 공백(4px)이 자동 지정된다.
- inline 레벨 요소 내에 block 레벨 요소를 포함할 수 없다.
- inline 레벨 요소는 일반적으로 block 레벨 요소에 포함되어 사용된다.
- inline 레벨 요소 예 : span, a, string, img, br, input, select, textarea, button 등 . . .
ex04 >>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>block 태그와 inline 태그</h3>
<div>
<p>
- block 태그 : 혼자 한줄을 차지하며, 항상 새로운 라인에서 시작<br>
화면 전체가 가로폭을 차지<br>
width, height, margin, padding 프로퍼티 지정이 가능<br>
block 태그에는 inline 태그를 포함할 수 있음
주요 block 태그 : div, h!h6, p, ol, ul, li, table, form 등
</p>
</div>
<p>
- line 태그 : 새로운 라인에 시작하지 않고 다른 요소들과 나란히 배치<br>
content 요소 만큼 폭을 차지<br>
width, height는 무시되고, margin, padding은 좌우 간격만 적용<br>
line 태그 뒤에 공백(엔터 포함)이 있는 경우 4px 정도의 공백이 자동으로 생김<br>
주요 inline 태그 : span, a, img, input, select, textarea, button 등
</p>
<hr>
<h3>block 태그 예</h3>
<p style="background: yellow;">자바</p><p style="background: tomato;">스프링</p>
<p style="width: 200px; background: gray;">웹</p>
<p style="background: blue;">CSS</p>
<hr>
<h3>inline 태그 예</h3>
<span style="background: red;">자바</span><span style="background: green;">안드로이드</span>
<span style="background: tomato;">인라인태그의 공백 엔터등은 4px정도의 자동공백이 생김</span>
<span style="width: 300px; background: black; color: white;">안드로이드</span>
<hr>
</body>
</html>
HTML 특수문자
ex05 >>
<!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>
'쌍용강북교육센터 > 9월' 카테고리의 다른 글
| 0913_HTML : 기본 태그(5) formatting 관련 태그 (0) | 2021.09.14 |
|---|---|
| 0913_HTML: 기본 태그(4) 공통속성 (0) | 2021.09.14 |
| 0913_HTML : 기본 태그 (2) (1) | 2021.09.14 |
| 0913_HTML : 기본 태그(1) (1) | 2021.09.14 |
| 0913_HTML : HTML 이란? (1) | 2021.09.13 |