top, left, right, bottom

앞에서 position을 absolute,relative로 바꾸었을 때, 위치를 top, left, right, bottom로 바꿀 수 있다고 하였는데, 기본값은 auto이고 margin과 마찬가지로 width > left > right, height > top > bottom 순으로 적용된다.

만약 너비나 높이가 지정되어있지 않다면 top, left, right, bottom에 따라 자연스럽게 너비와 높이가 조절된다.

relative, transform

아래와 같은 4개의 사각형을 빨간색 틀안에 넣어 가운데로 옮긴다고 하면

div 사각형들의 position속성이 absolute이기 때문에 부모인 section을 relative로 만들어 div사각형들이 그 안에 들어가게한다. 그 후에 너비와 높이를 부모의 50%로 주어 가득차게 한다.

그리고 중앙정렬하는 방법은 3가지가 있는데
첫 번째는 마진값을 이용하는 것이다.

두 번째는 top과 left값을 사용하는 방법인데, 두 개 모두 화면 전체 넓이의 50%인 값을 주는데 그러기 위해서는 position값을 absolute로 변경해주어야한다. (relative는 유령화가 아니기 때문)
하지만 사각형의 중앙이 아닌 왼쪽 위 꼭짓점을 기준으로 움직이기 때문에 border 10px과 변의 반100px을 더한 값인 110px을 빼주어야한다.

마지막으로 세 번째는 transform의 translate속성을 이용하는 것이다.
이 속성은 자신을 기준으로 X축, Y축으로 이동하게 해준다.

transform: translateX(-50%) translateY(-50%)
transform: translate(-50%, -50%)
transform: translate(-110px, -110px)

이렇게 사용하면 된다.

멀티 메뉴 구현하기

메뉴에 커서를 가져다대면 그 메뉴에 해당하는 또 다른 메뉴가 나오는 메뉴를 구현해보자.
형식은 ul > li > ul > li를 취한다.