본문 바로가기

입문 Sass(SCSS), 그리고 작성 방법론 BEM Sass(SCSS) Sass를 알아가기 전에 잡썰 잠깐 풀어 보겠습니다. 마이크로 프로젝트에 CSS를 작성하는 건 그리 어려운 일도 아닐뿐더러 딱히 Less, Sass 등의 전처리기를 고려할 필요도 없을 것입니다. 하지만 추후 서비스가 확장되거나 규모가 큰 협업 프로젝트에서 CSS 코드가 기하급수적으로 늘어나는 상황이라면.. 변경/추가 사항이 생기거나 디자인이 바뀔 경우, 상당한 단순노동의 수고를 해야 하거나 디버깅이 어려운 CSS의 늪에 빠지게 되고 결국 중복된 오버라이딩과 !important를 남발하게 됩니다. Sass는 이러한 문제를 해결해 줄까요? 두말 하면 잔소리, 충분히 가려운 부분을 긁어줄 수 있을 뿐만 아니라 더 재미있는 코딩생활 가능! 장점 CSS의 재활용성을 높여줍니다. 코드의 계층과 .. 더보기
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-.. 더보기