css position 입니다
html 코딩시 웹표준으로 div 태그를 이용해서 작업을 할 경우 css를 이용해서 오브젝트의 위치를 마음대로 조정할 수 있는데요 바로 css position을 사용하면 됩니다.
css에서 position 을 이용하면 크게 4가지로 나뉘어 지는데요 각 postion 별로 기능이 다르기 때문에 적절하게 사용해야 합니다.
이번 시간은 css position 사용 방법을 알아보겠습니다.
position 의 기능은 4가지로 분류 됩니다.
1) static : 정적인 기능으로 패딩값을 설정해도 움직이지 않고 그자리를 유지합니다.
2) relative : 상대적인 기능으로 위치 이동 시 처음 자리를 기준으로 합니다.
3) absolute : 절대적인 기능으로 위치 이동 시 브라우저 좌측 상단인 0,0을 기준으로 합니다.
4) fixed: 절대적인 기능으로 위치 이동 시 윈도우 좌측 상단인 0,0을 기준으로 합니다.
(absolute 과 기능이 같으나 스크롤이 이동되고 움직이지 않고 그자리에 위치하게 됩니다.)
css position 기능을 알아 보기 위해 기본 div태그를 준비했습니다.
브라우저로 보면 설정한 값이 없으니 뭐 크게 특별하지 않고 0,0 위치에 나오게 됩니다.
1) position : static
이제 <style>을 생성하고 static css 를 만들었습니다.
postion 은 static 로 주고 left, top 의 값을 넣었습니다.
위치 값을 넣었으나 아무런 변화가 없습니다.
2) position : relative
position 값을 static을 설정 후 위치값도 넣었습니다.
위치 방향은 left, right, bottom, top 이 있습니다.
원래 있던 위치에서 우측으로 180 px, 아래로 120px 이동되었습니다.
3) position : absolute
브라우저 좌측 상단을 기준으로 합니다.
position 을 absolute로 하고 위치값을 주었습니다.
브라우저 좌측 상단 0,0 기준으로 10px,10px 이 이동되었습니다.
4) position : fixed
position 을 fixed 로 넣었습니다. 3번 absolute 와 기능은 같으나 윈도우 기준 입니다.
스크롤이 이동되어도 위치는 변하지 않습니다.
위치는 윈도우 기준인 0,0 에서 입력된 값만큼 이동되었습니다.
이해를 쉽게 하기 위해 <br>태그를 입력해서 스크롤이 생기도록 해보겠습니다.
br 태그로 스크롤이 생겨서 1~ 3번 css 는 모두 아래로 이동되었지만
fixed 클래스가 적용된 4번째는 위치 변화가 없습니다.
오른쪽으로 스크롤을 해도 동일합니다.
이상 css position을 알아보았습니다.
