BootStrap을 활용한 navbar에서 menu 글자 위치 조정하기(중앙, 우측 정렬)

 

프로젝트를 하면서 계속 거슬렸던 1가지... navbar 정렬이었다😂

흔히 말해 메뉴를 나타내는 빨간색 범위는 navbar의 중앙에 정렬하고 싶었고,

로그인과 관련된 노란색 범위는 가장 오른쪽으로 정렬하여 배치하고 싶었다.

 

우선 navbar의 자바스크립트 코드는 bootStrap 코드를 그대로 가져와 활용한 것이기 때문에

mx-, my- 를 이용해 간격 정도만 조절하는 정도로 사용을 한 것이었다.

 

JAVA에서 기능을 구현하고 화면에서 확인하는 내내 계속 수정하고싶은 부분 중 하나였는데,

CSS는 마지막에 다 정리를 하자고 다짐했건만 애매한 시간이 조금 남은 찰나에 해결을 해보았다!

 

생각보다 해결 방법은 굉장히 간단했다.

로그인과 관련된 노란색 범위의 ul에는 class에 ml-auto 속성을 더해주었고,

 

<style>
	.navbar-nav {
		align-items: center;
		display: flex;
		margin: 0 auto;
    		flex-direction: row;
    		justify-content: center;
	}
</style>

메뉴를 나타내는 빨간색 범위에는 style 태그에 해당 코드를 적용해주었다.

 

CSS를 조금 더 자세하게 공부하면 화면도 훨씬 예쁘게 구현할 수 있을 것 같지만

우선은 JAVA와 SPRING을 좀 더 공부한 다음 병행해서 공부하면 좋을 것 같다🥰