11_레이아웃 관련 스타일2

kojam9041·2022년 4월 19일
0

KH정보교육원 - CSS

목록 보기
10/11

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>
profile
kojam9041
이전 포스트

10_레이아웃 관련 스타일1

다음 포스트

12_화면 통합

0개의 댓글

관련 채용 정보