[css] 앞뒤로 내보내기 (배치 순서 결정)

사건의 발단

웹을 이것저것 만들어놓고 배포하고 보니 웹에서 보는거랑 폰에서 보는거랑 ui가 조금씩 틀리고 다르게 보이더라..

문제는 여기에 있었는데..

문제 1

로고가 보여야 하는데 안 보인다.

문제 2

transform 에 translate 를 먹여 위아래 공백 조절을 잘해서 컨트롤하면 좋겠지만
.. 웹에서는 이쁘게 출력되는 애들이 폰에서는 띄어쓰기 간격이 이상하게 보이는 경우가 있더라

= 예상한 것처럼 구현이 안되고 기기에 따라 디자인이 틀려버림 = 제어 불가
( 사이드바 height 간격도 폰이랑 웹이랑 다르게 보이더라 )

그래서

최대한 변수가 없게 만들어야 한다 !
1. 사이드바 아래 간격을 최대한 많이 두고 (자연스러운 선에서)
2. 적당하게 아래 간격을 띄운 다음
3. 사이드바를 푸터 바 보다 뒤로 보내기를 해버리면 티가 안나지 않을까

해결 방법

css 에는 앞뒤로 내보내기 할 수 있는 기능이 있다.

z-index

참고1) z-index 사용시에는 꼭 position에 relative, absolute, fixed와 같은 값이 지정되어 있어야 함.
참고2) 값 지정은 양수, 음수 모두 가능함
참고3) 지정하지 않을 시 기본 값은 0

얘는 ppt에 사진이나 도형 첨부 시 앞으로 보내기, 뒤로 보내기 기능과 같다고 생각하면 된다.

나는 내가 먹이고 싶은 부분 빼고 모두 z-index 값을 넣어놓지 않아서..
뒤로 보내기를 하기 위해

z-index : -1;

을 지정해주었다.

그러면 로고가 이렇게 이쁘게 보인다.

앞에서 말한 방법을 모두 먹여둔 상태여서 폰에서도 이쁘게 잘 보이더라 ~
완성 !

---

해결 완료