whatisthis?

BookStore UI -codepen 🏆 KEY POINTS display: flex와 flex-shrink position: absolute FontAwesome 사용 - 다른 방법! @import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css); .rating > label::before { display: inline-block; font-size: 0.9em; font-family: FontAwesome; content: "\f005"; } transition과 가상클래스 overflow overflow와 text-overflow의 차이는? text-overflow: ellipsis 텍스트가 넘치면 ellipsis (..

Modal pop-up - without JS 📌 기본 원리 - 을 해서 해당 div#popup에 가상클래스 :target을 준다! - display block과 none 토글되게 - 닫기버튼에는 로 다시 되돌린다. HTML Open modal 닫기 CSS #popup { display: none; } #popup:target { display: block; } 🔻 응용 예제 위 원리를 이용해서 응용 예제를 만들어보자. div#popup에 class도 추가해서 스타일 하나를 가지고 여러개의 모달을 만들 수 있게. 또한, display: block이아니고 display: flex를 해서 가운데정렬도 덤으로 할수 있게. index.html Open Modal A Open Modal B Open Modal C..