220322(css)

1. 모바일에서는 :hover가 작동하지 않는다 (생각해보면 그렇다.. 마우스 커서가 따로 있는게 아니니까!)

모바일에서 버튼을 눌렀을 때 효과를 주고싶다면 :active로 주어야 한다!

- 모바일에서는 웹과 환경이 다르기 때문에 고려할 사항이 많아지는 기분!

-확인을 해보니 모바일에서 hover일 때 꾹 눌렀을 때 나타나긴하지만, 꾹 눌렀다 뗐을 때 open버튼이 여전히 남아있음을 알 수 있었다.(다른 곳을 눌러야 없어짐) active로 했을 때는 눌렀다 떼면 없어짐. 

우선 :hover로 작업하기!

 

2. position값을 주게 되면 display값이 block으로 자동으로 바뀐다.(갑자기 헷갈림)

이미 알고 있었지만, 계속 헷갈리게 됨. 멋사 과제중에 선을 긋는 --- 또는 --- 이런 식으로 표현해야하는 부분이 있었는데,   ::before를 사용할 때 block을 줘야 화면에 나타나게됨. 근데 absolute 나 fixed 를 하게되면 그냥 짜잔 하고 나타남.  포지션 값을 준 상태에서 block을 준건 쓸 데 없이 한번 더 언급한거나 마찬가지인데 그렇게 작성하고 넘겼던 것 같아 조금 후회됨... 그리고 absolute로 줄걸 그냥 flex로 걸고 정렬해 버렸다......흑흑흑.....absolute할걸... 그리고 display:flex주면 애들이 하위애들이 block된거나 마찬가지임. 얘도 고려해야함....

 

3. ::before 보다 content가 맨 앞에 나오게 하고 싶을때는 ::before에 z-index:-1을 주면 된다(음수의 값)
content에 아무리 z-index를 줘도 먹히지 않았다. 생각해보니 position값을 주어야 가능하다는 것을 깨달았다(relative 제외) 그렇다고 이걸 absolute 나 fixed를 줄 수는 없는상황..... 구글링을 다르게 해보니 position 값을 준 자식 요소(여기서 ::before)에 음수의 z-index값을 주면 된다고 적혀있었다. 

---

검색이 안되는 부분

::before와 after를 걸었느데 거기에 해당하는 태그가 맨위로 올라왔음 좋겠는데 z-index 써도 안올라옴...