2021-05-16 (34일차) 탑바, 메뉴바, 이미지리스트, 이미지효과 연습, z-index:-를 주는 이유?

1. 3차 메뉴 만들기 연습완료

2. 탑바+메뉴바 만들기 연습완료

3.이미지 넣고 배열하기 연습완료

4.이미지에 어둠효과, 확대효과, 텍스트효과 주기 연습완료

 

<헷갈렸던 것과 복습하고 알아낸 것>

 

Q. z-index:-1을 굳이 이미지 확대효과에 주는 이유는? (비확실)

A.일단 이미지에 어두움, 확대효과를 동시에 줬을 때, 어두움효과가 보이지 않게 된다.

  그 이유는 이미지 확대효과는 특수효과 transform(scale)를 사용하기 때문에 z축 맨 앞으로 나오는 성질 때문이다.

  그래서 어두움효과에 z-index:1;을 줘서 앞으로 나오게 하거나  확대효과에 z-index:-1; + position:relative;를 줘야한다.

  편하게 어두움효과에 zi-ndex:1;값만 주려고 했으나, 추가로 텍스트 효과를 주고나니 텍스트 효과도 보이지 않는다.

  새로운 효과를 추가할 수록 그 효과에 z-index:1;값을 줘야 한다는 것을 깨달았다.

  확대효과에 바로 z-index:-1; + position:relative; 값을 주는 게 편하다고 생각이 된다.

 

Q. top-bar 안의 세번째 div에 .inline-grid값이 들어간 이유는?

A. top-bar > div:nth-child(3)는 메뉴바가 들어가는 곳이다.

    메뉴바의 ul, li는 block이기 때문에 가로정렬을 위해 준 것