CSS 썸네일형 리스트형 단거 - content: attr(data-xxx) CSS 속성과 함께 제공되는 attr() 함수를 이용해 데이터 처리하기입니다. * data 속성은 접근성 이슈가 있으니 상황에 따른 선택 사용이 필요. HTML 뱃지 버튼 태그 내 data-num 이란 커스텀 속성을 사용 CSS .btn-badge { position: relative; padding: 6px 10px; line-height: 1; border: 0; outline: 0; background: #000; color: white; &::after { position: absolute; content: attr(data-num); top: -1rem; right: -1rem; display: flex; justify-content: center; align-items: center; widt.. 더보기 입문 Sass(SCSS), 그리고 작성 방법론 BEM Sass(SCSS) Sass를 알아가기 전에 잡썰 잠깐 풀어 보겠습니다. 마이크로 프로젝트에 CSS를 작성하는 건 그리 어려운 일도 아닐뿐더러 딱히 Less, Sass 등의 전처리기를 고려할 필요도 없을 것입니다. 하지만 추후 서비스가 확장되거나 규모가 큰 협업 프로젝트에서 CSS 코드가 기하급수적으로 늘어나는 상황이라면.. 변경/추가 사항이 생기거나 디자인이 바뀔 경우, 상당한 단순노동의 수고를 해야 하거나 디버깅이 어려운 CSS의 늪에 빠지게 되고 결국 중복된 오버라이딩과 !important를 남발하게 됩니다. Sass는 이러한 문제를 해결해 줄까요? 두말 하면 잔소리, 충분히 가려운 부분을 긁어줄 수 있을 뿐만 아니라 더 재미있는 코딩생활 가능! 장점 CSS의 재활용성을 높여줍니다. 코드의 계층과 .. 더보기 placeholder 색상 변경 스타일 Input placeholder 색상 변경 스타일::-webkit-input-placeholder{color: #ddd;} :-moz-placeholder{color:#ddd;/* For Firefox 18- */} ::-moz-placeholder{color:#ddd;/* For Firefox 19+ */} :-ms-input-placeholder{color:#ddd;} 더보기 이전 1 다음
