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의 재활용성을 높여줍니다. 코드의 계층과 .. 더보기 [iOS] EPUB text-align:justify 문제와 최선 EPUB (디지털책자) 플젝에 참여하면서 우여곡절이 참 많네요. 긴 공백 끝에 빠듯한 일정으로 처음 작업해야만 하는 디지털책자 툴이 추출해 준 모든 absolute 텍스트들.... 배경이미지에 맞춰 좌표를 잡아주는 억지스러운 작업은 멘붕 그 자체였고 아직도 진행형이라는 건 함은정. 더우기 고객사는 출판물과 같은 오와 열을 기대하는 각. 각설하고.. 타겟 디바이스는 ie 기반의 뷰어와 갤탭, 아이패드까지 대처해야 했는데 진행 중 발생된 트러블 중 한가지를 블로그에 남겨 기억하려 합니다. Trouble 오와 열을 위해 적용한 text-align: justify; 속성 iPad 에선 좌,우 정렬은 되지만 문장내 단어와 단어 사이 띄어쓰기 공백이 너무 벌어지는 문제가 있더군요. 문제 해결을 위해 구글링을 해보면.. 더보기 안드로이드 웹뷰 FontAwesome 이슈 처리 며칠 전 앱개발자의 피드백 모바일 마크업을 안드로이드 웹뷰에 적용하면서 FontAwesome 폰트가 제대로 표현되지 않는 문제가 있더군요. 관련 이슈를 찾아 해결책은 찾았지만 원인은.. 추측만 할 뿐입니다. 트러블슈팅 안드로이드 개발단 or 마크업에서 각각의 해결 방법을 제공하는데 여기서는 마크업 부분만 기록합니다. 관련자료 : https://blogs.msdn.microsoft.com/wsdevsol/2012/10/23/about-webview-and-fonts/ 간단히 요약하면 웹폰트 파일을 base64로 인코딩한 외계문자들을 CSS 내부에 직접 작성합니다. 1. ttf, woff 등의 폰트 파일을 base64 로 인코딩 (온라인 웹폰트 변환 서비스 : https://www.fontsquirrel.c.. 더보기 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;} 더보기 iOS checkbox 스위치 UI 마크업 하이브리드앱 웹뷰 마크업 진행 중 iOS UI 형태의 Checkbox on,off 스위치가 필요해 찾아 보니 Pure CSS 형태 또는 JS 스위치 동작이 목표 디바이스에서 만족스럽지 못해 직접 마크업 해봅니다. 미리보기 마크업 방향 - 모바일 환경 최적화를 위해 가능한 모든 효과는 CSS를 사용- JS는 addClass(), removeClass() 정도만 사용- click, touch 이벤트 (접근성 저하요인 밀기 동작은 제외)- 아이폰 4,5,6 과 안드로이드 4.x 버전 이상 디바이스 지원 시작padding, margin 에 영향을 받지 않도록 box-sizing 속성을 지정합니다.-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-.. 더보기 이전 1 다음
