내가해냄

Summary portfolio용 사이트를 제작 중 nav 바를 만드는데... transition이 마음대로 되지 않는 상황이 발생했습니다. 하지만 검색을 통해 금방 해결할 수 있었습니다. 굳! Problem 1 nav에 hover를 했을 시 서브리스트가 나타나도록 하고 싶었습니다. 근데 이걸 그냥 display: none, display: block만 주자니 너무 딱딱하더라고요. 그래서 opacity를 주어 부드럽게 나타날 수 있게 만들고자 했습니다. 그러나.. display:none를 사용하면 transition이 제대로 적용되지 않습니다. 화면상에 아예 보이지 않으니까 렌더링 트리에서 누락된다고 하네요. 그렇다고 visibility같은 애들을 쓰면 그 자리가 공백으로 채워져 있기 때문에 제가 원하는..

Summary 결론 img는 ::after와 ::before 같은 가상요소를 못쓴다🥹.. Problem 위 그림에 표시된 것과 같이 이미지에 가상요소를 추가하는 연습을 하고자 했습니다. img::after 를 사용해서 진짜 열심히 만들었는데 아무것도 뜨지 않았고... 뇌가 정지할 뻔했지만 바로 구글링 ON.. Solved 닫는 태그가 없는 태그는 ::after와 ::before같은 가상요소를 사용할 수 없다고 합니다. img? 닫는 태그요? 없어요. 그래서 div를 추가했습니다. 그리고 추가한 div에 가상요소를 추가해서 구현했습니다. 바로 보이는 귀여운 상자^^.. div { position: relative; width: 640px; } .img::before { position: absolute; ..