본문 바로가기
HTML

HTML(8) - 블록과 인라인/공간 분할 예

KCasey 2020. 5. 12. 19:08 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>블록과 인라인</title>
</head>
<body>
<!-- 
	요소(태그)의 유형
	기본 표시 값 - block, inline
	
	block : 항상 새 줄에서 시작. 사용 가능한 전체 너비를 차지.
			h1~h6, p, ul, ol, dl, 시맨틱 태그들 등
	inline : 새 줄에서 시작하지 않음. 필요한 만큼만 폼을 차지.
			a, b, i, strong, em, mark 등	
-->

<!-- 
	div 태그
	: HTML 요소의 컨테이너로 사용되는 태그
 -->
<div style="background-color: black; color: white; padding: 20px; margin: 50px;">
	<!-- padding : 영역 내부 여백, margin : 영역 외부 여백 -->
	<h2>Lorem Ipsum</h2>
	<p">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
	 Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
	 when an unknown printer took a galley of type and scrambled it to make a 
	 type specimen book. It has survived not only five centuries, but also the
	 leap into electronic typesetting, remaining essentially unchanged. 
	 It was popularised in the 1960s with the release of Letraset sheets containing
	 Lorem Ipsum passages, and more recently with desktop publishing software
	 like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
</div>

<!-- div | span 공간 분할 차이점 비교 -->
<hr>
<h3>div 공간 분할</h3>
<div style="background-color: #ffff00">
	div 첫번째 영역...
</div>
<div style="background-color: #00ff00">
	div 두번째 영역...
</div>
<div style="background-color: #ff00ff">
	div 세번째 영역...
</div>

<h3>span 공간 분할</h3>
<span style="background-color: #ffff00">
	span 첫번째 영역..
</span>
<span style="background-color: #00ff00">
	span 두번째 영역..
</span>
<span style="background-color: #ff00ff">
	span 세번째 영역..
</span>

<hr>
<h3>공간 설정(div/span 혼용)</h3>
<div style="height: 70px; background-color: yellow;">머리말 영역</div>
<div style="background-color: green;">본문 영역</div>
<span style="background-color: red;">왼쪽 텍스트 영역</span>
<span style="background-color: white;">가운데 텍스트 영역</span>
<span style="background-color: blue;">오른쪽 텍스트 영역</span>
<div style="height: 40px; background-color: black; color: white">꼬리말 영역</div>

</body>
</html>

 

블록과 인라인 출력 화면

 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>공간 분할 예</title>
</head>
<body>
	<h3>iframe 공간 분할 예제</h3>
	<div style="background-color: #ffff00;">
		<span>
			<a href="intro.html" target="if_a">인사말</a> |&nbsp;
		</span>
		<span>
			<a href="lecture.html" target="if_a">강의 소개</a> |&nbsp;
		</span>
		<span>
			<a href="info.html" target="if_a">강사 소개</a> |&nbsp;
		</span>
		<span>
			<a href="http://icia.co.kr" target="if_b">교육원 홈페이지</a> |&nbsp;
		</span>
	</div>
	<p/><!-- <p/> : p 의 단축 -->
	<iframe src="basic.html" width="600" height="200" name="if_a">
	</iframe><br><br>
	<iframe src="basic.html" width="600" height="200" name="if_a" frameborder="0"><!-- frameborder: 프레임 테두리 생략가능 -->
	</iframe><br><br>
	<iframe src="basic.html" width="600" height="200" name="if_b">
	</iframe><br><br>
	<iframe src="basic.html" width="600" height="200" name="if_b" scrolling="no"><!-- scrolling="no" : 스크롤 기능 없앰 -->
	</iframe><br><br>
	
	<div style="background-color: #ffff00">
		ICIA 교육원(주)
	</div>
</body>
</html>

 

 

위 main.html을 만들고 실행 시켜주면 아래와 같은 화면이 출력된다. 

<처음 화면>

 

 

그 후, 각 링크를 걸어줄 html파일을 생성해주면 된다.

basic.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p/>기본화면
</body>
</html>

 

intro.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>인사말</h3>
<p>안녕하세요.</p>
<p>강의를 맡은 OOO입니다.<br>
질문은 email@google.com으로 보내주세요.
</p>
</body>
</html>

 

lecture.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>강좌 페이지</h3>
<p>여기는 강좌 페이지 입니다.</p>
<p>아래의 주제로 강의 합니다.</p>
<ul>
	<li>HTML5</li>
	<li>CSS3</li>
	<li>Javascript</li>
</ul>
<a href="http://www.w3.org" target="_top">
   w3c 홈페이지
</a>
<iframe src="l2.html" width="200" height="100" name="if_c">
</iframe>
</body>
</html>

 

information.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>
여기는 정보 페이지 입니다.
</p>
</body>
</html>

 

l2.html
: l2.html에 있는 링크는 target="_parent"이기 때문에 상위 영역인 lecture.html iframe에서 출력된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
여기는 자손의 자손 페이지 입니다.
<a href="http://icia.co.kr" target="_parent">ICIA</a>
</body>
</html>

 

 

총 4개의 html파일을 만들어주고 각 span 태그를 선택하면 해당 링크가 연결된 iframe 창에 열린다.

각 iframe 별 출력 화면

 

 

 

 

 

'HTML' 카테고리의 다른 글

HTML(9) - 다양한 입력 양식/input 태그/non input 태그  (0) 2020.05.13
HTML(9) - 입력 양식/<form> 태그  (0) 2020.05.12
HTML(7) - 이미지 사용, 오디오 열기, 비디오 열기  (0) 2020.05.12
HTML(6) - 시간표 만들기  (0) 2020.05.11
HTML(5) - 표만들기  (0) 2020.05.11

'HTML' Related Articles

티스토리툴바