2020-10-15
이름에서도 느껴지듯이 포지션은 태그 및 각종 선택자들의 위치를 자유롭게 움직일 수 있는 기능을 수행하는 역할을 뿐 아니라 웹페이지의 디자인 적인 부분에서도 중요한 역할을 수행한다.
그러면 구체적인 사용방법을 알아보도록 하자.
우선 기본적인 템플릿은 리스트를 사용하여 만들었다.
ul은 부모 선택자 될 거기 때문에 id를 parent / li는 자식 선택자가 될 거기 때문에, child로 선언해 주었다.
position의 가장 기본적인 속성인 relative 사용 코드 입니다.
<html>
<head>
<meta charset="UTF-8">
<style>
body{border: 3px solid red;}
/*구별하기 쉽도록 바디에 테두리를 걸어 주었다. */
#parent{border: 3px solid red;
}
/*역시 구분하기 쉽도록 테두리 값을 부여함 */
#child{
position: relative;
/*relative 상대적이라는 말로 자신의 부모의 위치에 있는 선택자를 기준으로
이동하게 된다. */
left: 200px;
/*왼쪽에 200px만큼 공간을 주어 오른쪽으로 이동을 하겠다는 의미 */
top: 200px;
/*위쪽에 200px 만큼 공간을 주어 아랫쪽으로 이동을 하겠다는 의미 */
}
</style>
</head>
<body>
<ul id ="parent">
parent
<li id = "child">
child
</li>
</ul>
</body>
</html>
위의 코드와 주석에서 살펴볼 수 있듯이 자신의 부모를 기준으로 상대적으로 이동을 하게 만드는 코드입니다.
코드 실행시 웹사이트 화면의 구성은 아래와 같습니다.
추가적으로 아래와 같이 child의 부모 격인 ul(parent)에도 똑같은 코드를 입력한 결과를 살펴보도록 하자.
<html>
<head>
<meta charset="UTF-8">
<style>
body{border: 3px solid red;}
/*구별하기 쉽도록 바디에 테두리를 걸어 주었다. */
#parent{border: 3px solid red;
position: relative;
/*relative 상대적이라는 말로 자신의 부모의 위치에 있는 선택자를 기준으로
이동하게 된다. */
left: 200px;
/*왼쪽에 200px만큼 공간을 주어 오른쪽으로 이동을 하겠다는 의미 */
top: 200px;
/*위쪽에 200px 만큼 공간을 주어 아랫쪽으로 이동을 하겠다는 의미 */
}
/*역시 구분하기 쉽도록 테두리 값을 부여함 */
#child{
position: relative;
/*relative 상대적이라는 말로 자신의 부모의 위치에 있는 선택자를 기준으로
이동하게 된다. */
left: 200px;
/*왼쪽에 200px만큼 공간을 주어 오른쪽으로 이동을 하겠다는 의미 */
top: 200px;
/*위쪽에 200px 만큼 공간을 주어 아랫쪽으로 이동을 하겠다는 의미 */
}
</style>
</head>
<body>
<ul id ="parent">
parent
<li id = "child">
child
</li>
</ul>
</body>
</html>
이번에는 ul의 부모 태그인 <body>의 위치를 기준으로 하여 상대적으로 200px 씩 움직이는 것을 확인할 수 있다.
이처럼 position의 relative를 사용하기 위해서는 자신의 부모가 누구인지 정확히 체크하여 사용할 필요가 있다.
다음은 Absolute이다. 해당 단어의 사전적 풀이를 살펴보면 (순수한, 무조건의)라는 의미를 가지고 있다. CSS 상에서도 해당 의미를 어느 정도 가지고 가는데, 한 번 살펴보도록 하자.
<html>
<head>
<meta charset="UTF-8">
<style>
body{border: 3px solid red;}
/*구별하기 쉽도록 바디에 테두리를 걸어 주었다. */
#parent{border: 3px solid red;
}
/*역시 구분하기 쉽도록 테두리 값을 부여함 */
#child{border: 3px solid blue;
/*역시 구분하기 쉽도록 테두리 값을 파란색을 줌 */
position: absolute;
}
</style>
</head>
<body>
<ul id ="parent">
parent
<li id = "child">
child
</li>
</ul>
</body>
</html>우선 선언은 기존 relative 위치에 absolute라고 바꿔만 주면 쉽게 해당 속성을 사용할 수 있다 아래는 그 결과이다.
보는 것과 같이 아무 값도 주어지지 않았을때는 자신의 부모 태그 기준으로 원래 있어야 하는 위치에 있는 것을 확인할 수 있는데 여기에 relative처럼 위치 이동을 위한 값을 설정해 보자.
<html>
<head>
<meta charset="UTF-8">
<style>
body{border: 3px solid red;}
/*구별하기 쉽도록 바디에 테두리를 걸어 주었다. */
#parent{border: 3px solid red;
}
/*역시 구분하기 쉽도록 테두리 값을 부여함 */
#child{border: 3px solid blue;
/*역시 구분하기 쉽도록 테두리 값을 파란색을 줌 */
position: absolute;
left: 0px;
/*왼쪽에 200px만큼 공간을 주어 오른쪽으로 이동을 하겠다는 의미 */
top: 0px;
/*위쪽에 200px 만큼 공간을 주어 아랫쪽으로 이동을 하겠다는 의미 */
}
</style>
</head>
<body>
<ul id ="parent">
parent
<li id = "child">
child
</li>
</ul>
</body>
</html>left와 top의 값에 각 각 0을 주었다. 이전에 relative를 기준으로 생각해보면 각 위치변경의 값이 0일 경우에는 자신의 부모 위치와 같은 곳에 위치할 것이다. 다만 absoluted의 경우는 아래와 같이 값이 주어졌을 경우에는 가장 상위 태그인 <html> 기준으로 그 위치가 변경되는 것을 확인할 수 있다.
※ 단 자신의 부모 선택자 중 position의 default 값인 static이 아닌 다른 속성의 값이 들어가 있다면, <html>이 아닌 그 부모 선택자를 기준으로 position을 정하게 된다. 아래는 구체적인 예이다.
<html>
<head>
<meta charset="UTF-8">
<style>
body{border: 3px solid red;}
/*구별하기 쉽도록 바디에 테두리를 걸어 주었다. */
#parent{border: 3px solid red;
position: relative;
/*직속 부모 태그에 한 번 relative 값을 주어 보았다. */
}
/*역시 구분하기 쉽도록 테두리 값을 부여함 */
#child{border: 3px solid blue;
/*역시 구분하기 쉽도록 테두리 값을 파란색을 줌 */
position: absolute;
left: 0px;
/*왼쪽에 200px만큼 공간을 주어 오른쪽으로 이동을 하겠다는 의미 */
top: 0px;
/*위쪽에 200px 만큼 공간을 주어 아랫쪽으로 이동을 하겠다는 의미 */
}
</style>
</head>
<body>
<ul id ="parent">
parent
<li id = "child">
child
</li>
</ul>
</body>
</html>child의 제일 첫 번째 부모인 parent에게 position:relative 값을 주어서 child 위치 기준점이 <html>이 아니게 해 보았다.
그 결과 위와 같이 html이 아닌 자신의 부모 태그 기준으로 위치를 선정하게 되어 parent의 (0.0) 위치에 child라는 문자가 들어간 것을 확인할 수 있다.