메뉴라인 정렬에대한 문제

footer 메뉴에 하나 더 추가해달라그랬는데 라인정렬이 바르지 못한걸 알 수 있다. 확인해보니 그지같은 float 때문이였다.

내가 생각했던 방법은 

1. footer를 감싸는 전체 박스에 flex후에 저기 리스트만 flex, flex-wrap을해서 정렬을 맞추는 방법

문제점 : 문장이 길면 짧은제목들은 공백이 많이 생긴다는 단점이 있었다.

2. 각각 한문단씩 나눠서 두개의 메뉴로 구성해서 각각 추가할 수 있도록 만드는 방법

문제점 : 큰제목이 없어서 left right로 나눠서 서브로 메뉴들이 들어가게해볼까 생각도 했는데 많은 일을 해야할거같았다.

결론 : 사수의 도움을 받다.

    var lis = $(".js-menu-list > li");
    	
    for(var i = 0; i < lis.length; i+=5) {
      lis.slice(i, i+5).wrapAll("<ul></li>");
    }
    $(".js-menu-list > ul").unwrap();

 

한줄씩 뜯어서 이해해보기로 하자..

    var lis = $(".js-menu-list > li");
변수지정 후 (js-menu-list는 ul 클래스명)    

    for(var i = 0; i < lis.length; i+=5) {
루프로 묶는데 i = 0이고 이것도바 lis.길이가크면; 5를 i 더하고 넣어라.

     lis.slice(i, i+5).wrapAll("<ul></li>");
    }

5개씩 나눈다음 wrapAll 선택한 요소 모두를 새로운 태그에 넣어랑
리스트는 나눠라(
    $(".js-menu-list > ul").unwrap();

리스트의 ul의 상위태그 제거해랑  unwrap선택한 요소의 상위 태그를 제거

 

사실 여전히 이해는 안되는데 나중에 도움될까봐