요소
블럭요소 : 한줄단위로 영역이 잡힙 / 자동으로 줄바꿈이 발생함
ex) div, p, pre, h1~6, ...
인라인요소 : content영역만 잡힙 / 옆으로 배치됨
ex) span, label, input, img,...
고정크기, 가변크기
content영역의 크기를 조정하는 속성(내용물 영역)
<style>
.size-test{
border : 10px solid red;
}
#test1{
width:400px;
height:200px;
}
#test2{
width:50%;
height:100%;
height:150px;
}
</style>
<body>
<h4>고정크기 px</h4>
<div id="test1" class="size-test"></div>
<h4>가변크기 %</h4>
<div id="test2" class="size-test"></div>
</body>
display
화면배치 방법을 변경해주는 속성
블럭요소와 인라인요소의 속성을 변경해서 배치방식을 바꿔줌.
[표현법]
선택자 {
display:inline / inline-block / block;
}
inline
<style>
.display-test{
border : 1px solid black;
width : 150px;
height : 150px;
}
.red{
background-color: red;
}
.yellow{
background-color: yellow;
}
.pink{
background-color: pink;
}
.green{
background-color: green;
}
.purple{
background-color: purple;
}
.inline{
display:inline;
}
</style>
<body>
<h4>display : inline;</h4>
<div class="display-test red">첫번째 영역</div>
<div class="display-test yellow">두번째 영역</div>
<div class="display-test pink">세번째 영역</div>
<div class="display-test green">네번째 영역</div>
<div class="display-test purple">다섯번째 영역</div>
<br>
<div class="display-test inline red">첫번째 영역</div>
<div class="display-test inline yellow">두번째 영역</div>
<div class="display-test inline pink">세번째 영역</div>
<div class="display-test inline green">네번째 영역</div>
<div class="display-test inline purple">다섯번째 영역</div>
<b>display:inline을 적용할 시, width랑 height속성이 적용되지 않음.</b>
</body>
inline-block
<style>
.inline-block{
display:inline-block;
}
</style>
<body>
<h4>display : inline-block</h4>
<div class="display-test inline-block red">첫번째 영역</div
><div class="display-test inline-block yellow">두번째 영역</div
><div class="display-test inline-block pink">세번째 영역</div
><div class="display-test inline-block green">네번째 영역</div
><div class="display-test inline-block purple">다섯번째 영역</div>
</body>
block
<style>
.block{
display:block;
}
</style>
<body>
<h4>display : block</h4>
<span class="display-test red">첫번째 영역</span>
<span class="display-test yellow">두번째 영역</span>
<span class="display-test pink">세번째 영역</span>
<span class="display-test green">네번째 영역</span>
<span class="display-test purple">다섯번째 영역</span>
<br><br>
<span class="display-test block red"> 첫번째 영역</span>
<span class="display-test block yellow">두번째 영역</span>
<span class="display-test block pink">세번째 영역</span>
<span class="display-test block green">네번째 영역</span>
<span class="display-test block purple">다섯번째 영역</span>
</body>