css) ul > li > a 구조 flex, grow, flex-grow 이용한 로그인바 링크 배치

 

홈피 상단 로그인바 html 구조와 css배치가 다를 때

1. grow로 순서를 잡고 

2. flex-grow로 간격을 px나 margin이 아닌 auto나 flex-grow 등 가변적 수치로 조절하는 것이 좋다.

 

[ html ] 구조

  

    <!-- 로그인 바 -->

    <ul class="login-bar">

      <li><a href="/">로그인</a></li>

      <li><a href="/">회원가입</a></li>

      <li><a href="/">고객센터</a></li>

      <li><a href="/">즐겨찾기</a></li>

      <li><a href="/">쇼핑나들이</a></li>

    </ul>

 

 

 

먼저 li > a를 감싸고 있는 login-bar클래스의 ul을 display: flex로 배치했다.

 

 

 

순서를  order 를 사용해 

[로그인 > 회원가입 > 고객센터 > 즐겨찾기 > 쇼핑나들이 ]를  [1, 2, 3, 4, 5]가 아닌

[ 즐겨찾기 > 쇼핑나들이 > 로그인 > 회원가입 > 고객센터 ]를  [4, 5, 1, 2, 3]로 변경했다.

 

 

 

다음, [ 즐겨찾기, 쇼핑나들이 ]  / [ 로그인 > 회원가입 > 고객센터 ] 이렇게 두 덩어리로 띄우는걸

flex-grow를 사용했다.

 

아래는 최종 css 코드와 최종 이미지이다.

 

[ css ]

 

/* 로그인 바 */

.login-bar {

  padding: 0.5rem 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 3.6rem;

  font-size: 12px;

  background: var(--color-yellow-100);

}

.login-bar li:nth-of-type(1),

 .login-bar li:nth-of-type(4) {

  padding: 0.5rem 0.8rem;

  flex-grow: 1;

}

.login-bar li:nth-of-type(2),

.login-bar li:nth-of-type(3),

.login-bar li:nth-of-type(5) {

  padding: 0.5rem 0.8rem 0.5rem 0;

  flex-grow: 1;

}

.login-bar li:nth-of-type(1) {

  order: 3;

}

.login-bar li:nth-of-type(2) {

  order: 4;

}

.login-bar li:nth-of-type(3) {

  order: 5;

}

.login-bar li:nth-of-type(4) {

  order: 1;

}

.login-bar li:nth-of-type(5) {

  order: 2;

  flex-grow: 70;

}

 

flex-grow를 사용하기 전에는 margin-right: 71.8rem; 이렇게 사용했다.

px로 고정한게 아니니 그나마 가변적이라고 생각했는데 flex-grow라는 방법이 있었다.

 

 

 

 

참고

나