▣ <div> 태그
· 웹 브라우저 전체 공간에 대해 분할
· 블록(block) 형식으로 분할
▣ <span> 태그
· 웹 브라우저의 일부 영역만 분할
· 인라인(inline) 형식으로 분할
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div와 span태그로 공간 분할하기</title>
</head>
<body>
<h3>div 공간 분할</h3>
<div style="background-color: #FFFF00;">첫 번째 영역입니다.</div>
<div style="background-color: #A5DF00;">두 번째 영역입니다.</div>
<div style="background-color: #00BFFF;">세 번째 영역입니다.</div>
<p></p>
<h3>span 공간 분할</h3>
<span style="background-color: #FFFF00;">첫 번째 영역입니다.</span>
<span style="background-color: #A5DF00;">두 번째 영역입니다.</span>
<span style="background-color: #00BFFF;">세 번째 영역입니다.</span>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div와 span태그를 조합하여 공간 분할하기</title>
</head>
<body>
<h3>div/span 공간 분할 조합</h3>
<div style="height: 70px; background-color: #F5A9A9;">머리말 영역</div>
<div style="height: 70px; background-color: #ACFA58;">본문 영역</div>
<span style="background-color: #E2A9F3;">왼쪽 테스트영역</span>
<span style="background-color: #FFFF00;">가운데 테스트영역</span>
<span style="background-color: #E2A9F3;">오른쪽 테스트영역</span>
<div style="height: 40px; background-color: #81F7F3;">꼬리말영역</div>
</body>
</html>
▣ <iframe> 태그
· 하나의 웹 문서 안에 또 다른 웹 문서를 표시할 때 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
<style>
div {
background-color: #ffff00;
width: max-content;
}
</style>
</head>
<body>
<h3>iframe 공간 분할 예제</h3>
<div>
<a href="intro.html" target="if_a">인사말</a> |
<a href="lecture.html" target="if_a">강좌 소개</a> |
<a href="info.html" target="if_a">저자 소개</a> |
<a href="https://byeol-chorong.tistory.com/" target="if_b">저자 홈페이지</a> |
</div>
<br>
<iframe src="basic.html" width="400" height="200" name="if_a" frameborder="0"></iframe>
<iframe src="basic.html" width="400" height="200" name="if_b" scrolling="no"></iframe>
<div style="background-color: rgb(255, 230, 234);">별초롱언니는 개발중</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe</title>
</head>
<body>
이곳은 iframe 영역입니다.
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인사말</title>
</head>
<body>
<p>안녕하세요</p>
<p>별초롱언니입니다</p>
<p>모두 아자아자 화이팅입니당👍</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>강좌 소개</title>
</head>
<body>
<p>강좌명 : 웹 프로그래밍 (Web Programming)</p>
<p>학습주제 : HTML5, CSS3 JavaScripts, Jquery</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>저자 소개</title>
</head>
<body>
<p>❤️별초롱언니❤️</p>
<p>https://byeol-chorong.tistory.com/</p>
</body>
</html>
div 부분만 background color 주고 텍스트에 맞게 설정하였고
첫번째 사진은 인사말 / 두번째 사진은 강좌 소개 / 세번째 사진은 저자 소개 /
그리고 저자 홈페이지는 미리 눌러놓은 상태라 사진마다 다 확인됨
iframe name="if_a" 부분은 frameborder="0"을 주어 테두리를 없앴고
iframe name="if_b" 부분은 scrolling="no"를 하여 스크롤이 안되도록 설정하였다
'웹프로그래밍 HTML > 입력양식과 공간 분할 태그' 카테고리의 다른 글
| HTML 웹페이지 만들어보기 (0) | 2025.03.10 |
|---|---|
| TEST (0) | 2025.03.10 |
| 입력 양식 태그 (0) | 2025.03.06 |
| HTML5와 입력 양식 요소 (0) | 2025.03.05 |