absolute position의 사용 - HTML/CSS

 

absolute position

CSS의 포지션 속성은 다양한 변형이

있어서 한번에 모든 것을 이해하기는

조금 어렵습니다. 포지션은 설명도

중요하지만 실제 CSS를 가지고 놀면서

(play around) 체감적으로 깨닫는 부분이

많기 때문에 에디터로 직접 해보는 방법이

좋습니다. 개발환경을 셋팅하지 않아도

코드펜 등의 온라인 에디터로

똑같이 실습이 가능합니다.

 

코드팬(codepen)을 활용한 프론트엔드 웹개발 학습 (HTML/CSS)

 

포지션의 기본 값 static

 

포지션 시스템을 이해하는 방법은

여러가지가 있는데, 여기서는 기본값부터

설명을 시작해 보겠습니다.

 

아래는 div 로 박스를

만들어 놓은 모습입니다.

 

HTML상에서는 parent와 child 관계가

분명하게 보입니다. 이것은 parent와

child 둘다 position: static에 있는 상황입니다.

명시하지 않아도 기본값으로 적용합니다.

 

<div class="parent">
  <div class="child"></div>
</div>

CSS는 아래와 같습니다.

이후로는 중복되는 부분은 제외하고

변경하는 부분만 표시합니다.

body {
    margin: 0;
}

.parent {
    background-color: #FFD9F9;
    width: 300px;
    height: 300px;
    right: 0;
}

.child {
    background-color: red;
    width: 70px;
    height: 70px;
}

 

여기서 child에 위치 변경 속성을 넣습니다.

 

결과는 차이가 없습니다.

 

    bottom: 0;
    right: 0;

 

하지만 앱솔루트(절대적인) 좌표를

설정하면 중요한 변화가 일어납니다.

position: absolute;

 

분홍박스는 분명 HTML에서 포함관계였는데

벗어나서 브라우저의 좌표로 바뀝니다.

마진을 변경해보면 body에서도 컨트롤이

안되고 그냥 브라우저 기준으로 절대 좌표입니다.

현재 부모는 static 입니다.

 

 

절대좌표로 사용할 수도 있겠지만

보통은 parent 에 child를 넣어서

관리하는게 논리적이고 관리가 쉽습니다.

반응형 레이아웃에 있어서는

블록들이 서로서로 따라서

움직이기 때문에 더 중요합니다.

 

부모의 position에 relative(상대적인)를

넣어줍니다. 박스가 핑크색 안으로 들어옵니다.

 

position: relative;

relative가 의미하는 것은 이제부터

내 아래에 있는 자식들은 상대적으로

적용해라는 뜻입니다. absolute는

전체 브라우저가 아니라 relative의 좌표에

편입이 된 것입니다. 좀 와닿는 비유를 하면

우리가 집안에 있을 때의 상대 위치와

바깥에 나갔을 때의 위치를 생각하면 됩니다.

집안도 동서남북이 다 있고 바깥에도 있습니다.

바깥은 크기 때문에 자기가 사는 동네기준으로

상대좌표를 계산할 수 있습니다.

 

방안에서의 서쪽끝과 동네의 서쪽끝은 다르지만

좌표는 left: 0; 이란 표기로도 가능합니다.

- 혹은 문법을 만든다면? west: 0; (?) -

상대 위치가 어딘지만 알면되는거지요.

absolute 가 절대위치라고 하지만 그건

브라우저라는 틀안의 상대위치이기도 합니다.

이런식으로 좌표는 까고까는 양파처럼

나오는 특징이 있습니다. 초보자들이

position을 이해하기 어려운 것은

마진이나 패딩처럼 직관적인 속성이

아니기 때문입니다. 머리를 굴려서

어떤것이 상대 지점인지 보면 이해할 수 있습니다.

 

position 기본값에서 부터

이해하는 것은 괜찮은 방법입니다.

 

*body는 예외방식으로 동작하며

일반적으로 body의 position 속성을

지정할 필요는 없습니다.

(body안에 있는 모든 것들은 이동할 수 있고

body를 벗어난 기준은 없다 - 화면에 안보이는

좌표로 보낼 수는 있어도)

 

parent에게 absolute를 적용하면

마찬가지로 body에 대하여 정렬합니다.

 

parent가 absolute면 child는 parent가

relative 때 처럼 parent를 절대좌표로 사용합니다.

 

설명이 복잡한데 그래서 이걸 직접 해봐야

알 수 있습니다. absolute는 자기의 부모를

기준으로 하니까 어떤 포함관계를 사용한

레이아웃으로 디자인할지는 넣다뺏다 하면서

만들어 보면 알 수 있습니다.

프론트엔드는 이론적 설명도 중요하지만

직접 하면서 이해가는 부분이 많습니다.

블록쌓기 놀이라고 생각하면 어렵지 않습니다.

 

MDN을 체크하는게 좀 빡세긴 하지만

가장 정석이긴 합니다.

 

position - CSS: Cascading Style Sheets | MDN (mozilla.org)

position - CSS: Cascading Style Sheets | MDN

위치잡기 - Web 개발 학습하기 | MDN (mozilla.org)

위치잡기 - Web 개발 학습하기 | MDN

 

z-index는 z축의 인덱스로 앞뒤 순서를

바꿀 수 있습니다. 3차원 느낌이 좀 납니다.

포지션의 응용 방법은 반응형 웹페이지와

조합해서 다양하게 나옵니다.

 

See the Pen Untitled by jayonk (@jayonk) on CodePen.

 

 

HTTP/CSS | 그리드(grid) 레이아웃을 사용한 반응형 레이아웃 예시

HTTP/CSS | 그리드(grid) 레이아웃을 사용한 반응형 레이아웃 예시