본문 바로가기

개발일지/Front

인라인, 블록 박스, 인라인 블록 유형 설명

 

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	div, img{ margin:20px 20px; padding:10px;
			  width:200px; height:70px; }
	p { background:aqua; }
	div { background:skyblue; }
	span{ background:orange; border:5px solid red;
		  padding:20px; margin:150px 150px;
		  width:200; height:70; }
  </style>
 </head>
 <body>
  박스의 유형<div>div h1 p태그</div>는 블록박스 유형이고
  <p>그리고<span>a span 태그</span>는 인라인이며</p>
  <p>img 태그<img src="./img/incheon.jpg" alt="img태그" width="100" height="100">는 인라인 블록 유형이다.</p>
  <!-- 블록박스는 새로운 라인에 만들어지고
		인라인박스는 현재 위치 위에 만들어지며
		인라인 블록박스는 현재 위치에 박스가 별도로 만들어진다. -->
 </body>
</html>

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	span{ 
		display:block;
		background:yellowgreen;
		width:100px;
		height:60px;
		}
	div div{ display:inline; background:yellowgreen; }
	div span{ 
			  display:inline-block; 
			  border: 2px dotted orange;
			  background:yellowgreen;
			  margin:10px; 
			  width: 60px; height:80px;
			 }
  </style>
 </head>
 <body>
  <span>block</span>과
  <span>block</span>입니다.
  <hr>
  <div style="background:orange">
  	<div>inline1</div>
  	<div>inline2</div>
  	<div>inline3</div>
  </div>
  <hr>
  <div style="background:orange">
  	<span>inline-block-1</span>
	<span>inline-block-2</span>
  	<span>inline-block-3</span>
 </body>
</html>