HTML CSS navigation menu references

완성화면

분홍색 네비게이션바가 숨겨진 상태이다.

1. last child

Lastchild는 ID 태그로 따라간 영역의 마지막 자식 노드다.

코드

getElementById("id명").lastChild.동작 (innerHTML, nodename, text 등)

.nav-menu ul li{
  display:block;
  margin-bottom: 20px;
  text-align: center;
}

.nav-menu ul li: last-child{
  margin-bottom:0;
}

Reference : https://homzzang.com/b/js-1266

홈짱닷컴

 

 

2. TRANSFORM (위치, 각도)

translateX는 x축, 가로축으로 넣은 값만큼 이동

translateY니까 y축, 세로축으로 넣은 값만큼 이동

이때 부호는 함수의 사분면과 동일. (+x, +y는 각각 오른쪽, 위로 이동)

 

rotate는 회전

 

코드

.nav-menu .copyright-text {
    position: absolute;
    left: 0;
    top: 50;
    font-size: 15px;
    color: var(--text-black-600);
    transform: translateY(-50%) rotate(-90deg);
    left: -60px;
}

Reference : https://gahyun-web-diary.tistory.com/79

[CSS] transform 이용하기

NP

1. last-child 앞에 띄어쓰기

/* 헐 li:lastchild에서 li : lastchild, li: lastchild로 띄면 안됨 */

.nav-menu ul li:last-child {

    margin-bottom: 0;

}