[CSS] (토글 사이드바 만들기) 실습

풀 다운 메뉴와 토글 사이드바를 종합한 실습(5분 안에 완성하기)

 

주요 사용 태그

• position:fixed; → 화면이 스크롤해도 끊김 없이 계속 나옴
• transition:태그명 1s; → 사이드바 나오고 사라지는 효과(시간대별로 느리게 빠르게)
• 태그명:hover  → 마우스 올리면 나오는는 효과
• display:inline-block; → 높이, 너비를 지정하지 않는 한, 최소한으로 줄어들게 하기, 가능한 최대한 한줄에 쓰기
• white-space:nowrap; → 줄바꿈 금지
• a:not(:only-child)::after  → 새로운 막내 자식 추가.(after은 맨 뒤에 표시, only-child 는 자식이 있는 부모 태그는 모두 표시하나 not이 표시되어 반대로 표시)
• content: "[+]"; → after에 이어서 작성해주어야 해당 태그가 막내 자식이 추가됨.
• border:2px solid blue; → 테두리 효과

** 역시 반복 숙달하면서 익히는게 제 맛이네요.

See the Pen Untitled by yeomboyeon (@yeomboyeon) on CodePen.