※ <p>, <div>, <h>, <ul>, <ol>, <form> 요소는 display 속성값이 블록(block)인 대표적인 요소입니다.
HTML5 블록 요소
위 예제처럼 <br> 태그를 적용하지 않았음에도 div 이후 단락이 나뉘어집니다.
<div> 요소
<div>요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소 입니다.
<div>요소는 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<div style="background-color:lightgrey; color:graeen; text-align:center">
<h1>div요소를 이용한 스타일 적용</h1>
<p>이렇게 div요소로 여러 요소들을 묶은 다음에 style 속성과 클래스 등을 이용하여
한 번에 스타일을 적용할 수 있습니다.</p>
</div>
</body>
</html>
HTML5 <div>요소
style을 div에만 적용하고 h1과 p 요소에 적용하지 않았음에도 한 번에 스타일이 적용되었습니다.
인라인(inline) 타입의 요소
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용 (content)만큼만 차지합니다.
※ <span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소입니다.
<span> 요소
<span>요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.
<span>요소는 주로 텍스트의 특정 부분에 따로 스타일을 적용하기 위해 사용됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<h1>span요소를 이용한 스타일 적용</h1>
<p>이렇게
<span style="border: 3px solid red">span요소로 텍스트의 일부분</span>
만을 따로 묶은 후에 스타일을 적용할 수 있습니다.</p>
</body>
</html>
iframe 요소
iframe이란 inline iframe의 약자입니다.
iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 또 다른 하나의 웹 페이지를 삽입할 수 있습니다.
문법
<iframe src="삽입할페이지주소"></iframe>
iframe 요소는 frame 요소와는 달리 종료 태그가 존재합니다.
또한, iframe 요소는 명시된 크기로 삽입되는 창의 크기가 고정됩니다.
경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Iframes</title>
</head>
<body>
<h1>iframe태그를 이용한 웹 페이지 삽입</h1>
<iframe src="http://367.co.kr" style="width:100%; height:500px"></iframe>
</body>
</html>
iframe 요소의 테두리 변경
iframe 요소는 기본적으로 검정색 테두리(border)를 가집니다.
이러한 테두리의 스타일은 style 속성에서 border 속성을 이용하면 변경할 수 있습니다.