목차
접기
728x90
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div, span</title>
</head>
<body>
<!-- div태그는 공간분할 태그로써 한 라인을 전부 다 차지한다.
내부적으로 div를 써서 조각으로 라인을 차지하게끔 할 수가 있다. -->
<div>
div
<div>div 태그 - 블럭형태1</div>
<div>div 태그 - 블럭형태1</div>
div
</div>
<div>div 태그 - 블럭형태2</div>
<div>div 태그 - 블럭형태3</div>
<div>div 태그 - 블럭형태4</div>
<hr />
<!-- span 태그는 글자나 문장의 영역만큼만 차지를 한다. 아울러 인라인 형태로 왼쪽에서 오른쪽으로 쌓인다. -->
<span>span태그 - inline형태1</span>
<span>span태그 - inline형태2</span>
<span>span태그 - inline형태3</span>
<span>span태그 - inline형태4</span>
<span>span태그 - inline형태5</span>
</body>
</html>728x90
반응형
LIST
'HTML, CSS' 카테고리의 다른 글
| 블릿 모양 변경하는 방법 (0) | 2021.06.02 |
|---|---|
| css 선택자 종류 / 기본 선택자 (0) | 2021.06.02 |
| fieldset, legend 태그 사용하기 / HTML5의 대표적인 공간 분할 태그(div, span) (0) | 2021.06.02 |
| 시맨틱태그_적용한 HTML5 문서 구조 (0) | 2021.06.02 |
| 시맨틱태그_설명(html 웹 문서 구조) (0) | 2021.06.02 |