position포지션 영역 알아보기

포지션 속성은 크게 4가지로 나눌 수 있다

기본적으로 position: 주고 싶은 속성 / 이런식으로 작성하며 직접 코드를 작성하며 배워보자

 

숫자를 이름 맨앞에 붙이면 적용이안되니 되도록이면 뒤에 붙이자

position: relative; 는 상대적으로 레이아웃의 위치를 변경 시킬 수 있다

예를 들어서 레프트와 탑에 12px 씩 값을 줬다면 왼쪽 위쪽에서 왼쪽 구석지를 기준으로 각각 12px씩 움직이게 된다

 

position: absolute; 로 지정해준 순간 두 번째 세번째 요소는 1번에 해당하는 영역이 사라져 버린다고 보면 쉽다

부모가 가로막는게 아니라면 뭐가 있든간에 포지션이 주어진 값대로 이동한다

다른영역과의 유기성이 사라지며 별도의 개체가 된다고 보면 편할듯하다

 

position: fixed; 은 앱솔루트와 비슷하지만 여러문서가 생기면서 길이가 길어져 스크롤이 생기면 차이점을 알 수 있다

스크롤을 내리면 앱솔루트가 주어진 것은 점점 가려지지만 fixed가 주어진 개체는 스크롤과 함께 움직인다

 

absolute나 픽스를 입력해주면 이를 감싼 부모영역에 어떤 값을 주더라도 고정된 위치에 자리잡게 된다

 

부모영역과 같이 움직이길 바란다면 이값을 relative로 바꿔주거나 혹은

부모 자체에 속성을 주어서 변경시킬 수 있는데 부모 에 position: relative를 주면

부모의 영역 안에서 값이 주어진 것을 볼 수 있다

그러나 fixed 값은 예외로 부모에 어떤 값이 주어지든 처음 입력한 위치로 고정이된다

스크롤을 내리던 어떤 값을 주든 처음 입력된 값이 화면에 나타나게 되있다

 

부모안에서 릴레이티브를 주고 작업을 하는게 왜 중요하냐면 박스안에서

여러 스티커 혹은 버튼 등을 디자인 하고 싶다면 안에서 편하게 위치를 보면서 작업할 수 있기 때문이다

사실 필수적인 요소라고 볼 수 있다

 

그렇다면 이제 포지션을 직접 웹사이트에 적용해보자

 

원을 겹치게 만들어야 한다 왼쪽부터

일단 부모인 circle wrap에 포지션 릴레이티브를 줘서 부모 영역안에서 움직이게 해주고

첫번째 원은 이동이 필요없으므로 0 두번째는 레프트 100 세번째는 레프트 200을 입력해주면

원하는 겹치는 모양이 표현된다

 

그리고 body태그에 overflow-x: hidden을 줌으로써 가로 스크롤을 지우고 세로 스크롤만

보여주게 하는 디자인을 완성시킬 수 있다

 

점점 원리와 개념을 하나씩 배우면서 웹 디자인의 기초가 생기는 것 같은 기분이든다

이 기분 하루하루 꾸준히 더욱 키워보자 :)