풀 다운 메뉴 만들기 - position

!목표 : 메인 메뉴에 하위메뉴가 있는 메뉴를 만들어 보자

position

• html 영역의 위치를 자유롭게 하는 속성
  • static : 기본값, 현 상태 그대로 유지
  • absolute : 유령화
    (포토샵에서 새로운 레이어를 생성하는 것과 같은 개념)
  • relative : 유령의 집
    (포토샵에서 대지와 같은 개념, 벗어날 수 없는 영역)

    • 추가로 알아두면 좋은 코드 :
      z-index는 화면 맨 위에 누가 올라올지 정해주며
      숫자가 높을수록 맨 위에 올라온다
    • 포토샵에서 레이어 위치를 이동시키는 기능과 같다

      입력방식 : z-index : 1;

transform

• 변형 가능한 것을 움직일 수 있다
  • scale : 몇 배만큼 커진다
  • translate'x or y' : x축, y축으로 이동

    • 인터넷 창이 커지든 작아지든 해당 비율에 맞게 커지고 작아지는 것이 필요할 때 사용

overflow

• 해당 영역의 글의 양이 넘치거나 줄었을 때 활용
  • hidden → 영역을 벗어난 부분은 숨긴다
  • auto: 자동 스크롤 생성
  • scroll: 글이 짧던 길던 무조건 스크롤
  • overflow-x,y : x, y 축의 글을 다룬다
  • none : 자른다

    • 추가로 알아두면 좋은 코드 :
      text-overflow : ellipsis; : 글이 넘쳤을 때 '…'이 나오게 한다

---

풀 다운 메뉴 만들기

1. html의 메뉴 아이템 만들기

<nav class="menu">
    <ul>
        <li>
            <a href="#">1차 메뉴 아이템 1</a>
            <ul>
                <li>
                    <a href="#">2차 메뉴 아이템 1</a>
                    <ul>
                        <li>
                            <a href="#">3차 메뉴 아이템 1</a>
                            <ul>
                                <li><a href="#">4차 메뉴 아이템 1</a></li>
                                <li><a href="#">4차 메뉴 아이템 2</a></li>
                                <li><a href="#">4차 메뉴 아이템 3</a> ...

• 코드가 점점 넘쳐나기 시작한다... 여기서 emmet코드의 중요성을 다시 한번 느낀다

  • emmet 코드 :

  nav.menu > ul > li*4 > a[href="#"]{1차 메뉴 아이템 $}
  +
  ul > li*4 > a[href="#"]{2차 메뉴 아이템 $}...
  +
  ul > li*4 > a[href="#"]{4차 메뉴 아이템 $}
  
  // '+'를 따로 적은 것은 보기 편하게 하기 위할 뿐
     띄어쓰기 없이 앞 뒤 코드를 붙여주어야한다

2. 시작 전 작업

• 위 이미지의 방대한 li들 중 1차 메뉴를 만들 때 번거로운 나머지는 가려주도록 하자

.menu > ul ul{
    display:none;
    position: absolute;
}

3. 1차 메뉴 커스텀

• Normalize 후 하위 메뉴가 없는 1차 메뉴를 만들어준다

--> 노멀라이즈
body, ul, li{
    margin:0;
    padding:0;
    list-style: none;
}

a{
    color : inherit;
    text-decoration:none;
}

--> 사전 작업/하위 메뉴 아이템 가리기
.menu > ul ul{
    display : none;
}

--> 1차 메뉴
.menu{
    text-align:center;
}
.menu > ul{
    display : inline-block;
    background-color: lightgray;
    border-radius : 10px;
    padding: 0 20px;
    margin-top:10px;
}

.menu>ul>li{
    display: inline-block;
}

.menu>ul>li>a{
    display: block;
    padding: 10px;
}
.menu>ul>li>a:hover{
    background-color: black;
    color : white;
}`

4. 2차 메뉴 커스텀

• 하위 메뉴가 보이며 1차 메뉴의 속성을 가지게 한다

body, ul, li{
    margin:0;
    padding:0;
    list-style: none;
}

a{
    color : inherit;
    text-decoration:none;
}

.menu > ul ul{
    display : none;
    position: absolute;               // 모든 메뉴 유령화, 코드 추가
}

.menu{
    text-align:center;
}


.menu ul{                             // 모든 ul값의 배경 통일, 코드 추가
    background-color: lightgray;
}

.menu > ul{
    display : inline-block;
    background-color: lightgray;
    border-radius : 10px;
    padding: 0 20px;
    margin-top:10px;
}

.menu>ul>li{
    display: inline-block;
}

.menu ul>li{                        //하위 메뉴 가두기
    position:relative;
}

.menu ul>li>a{                       //모든 하위 메뉴 클릭 범위 통일, '>' 삭제
    display: block;
    padding: 10px;
    position: relative;              //a 태그에 범위에 가두, 코드 추가
}

.menu ul>li:hover>a{                 //모든 하위 메뉴 디자인 통일, '>' 삭제
    background-color: black;
    color : white;
}

.menu ul>li:hover>ul{                //모든 하위 메뉴 다 보이게, '>' 삭제
    display: block;
}

5. 3차 하위 메뉴 수정

• 3차에서 노출되는 메뉴의 위치를 수정해주자

.menu ul ul ul{                    //3차 이후 부터 하위메뉴 모두 오른쪽에 나오기
   top: 0;
    left: 100%;
    white-space: nowrap;

}
.menu>ul>li:nth-child(4)>ul ul{   // 4번째 메뉴는 화면에 잘려 왼쪽으로 나오게하기
    top:0;
    left: auto;
    right: 100%;
}

---

Today Comment :
처음으로 위기를 맞이했다...
1. 초반에 많은 아이템들을 보면서 어떻게 풀어가 나가야 할지 감이 안 잡힌 부분
2. 후손 선택자를 활용하여 첫 메뉴의 속성을 부여하는 부분
3. 어디를 relative 해야 하는지 찾지 못했던 부분...
오늘은 emmet코드 작성과 작성 후 그 코드를 해석하는 것도 오래 걸렸다

위 세 가지가 나의 하루를 다 가져갔다
독해는 가능하지만 영작이 어려운 느낌...

하지만 오늘 찾은 유튜브 영상으로 첫 성공을 맛볼 수 있었다

• 유튜브 풀다운 메뉴 만들기 영상 링크
  위 메뉴 제작은 다시 한번 수월하게 만들 수 있도록 연습해야겠다

이것만은 꼭 기억하자...한 번에 정리하거나 전체적으로 만들어 가려는 버릇은 고치자

ex. ul은 한 번에 묶고 li의 hover를 미리 만들고...

1차 메뉴, 2차 메뉴, 3차 메뉴처럼 점진적으로 만들어 나아가야 한다
안 그러면 시작하기 전부터 머리가 버티지 못할 것이다.