728x90
반응형
l <div> 태그
- 웹 브라우저 전체 공간에 대해 분할
- 블록(block) 형식으로 분할 (큰 공간)
l <span> 태그
- 웹 브라우저의 일부 영역만 분할
- 인라인(inline) 형식으로 분할 (작은 공간 :: 약간 입력한 글의 길이 만큼 잡아준다.)
frameborder : 경계선
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>div 와 span태그로 공간 분할하기</title>
</head>
<body>
<h3>div 공간 분할</h3>
<div style="background-color: #FFFF00;">div 첫 번째 영역입니다.</div>
<div style="background-color: #00FF00;">div 두 번째 영역입니다.</div>
<div style="background-color: #FF00FF;">div 세 번째 영역입니다.</div>
<p/>
<h3>span 공간 분할</h3>
<span style="background-color: #FFFF00">span 첫 번째 영역입니다.</span>
<span style="background-color: #00FF00">span 두 번째 영역입니다.</span>
<span style="background-color: #FF00FF">span 세 번째 영역입니다.</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>div 와 span 태그를 조합하여 공간 분할하기</title>
</head>
<body>
<h3>div/span 공간 분할 조합</h3>
<div style="height: 70px; background-color: #008800;">머리말 영역</div>
<div style="height: 50px; background-color: #FF00FF;">본문 영역</div>
<span style="background-color: #FF0000;">왼쪽 텍스트 영역</span>
<span style="background-color: #FFFFFF;">가운데 텍스트 영역</span>
<span style="background-color: #0000FF;">오른쪽 텍스트 영역</span>
<div style="height: 40px; background-color: #008800">꼬리말 영역</div>
</body>
</html>l <iframe> 태그
- 하나의 웹 문서 안에 또 다른 웹 문서를 표시할 때 사용
인사말, 강좌 소개, 저자 소개, 저자 홈페이지의 파일을 각각만들어서
.html으로 불러오는 방식으로 구동.
- target 속성: 링크를 클릭했을 때 웹 사이트가 열릴 곳 지정
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>iframe</title>
</head>
<body>
이곳은 iframe 영역입니다.
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>iframe</title>
</head>
<body>
<h3>iframe 공간 분할 예제</h3>
<div style="background-color: #FFCCFF;">
<span>
<a href="intro.html" target="if_a">인사말</a>
</span>
<span>
<a href="lecture.html" target="if_a">강좌 소개</a>
</span>
<span>
<a href="info.html" target="if_a">저자 소개</a>
</span>
<span>
<a href="http://cafe.naver.com/go2web" target="if_b">저자 홈페이지</a>
</span>
</div>
<p/>
<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: #FFCCFF;">한빛아카데미(주)</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>iframe2</title>
</head>
<body>
안녕하세요<p/>
웹 프로그래밍 저자 홍길동입니다.<p/>
질문이 있으면 cafe.naver.com/go2web 게시판에 남겨주세요.<p/>
감사요.
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>저자 소개</title>
</head>
<body>
홍길동<p/>
gowobprogram@gmail.com
</body>
</html>
728x90
반응형
'Html5' 카테고리의 다른 글
| 글자수 제한 (0) | 2022.01.18 |
|---|---|
| onclick에 target 걸기 (0) | 2021.08.15 |
| html 입력 양식 태그 <form> (0) | 2021.05.03 |
| html 기본 태그 (0) | 2021.05.03 |