11주차 - jsp (17) <div>와 <span>
2022. 9. 13. 18:00ㆍjsp/html
이번의 목표
01. <div> 태그와 <span> 태그의 차이점을 확인해보자.
이전에 실제 웹페이지 구축시에 <div> 태그와 <span> 태그의 기능 구분은 거의 동일하게 사용된다 했습니다.
거의 동일하게 사용되고 있지만 정확하게 두 태그가 어떻게 다른지를 알아볼 것입니다.
01. jsp 코드
02. 실행 화면
01. jsp 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ex18</title>
</head>
<body>
<h3> div 영역 지정, 영역 분할</h3>
<div style="background-color: red;"> div 첫번째 영역입니다.</div>
<div style="background-color: orange;"> div 두번째 영역입니다.</div>
<div style="background-color: yellow;"> div 세번째 영역입니다.</div>
<h3> span 영역 지정, 영역 분할</h3>
<span style="background-color: red;"> span 첫번째 영역입니다.</span>
<span style="background-color: orange;"> span 첫번째 영역입니다.</span>
<span style="background-color: yellow;"> span 첫번째 영역입니다.</span>
</body>
</html>02. 실행화면
실행화면에서 알 수 있듯이 아무런 속성을 사용하지 않은 <div>는 한줄을 모두 사용하고 <span>은 데이터 만큼한 사용합니다.
웹페이지 구축시에는 둘다 다양한 속성을 이용하여 크기를 조절하다보니 실제로는 크게 기능을 구분두지 않는 다고는 하지만, 알아두면 좋겠습니다.
'jsp > html' 카테고리의 다른 글
| <label>의 for 속성 (0) | 2022.09.22 |
|---|---|
| 11주차 - jsp (18) <button> (0) | 2022.09.13 |
| 11주차 - jsp (16) <fieldset>, <textarea>, <select> (0) | 2022.09.13 |
| 10주차 - jsp(15) scriptlet(스크립트릿), request, response (0) | 2022.09.13 |
| 10주차 - jsp (14) <form> (0) | 2022.09.13 |