[html/css] 위치 속성 position의 개념과 활용

위치를 지정하는 속성 position

 

Position은 위치를 지정할 때 사용하는 위치 속성이다. 위치 속성에는 절대 좌표와 상대 좌표라는 개념이 있다.

절대 좌표는 부모태그 혹은 브라우저의 0점을 기준으로 움직이는 좌표를 말하고

상대 좌표는 본인의 태그가 출력되어있는 위치를 기준으로 움직이는 좌표를 말한다.        

 [속성값]
1. 선택자{position: static;}
     :기본값으로 기존 태그가 출력된 모습 그대로를 말한다. position 속성을 적용하지 않은 것과 같다.
     block 속성의 경우, 태그가 위에서 아래로 출력된 기본 상태를 의미한다.
     부모박스에 static 상태가 적용되어 있으면,
     자식박스는 부모박스의 좌표를 인식하지 못하고 더 상위 요소를 찾아간다.
   
2. 선택자{position: absolute;}
    : 절대 좌표로, 브라우저 혹은 부모박스의 좌측 상단을 기준으로 top, left, right, bottom 방향으로 이동할 수 있다. 
    부모박스가 relative가 적용되어 있는 경우 자식박스는 부모박스의 0점을 기준으로 좌표를 지정 하고,
    그렇지 않은 경우 브라우저의 0점을 기준으로 이동한다.
 
3. 선택자{position: relative;}
    : 상대 좌표로, block 속성의 태그가 출력된 현재 위치에서 left나 top으로 값을 줄 수 있다.
    부모박스에 보통 많이 적용하는데 이유는 부모박스에 position이 적용되어있지 않으면,
    자식박스를 absolute로 움직일 때 자식박스의 기준점이 상위의 태그 혹은 브라우저로 적용되기 때문이다.
     
4. 선택자{position: fixed;}
    : 절대 좌표로, 브라우저 화면을 기준으로 top, left, right, bottom 방향으로 값을 줄 수 있다.
    브라우저를 움직여도 지정해놓은 좌표의 위치에 그대로 고정된다는 것이 특징이다.

우측의 고양이를 기억해주세요.--------------------------------> 

 

position을 적용하려면 반드시 좌표를 함께 입력해주어야 한다.

각각의 좌표는 아래와 같이 사용한다    

1. Left : 상위 선택자의 0점을 기준으로 우측으로 이동하는 것은 양수,  좌측으로 이동하는것은 음수로 입력한다.

2. right : 상위 선택자의 0점을 기준으로 좌측으로 이동하는 것은 양수,  우측으로 이동하는것은 음수로 입력한다.

3. top : 상위 선택자의 0점을 기준으로 하단으로 이동하는 것은 양수,  상단으로 이동하는것은 음수로 입력한다.

3. bottom : 상위 선택자의 0점을 기준으로 상단으로 이동하는 것은 양수,  하단으로 이동하는것은 음수로 입력한다.

 

예시로 하늘색 배경에 다양한 고양이 일러스트를 넣어보겠다.

background-image

bookcat(좌) boxcat01(우)

plantcat(좌) boxcat02(우)

 

각각의 고양이들을 div 박스에 이미지로 넣고, parents01이라는 부모박스로 묶어 주었다. 

/* 부모박스에 들어간 고양이 4마리 */
<div class="parents01">
    <div class="bookcat">
        <img src="(이미지주소)" alt="bookcat" />
    </div>
    <div class="boxcat01">
        <img src="(이미지주소)" alt="boxcat01" />
    </div>
    <div class="plantcat">
        <img src="(이미지주소)" alt="plantcat" />
    </div>
    <div class="boxcat02">
        <img src="(이미지주소)" alt="boxcat02" />
    </div>
</div>

/* 브라우저에 넣은 고양이 1마리*/
<img src="(이미지주소)" width="100px" height="100px" class="boxcat03"/>

 

그리고 부모박스에 background-image로 하늘색 배경을 넣고,

부모박스와 자식박스에 아래와 같이 position 값을 주었다.

/* 부모박스에 넣은 고양이 4마리 */
.parents01{
	width: 930px;
	height : 650px;
	background-image: url(이미지주소);
	background-size: 100%;
	position: relative;
	display : flex;
	}
      
.parents01 img{
	width: 200px;
	height: 200px;
	}
      
.bookcat {
	position: relative;
	top: 0px;
	left: 0px;
	}
    
.boxcat01 {
	position: absolute;
	top: 350px;
	left: 600px;
	}

.plantcat {
	position: absolute;
	right: 0;
	bottom: 0;
	}
    
.boxcat02 {
	position: fixed;
	right: 0;
	bottom: 0;
	}
    
    
/* 브라우저에 넣은 고양이 1마리 */
.boxcat03 {
	width:200px;
	height:200px;
	position: absolute;
	right:0;
	bottom:0;
}

 

부모박스인 parents01에 position:relative가 적용되어있기 때문에 position:relative와 absolute를 적용한 자식박스들의 0점이 모두 parents01의 0점에 적용된 것을 볼 수있다.

 

boxcat02 같은 경우는 fixed를 줬기 때문에 부모박스에 들어있는 자식박스에 임에도 불구하고,

브라우저를 기준으로 고정된 모습을 볼 수 있다.

** 이 홈페이지에서는 티스토리 브라우저를 기준으로 우측 하단에 고정되어 있다. 

 

boxca03은 부모박스로 감싸지 않고 브라우저에 넣은 상태에서 position:absolute를 준 모습이다. 

이때, 조금 재밌는 모양을 볼 수있는데,

화면 크기를 늘리고 줄이는 것에 따라 위치와 크기가 변하고, 스크롤을 움직이면 그 위치에 고정된다는 것이다.

** 이 홈페이지에서는 브라우저 가장 상단의 '우측의 고양이를 기억해주세요-->' 부분을 보면 확인할 수 있다.