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>레이아웃관련스타일2</title>
<style>
.positioning{
border: 1px solid black;
}
.outer{
border : 1px solid blue;
position : relative;
/*
기준이 되는 요소에 position:relative로 기준점을 줘서 절대적인
배치가 가능하게 함
만약 기준점을 바로 위의 부모요소에 지정하지 않는다면 기준점이
body로 잡힘
지정된 요소 내부에 다른요소가 상대적인 위치를 지정할 수 있도록
기준이 되어줌.
내부에 작성되는 후손요소에 top, bottom, left, right속성을 쓸수가 잇음
*/
}
#first{
width: 300px;
height: 300px;
background-color: yellow;
}
#second{
width: 200px;
height: 200px;
background-color: yellowgreen;
position : absolute;
/* 기존의 요소배치를 무시하고 지정된 절대위치에
요소를 배치하게끔 해주는 속성*/
top: 50px;
left: 50px;
/* 부모요소를 기준으로 각각 위, 왼쪽으로부터 50px인 곳으로 옮겨버림*/
}
#third{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 100px;
left: 100px;
}
.fixed-area{
width: 100%;
height: 100px;
background-color: red;
/* position:fixed;
top:0px; */
}
.z-test{
width: 150px;
height: 100px;
border:1px solid black;
position: absolute;
}
#z1{
background-color: yellow;
top:100px;
left:100px;
z-index:10;
}
#z2{
background-color: green;
top:50px;
left:50px;
z-index: 100;
/* z인덱스가 더 높을수록 다른요소들보다 더
위에 쌓인다.*/
}
#z3{
background-color: red;
z-index: 400;
/* z-index 값이 같은경우 html작성 순서상
더 뒤에있는요소가 먼저 표시됨*/
}
.vis-test{
width: 100px;
height: 100px;
}
#vis{
/* visibility: hidden; */
/* 요소가 안보여짐. 단, 공간은 차지하고있음*/
display: none;
/* 요소가 안보여짐. 또한 공간도 차지하지 않음 */
}
.float-test{
border:1px solid black;
width:70px;
height: 30px;
float:left;
/* 왼쪽에서부터 차례대로
공중으로 띄워져 있는것 */
}
</style>
</head>
<body>
<h1>배치 관련 스타일</h1>
<h3>position : 절대위치와 상대위치</h3>
<div class="outer">
<div id="first" class="positioning">첫번째 자식</div>
<div id="second" class="positioning">두번째 자식</div>
<div id="third" class="positioning">세번째 자식</div>
</div>
<br>
<h3>고정위치</h3>
<div class="positioning fixed-area"></div>
<hr>
<h3>z-index</h3>
<p>
페이지 안의 요소들을 순서대로 위로
쌓는 속성
</p>
<div class="outer">
<div id="z1" class="z-test">요소1</div>
<div id="z2" class="z-test">요소2</div>
<div id="z3" class="z-test">요소3</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<h3>visibility</h3>
<p>
페이지에 특정요소를 보이거나 보이지 않게 하는 속성
</p>
<div class="vis-test" style="background-color: red;"></div>
<div id="vis" class="vis-test" style="background-color: green;"></div>
<div class="vis-test" style="background-color: yellow;"></div>
<hr>
<h3>float</h3>
<p>
페이지 내의 요소들을 화면으로부터 띄워서 왼쪽 또는 오른쪽으로 배치하는 속성
</p>
<div class="float-test">요소1</div>
<div class="float-test">요소2</div>
<div class="float-test">요소3</div>
<div class="float-test">요소4</div>
<div class="float-test">요소5</div>
<div class="float-test">요소6</div>
<div class="float-test">요소7</div>
<br clear="both"><!-- float 속성을 해제하는 속성-->
<!-- float 속성을 쓰게 되면 그 이후에 적힌 요소들이 공중에 뜨기 때문에 속성을 해제해줘야한다.-->
<div>요소 6</div>
<div>요소 7</div>
<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><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>
1) visibility: hidden;
/* 요소가 안보여짐. 단, 공간은 차지하고있음*/
2) display: none;
/* 요소가 안보여짐. 또한 공간도 차지하지 않음 */
1)
2)
728x90
반응형
LIST
'VsCode(HTML)' 카테고리의 다른 글
| 애니메이션관련 HTML (0) | 2023.05.17 |
|---|---|
| 트랜지션관련스타일 HTML (0) | 2023.05.14 |
| 레이아웃스타일 HTML (1) | 2023.05.14 |
| 배경관련스타일 HTML (0) | 2023.05.13 |
| 테두리관련스타일 HTML (0) | 2023.05.13 |