14. 레이아웃 (위치)

 

 

1. 절대 / 상대 위치

- 절대 위치 : 레이아웃 배치시 절대 위치(x,y)에 고정 시켜서 배치하는 방법
- 상대 위치 : 다른 레이아웃 기준으로 상대적은 위치를 정하여 배치하는 방법

* absolute : 부모(조상)요소를 기준으로 배치
* relative : 요소 자기자신을 기준으로 배치

    <style>
        .base {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            background-color: deeppink;
        }
        
        .absolute_layout1 {
            position: absolute;
            top: 50px;
            left: 100px;
        }
        
        .absolute_layout2 {
            position: absolute;
            top: 150px;
            left: 200px;
        }
        
        .relative_layout1 {
            position: relative;
            top: 100px;
        }
        
        .outter {
            height: 350px;
            border: 1px solid black;
            position: relative;
        }
    </style>
    <div class="outter">
        <div class="base absolute_layout1">절대 위치 1</div>
        <div class="base absolute_layout2">절대 위치 2</div>
        <div class="base relative_layout1">상대 위치 1</div>
        <div class="base relative_layout1">상대 위치 2</div>

절대 위치 1

절대 위치 2

상대 위치 1

상대 위치 2

 - 디자인 계열 : margin padding을 통해서 위치를 지정하는 것이 일반적
 - 엔지니어(개발자) : 절대/상대 기준으로 코딩을 하는 것도 익숙함

 

2. 고정위치(fixed)

 - 드래그가 필요한 긴 웹페이지에서 아래로 드래그가 되어도 컨텐츠가 고정 되는 속성

    <style>
        .fixed_area {
            width: 50px;
            height: 50px;
            background-color: deepskyblue;
            border: 1px solid black;
            position: fixed;
        }
        
        .fixed_area2 {
            width: 100px;
            height: 100px;
            background-color: deepskyblue;
            border: 1px solid black;
            position: fixed;
            top: 200px;
            left: 100px;
        }
    </style>
    <div class="fixed_area"> 고정위치1, 안보임 : 위치가 지정되지 않으면 무효! </div>
    <div class="fixed_area2"> 고정위치2 </div>

고정위치1, 안보임 : 위치가 지정되지 않으면 무효!

고정위치2

 

3. Visibility 속성

 - 페이지에 특정 객체를 보이거나 보이지 않게하는 속성
 - 만일 보이지 않더라도 공간을 차지하는 옵션이 존재함
 - 또한 보이지 않은 경우, 버튼이면 이벤트가 발생하지 않는다.

    <style>
        .visible {
            width: 100px;
            height: 100px;
            border: black solid 1px;
            background-color: blanchedalmond;
            visibility: visible;
        }
        
        .visible_hidden {
            width: 100px;
            height: 100px;
            border: black solid 1px;
            background-color: blanchedalmond;
            visibility: hidden;
        }
    </style>
    <div class="visible">보이는 영역1</div>
    <div class="visible_hidden" onclick="alert('test');">보이지 않는 영역</div>
    <div class="visible">보이는 영역2</div>

보이는 영역1

보이지 않는 영역

보이는 영역2

 

4. z-index

 - 레이아웃간 보이는 우선순위를 설정하는 값(z값이라 불림)
 - 값이 클수록 우선순위가 높아져 페이지 앞으로 보임

    <style>
        .outter {
            border: 1px solid black;
            position: relative;
            height: 600px;
        }
        
        .base2 {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        
        .z_test1 {
            z-index: 1000;
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: yellow;
        }
        
        .z_test2 {
            z-index: 700;
            position: absolute;
            top: 100px;
            left: 100px;
            background-color: red;
        }
        
        .z_test3 {
            z-index: 300;
            position: absolute;
            top: 150px;
            left: 150px;
            background-color: blue;
        }
        
        .z_test4 {
            z-index: 100;
            position: absolute;
            top: 200px;
            left: 200px;
            background-color: green;
        }
    </style>
    <div class="outter" style="position: relative;">
        <div class="base2 z_test1">영역1</div>
        <div class="base2 z_test2">영역2</div>
        <div class="base2 z_test3">영역3</div>
        <div class="base2 z_test4">영역4</div>

영역1

영역2

영역3

영역4

 

 

5. float 속성

 - 페이지내의 요소간의 정렬 기준을 오른쪽/왼쪽으로 지정하는 방법

none (기본값) : 정렬하지 않는다.
left : 왼쪽으로 정렬한다.
right: 오른쪽으로 정렬한다.

    <style>
        .float_bass {
            border: 1px solid black;
        }
        
        .float_test1 {
            float: left;
        }
        
        .float_test2 {
            float: right;
        }
        
        .float_test3 {
            float: both;
        }
    </style>

    <div>
        <div class="float_bass float_test1">float영역1-left</div>
        <div class="float_bass float_test1">float영역2-left</div>
        <div class="float_bass float_test3">float영역5-both</div>

        <div class="float_bass float_test2">float영역3-right</div>
        <div class="float_bass float_test2">float영역4-right</div>
        <div class="float_bass float_test3">float영역6-both</div>
    </div>

 

float영역1-left

float영역2-left

float영역5-both

float영역3-right

float영역4-right

float영역6-both

 

실무적으로 위치 잡는 방법

- padding이나 margin 값을 +/-로 조절하여 위치를 조정

    <style>
        .test1 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: bisque;
        }
        
        .test2 {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: aquamarine;
            margin-top: -100px;
            margin-left: 50px;
        }
    </style>
    <div>
        <div class="test1">test1</div>
        <div class="test2">test2</div>
        <div class="test1">test1</div>
    </div>

test1

test2

test1

---

"본 인터넷 사이트 내의 모든 이미지, 문구, 콘텐츠, 내용 등에 대한 저작권은 76beny에게 있습니다.

이를 무단으로 도용, 복사, 전재, 재배포, 2차 변형 등을 할 경우

민, 형사상 법적 조치 등 저작권법에 의거하여 처벌 받을 수 있습니다."