728x90
반응형
SMALL
안녕하세요.
#yeoneeblog 여니입니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레이아웃관련스타일</title>
<style>
body{
margin:0;
}
.size-test{
border : 10px solid red;
}
#test1{
width: 400px;
height: 200px;
}
#test2{
width:50%;
height: 150px;
}
.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;
}
.inline-block{
display: inline-block;
}
.block{
display:block;
}
</style>
</head>
<body>
<!--
블럭 요소 : p ,pre ,h, div / 자동줄바꿈이 된다. / 한줄 전체
인라인 요소 : span, b, strong / 자동줄바꿈이 없다 / content영역
-->
<h1>레이아웃 관련 스타일</h1>
<h3>width, height</h3>
<p>
content 영역(내용을 차지하고)의 크기를 조절하는 속성
</p>
<h4>고정크기 (px)</h4>
<div id="test1" class="size-test"></div>
<h4>가변크기 (%)</h4>
<div id="test2" class="size-test"></div>
<hr>
<h3>display : 화면 배치 방법 변경</h3>
<p>
블럭요소와 인라인요소의 속성을 변경해서 배치방식을 변경할수 있다.
</p>
<pre>
선택자{
display:inline/inline-bolock/block;
}
</pre>
<!-- 기존에 블럭요소인 div를 인라인 요소로 바꾸기-->
<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>
<!-- 인라인 요소로 배치를 하나, width , height의 크기도 유지가 되었으면 좋겠을때 -->
<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>
<!-- 기존에 인라인요소인 span을 블럭요소로 바꿔보기-->
<h4>display : block</h4>
<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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 트랜지션관련스타일 HTML (0) | 2023.05.14 |
|---|---|
| 레이아웃관련스타일2 HTML (1) | 2023.05.14 |
| 배경관련스타일 HTML (0) | 2023.05.13 |
| 테두리관련스타일 HTML (0) | 2023.05.13 |
| 영역관련스타일 HTML (0) | 2023.05.12 |
