728x90
HTML 에서의 마지막 포스팅이면서 아주 중요한 블록레벨과 인라인레벨입니다.
사진과 함께 코드를 첨부하여 코드에 주석으로 충분한 설명을 기재하였습니다.
인라인 레벨과 블록레벨, 대체되는 요소, 대체되지 않는 요소에 대하여 작성을하고 확인을 해 보았습니다.
바로 코드를 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>요소의 분류</title>
<style>
div,span {
background: yellow;
color:red;
width: 200px;
height: 200px;
/* font-size: 300px; */
}
</style>
</head>
<body>
<h1>대체되지 않는 요소</h1>
<p>ㄱㄴㄷㄹㅁㅂㅅㅇ</p>
<h1>대체되는 요소</h1>
<input/>
<hr/>
<h1>블록레벨</h1>
<h2>h요소는 블록레벨</h2>
<p>p요소도 블록레벨</p>
<ul>
<li>ul역시 블록레벨</li>
<li>ul역시 블록레벨 2</li>
</ul>
<ol>
<li>ol 블록레벨</li>
</ol>
<dl>
<dt>블록</dt>
<dd>블록레벨테스트</dd>
</dl>
<div>Park</div>
<hr/>
<h1>인라인레벨</h1>
<span>span 인라인 요소</span>
<input><select></select><textarea></textarea>
<img src="img/naver_favicon.ico" alt="favi">
<a href="">네이버</a> <a href="">다음</a>
<label>label은 인라인요소</label>
<em>em도 인라인요소</em>
<strong>strong도 인라인요소</strong>
<button>인라인</button>
<span>Park</span>
</body>
<!--
요소의 분류
1) 대체되는 요소 vs 대체되지 않는 요소
- 대체되는 요소들 : hr, img, table, textarea, select, input ..
- 대체되지 않는 요소들 : 나머지
2) 블록(레벨)요소 vs 인라인(레벨)요소
3) 블록레벨
- GUI 프로그래밍의 개념으로 보면 컨테이너 역할
- 줄바꿈이 됨
- 레이아웃을 담당
- h1~h6, ol, ul, dl, li, dt, dd, p, hr ..etc
- 대표적인 블록레벨 : div(division)
- div : 의미는 없지만 가장 대표적인 블록레벨
- 크기를 지정할 수 있음(css 로 width, height)
4) 인라인레벨
- GUI 프로그래밍의 개념으로 보면 컴포넌트 / 컨텐츠(글 or 내용) 담당
- 줄바꿈이 없음
- 대체되는 요소들은 inline 요소
- img, button, a, em, strong, input, label, select ..etc
- 대표적인 인라인레벨요소 : span
- span : 의미는 없지만 정말 많이 이용되는 인라인요소
- 크기를 지정할 수 없음(css 의 width, height)
(단, 대체되는 요소들은 지정 가능)
- 글자크기가 자신의 크기임
-->
</html>
처음 부분에 약간의 색상을 주기위해 CSS 속성을 기재하였습니다.
블록레벨과 인라인레벨 대체되는 요소와 대체되지 않는 요소에대한 간략한 설명을 기재하였고 , 여기서 HTML 포스팅은 마치고 CSS로 넘어가보겠습니다.
CSS에선 인라인레벨과 블록레벨의 차이를 명확히 알 수 있습니다.
CSS 포스팅에서 뵙겠습니다.
반응형
'Front-end > HTML' 카테고리의 다른 글
| 11. 여러가지 입력요소들 (회원가입 폼) (0) | 2018.08.08 |
|---|---|
| 10. 복습 예제 (0) | 2018.08.01 |
| 9. 폼의기능(GET, POST 방식) (0) | 2018.07.31 |
| 8. 테이블(table) 예제 (0) | 2018.07.31 |
| 8. 테이블(Table) 요소 (0) | 2018.07.26 |