<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
1. display : inline
1) inline 레벨 : <span>, <b>, <i>, <a>
2) 글자에 적용
3) inline 다음 요소는 바로 뒤 오른쪽에 표시
4) width, height 불가능
2. display : block;
1) block 레벨 : <div>, <p>, <h>, <list>
2) 가로 영역을 모두 채움
3) block 다음 요소는 다음 줄에 표시
3. display : inline-block
1) inline-block 다음 요소는 바로 뒤 오른쪽에 표시(inline)
2) width, height 가능(block)
*/
.inline{
display: inline;
border: 1px solid black;
background-color: aqua;
padding: 5px;
width: 100px;
height: 100px;
}
.block{
display: block;
border: 1px solid black;
background-color: aqua;
padding: 5px;
width: 100px;
height: 100px;
}
.inline-block{
display: inline-block;
border: 1px solid black;
background-color: aqua;
padding: 5px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1>display: inline;</h1>
<p>국무총리는 대통령을 보좌하며, 행정에 관하여 <span class="inline">대통령</span>의 명을 받아 행정각부를 통할한다. 대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
<br /><br /><br />
<h1>display: block;</h1>
<p>국무총리는 대통령을 보좌하며, 행정에 관하여 <span class="block">대통령</span>의 명을 받아 행정각부를 통할한다. 대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
<br /><br /><br />
<h1>display: inline-block;</h1>
<p>국무총리는 대통령을 보좌하며, 행정에 관하여 <span class="inline-block">대통령</span>의 명을 받아 행정각부를 통할한다. 대통령은 내우·외환·천재·지변 또는 중대한 재정·경제상의 위기에 있어서 국가의 안전보장 또는 공공의 안녕질서를 유지하기 위하여 긴급한 조치가 필요하고 국회의 집회를 기다릴 여유가 없을 때에 한하여 최소한으로 필요한 재정·경제상의 처분을 하거나 이에 관하여 법률의 효력을 가지는 명령을 발할 수 있다.</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
