11_레이아웃 관련 스타일2
position
절대위치와 상대위치, 고정을 수행함.
<style>
.outer{
border : 1px solid blue;
position : relative;
/*
기준이 되는 요소(outer)에 position : relative로 기준점을 주어서
절대적인 배치가 가능하게 하는 속성
만약, 기준점을 바로 위의 부모요소(div class="outer")에 지정하지 않는다면
자동으로 기준점이 body로 잡혀버림.
상단왼쪽이 기준이 됨.(0,0)
*/
}
.positioning{
border: 1px solid black;
}
#first{
width:300px;
height:300px;
background-color: yellow;
}
#second{
width:200px;
height:200px;
background-color: yellowgreen;
position : absolute;
/* 움직이고자 하는 요소 내에 position : absolute를 지정하여
position : relative를 잡은 곳을 기준으로 절대적인 위치로 움직일 수 있음. */
top : 50px;
left : 50px;
/* 부모요소(relative로 기준점을 잡은 요소)로부터 각각 위, 왼쪽으로 50px씩 옮김 */
}
#third{
width:100px;
height:100px;
background-color: red;
position : absolute;
top:100px;
left:100px;
}
.fixed-area{
width:100px;
height:100px;
background-color:red;
position:fixed;
/* 스크롤에 맞춰서 빨간상자가 내려가거나 올라감.*/
}
</style>
<body>
<h3>절대위치, 상대위치</h3>
<div class="outer">
<div id="first" class="positioning">첫번째 자식</div>
<div id="second" class="positioning">두번째 자식</div>
<div id="third" class="positioning">세번째 자식</div>
</div>
<h3>고정위치</h3>
<!-- 어제 배운 배경관련 스타일의 background-attachment : fixed;와 같은 이치 -->
<div class="positioning fixed-area"></div>
</body>
z-index
페이지 안의 요소들을 순서대로 위로 쌓음.
<style>
.z-test{
width:150px;
height:100px;
border:1px solid black;
position:absolute
/* (0,0)을 기준으로, 모두 겹쳐져서 보임 */
}
#z1{
background-color: yellow;
top:100px;
left:100px;
z-index: 10;
}
#z2{
background-color: green;
top:50px;
left:50px;
z-index:5;
}
#z3{
background-color: red;
z-index:1;
/* z축에 인덱스를 부여하여 입체적인 위치 기준으로, 숫자가 클수록 요소 중 위로 올라가게 됨. */
}
</style>
<body>
<div class="outer">
<div class="z-test" id="z1">요소1</div>
<div class="z-test" id="z2">요소2</div>
<div class="z-test" id="z3">요소3</div>
</div>
</body>
visibility
페이지에 특정 요소를 보이거나, 보이지 않게 하는 속성
<style>
.vis-test{
width:100px;
height:100px;
}
#vis{
visibility: hidden; /* 안보이기는 하나, 공간을 차지함. */
display:none; /* 보이지않고, 공간을 차지하지도 않음. */
}
</style>
<body>
<div class="vis-test" style="background-color:red;"></div>
<div class="vis-test" id="vis" style="background-color:green;"></div>
<div class="vis-test" style="background-color:yellow;"></div>
</body>
float
페이지 내의 요소들을 화면으로부터 띄워서 왼쪽 또는 오른쪽에 배치하는 속성
<style>
.float-test{
border:1px solid black;
width:70px;
height:30px;
float:right; /* 왼쪽에서부터 차례대로 나열 */
float:left; /* 오른쪽에서부터 차례대로 나열 */
}
</style>
<body>
<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>
<!-- float속성을 사용하게 되면, 그 이후에 적힌 요소들이
인라인 요소처럼 옆으로 붙기 때문에 속성을 해제해주어야 함.
즉, 틈이 없이 중첩되어서 요소가 배치하게 됨.-->
<br clear="both">
<!-- 이 요소를 붙여주면 float속성을 해제하여, hr이 다음줄에 붙게 됨. -->
<hr>
</body>
Author And Source
이 문제에 관하여(11_레이아웃 관련 스타일2), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kojam9041/11레이아웃-관련-스타일2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)