HTML/CSS Position태그 개념정리

 

 

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

위 코드는 최상위 클래스가 position:absolute    그 아래 parent클래스가 relative    item2가 absolute가 걸린 상태이다.

이렇게 되면 최상위 클래스는 고정된 상태에서 parent클래스는 최상위 클래스에 들어있는 상태로 기본값이니

딱히 변화는 없다. 그저 relative상태에서 margin-top을 주면 현재 위치에서 margin값만클 간격을 뛰울것이다.

 

정리가 필요한 태그만 모아보자면

padding : 박스의 사이즈를 키우는데 안쪽에 원래사이즈의 투명한 박스가 있고 padding값만큼 넓어지는 느낌이다.

 

margin : 상위클래스가 absolute고 종속상태인 클래스가 relative이면 현재 위치에서 margin값만큼 뛰운다.

만약 absolute-absolute 의 상태이면 상위클래스를 기준으로 간격을 뛰운다. 당연히 relative - absolute 라도 relative의 

위치를 기준으로 간격을 뛰운다.

 

display : flex를 가장 많이 쓰는데 flex는 가로로 배치하는거라 세로로 배치하고 싶을때는 display:flex를 걸어주고

flex-direction : column을 걸어주면 (당연히 상위클래스에) 세로로 배치된다.

 

justify-content : 일단 상위클래스에 display:flex를 걸어줘야 적용시킬수 있다. 이 태그를 사용하면 하위클래스(items)의

간격 혹은 위치를 나열할수 있다. 만약 박스안에 있는 글자를 중앙으로 배치하고 싶다면 

display :flex를 상위클래스에(글자가 들어있는 박스) 걸어주고 justify-content :center를 하면 내부에 있는 글자가

중앙으로 이동할 것 이다. 

 

그러니 만약 홈페이지를 만든다면 먼저 최상위 클래스를 만들고 그 클래스는 absolute나fixed를 걸어준 다음

쉽게 정리할수 있게 큰 파티션을 만든 후 하위 파티션(header,top,center,bottom등)으로 나눈다음 

큰 파티션에 아까 쓴 flex-direction으로 세로로 배치한 다음 각각의 하위 파티션의 간격을 margin-top으로 

맞춰주면 서로 상속되어 있으니 브라우저의 크기와 상관없이 묶여있을것이다.

 

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

위 코드는 parent가 relative  items도 relative이다.

위 경우에는 flex-direction으로 세로배치를 해놨기때문에 items의 기본위치를 기준으로 이동할 것이다.

 

정리하자면

absolute - relative 이면 absolute는 고정이고 relative는 상대적이기 때문에 하위클래스는 현재위치를 기준으로 움직인다

relative - absolute 이면 relative로 움직이면 absolute는 상위클래스가 움직여도 그 상위클래스의 벽을 기준으로 움직인다

absolute - absolute 이면 둘다 고정이기에 상위클래스는 최상위 클래스를 기준으로 움직이고 하위클래스는 상위클래스를 기준으로 움직인다.

relative - relative 이면 둘 다 따로 움직일것이다.

만약 상위클래스에 position이 없고 하위에 absolute가 걸려있으면 최상위클래스를 기준으로 움직인다.

 

이번에는 최근 jsp를 공부하면서 HTML에 대한 이해가 너무 없었던것 같아서 다시 공부후 정리해보았다.