상단바 오른쪽으로 치우칠때(스타일 속성 공부)

left , top , right, bottom 이라는 스타일 속성을 본적이 있다 솔직히 짚고 넘어가보진 않았는데 이번에 top 바를 고정시키다가 기능을 공부하게 되었다

 

left : 왼쪽에서 얼마나 떨어졌는지

right : 오른쪽에서 얼마나 떨어졌는지

top : 위쪽에서 얼마나 떨어졌는지

bottom : 아래쪽에서 얼마나 떨어졌는지 

 

또한 이런 스타일 속성을 사용할때는 position 도 함께 써줘야한다고함

(ex: position : fixed, right : 0px) 

값 설명 및 특징 left, top 등 위치 속성 기준점

relative	- 기본 위치에서 상대적으로 이동 - 원래 자리에서 left, top 값만큼 이동 - 공간은 원래 자리 그대로 유지됨	자기 자신의 원래 위치
absolute	- 가장 가까운 position: relative 조상을 기준으로 위치 결정 - 위치 지정이 되어 있는 부모 요소가 없으면 문서 최상단 기준 - 문서 흐름에서 완전 분리됨	가장 가까운 position: relative (또는 absolute, fixed) 조상 요소
fixed	- 뷰포트(브라우저 화면)를 기준으로 고정 - 스크롤해도 위치 변하지 않음 - 문서 흐름에서 분리됨	브라우저 화면 좌측 상단 기준
sticky	- 스크롤 위치에 따라 relative와 fixed 사이 동작 - 지정한 위치까지는 문서 흐름대로 움직이다가 그 이후 고정	보통 자기 위치 기준이지만 스크롤 상황에 따라 뷰포트 기준도 됨

 

 

---

프로젝트 작업중인데 이렇게 계속 오른쪽으로 치우쳐져 있다.

justify-contend-end 를써봤지만 Topbar 오른쪽 글씨부분들이 왼쪽으로 붙어버린다..

결국 적용된 css를 찾아봤다

.app-topstrip {
  
  position: fixed;
  top: 0;
  z-index: 12;
}

이렇게 되있었는데 chatgpt 에게 물어보니 postion :fixed, top:0 조합은 브라우저 상단에 고정시키는 것이라고 한다

z- index는 숫자가 커지면 커질수록 다른 요소들보다 앞으로 보인다고 한다 근데 솔직히 이건 잘 와닿지가 않았다.

어쨋든 해결을 위해 찾아본결과 left : 100px를 써줬다

오.. 왼쪽으로 붙는다  left : 0px 로 수정해주니

 

잘 붙었다..! 

근데 이렇게 보이는것만 해결하면 되는것인지 모르겠다.. 일단 계속 해보자

---

++ 추가로 사이드바와 분리시킬때는 사이드 바 px 만큼 떨어뜨리면 된다