마크업 썸네일형 리스트형 입문 Sass(SCSS), 그리고 작성 방법론 BEM Sass(SCSS) Sass를 알아가기 전에 잡썰 잠깐 풀어 보겠습니다. 마이크로 프로젝트에 CSS를 작성하는 건 그리 어려운 일도 아닐뿐더러 딱히 Less, Sass 등의 전처리기를 고려할 필요도 없을 것입니다. 하지만 추후 서비스가 확장되거나 규모가 큰 협업 프로젝트에서 CSS 코드가 기하급수적으로 늘어나는 상황이라면.. 변경/추가 사항이 생기거나 디자인이 바뀔 경우, 상당한 단순노동의 수고를 해야 하거나 디버깅이 어려운 CSS의 늪에 빠지게 되고 결국 중복된 오버라이딩과 !important를 남발하게 됩니다. Sass는 이러한 문제를 해결해 줄까요? 두말 하면 잔소리, 충분히 가려운 부분을 긁어줄 수 있을 뿐만 아니라 더 재미있는 코딩생활 가능! 장점 CSS의 재활용성을 높여줍니다. 코드의 계층과 .. 더보기 Nuxt(Vue-Cli, Sass)설치와 Gitlab 연결 어쩌다보니 Vue 환경에서 개발새발스런 마크업을 해야하는 상황 React보다 러닝커브가 낮다고 하는 Vue지만 이마저도 편하게 쓰고자 프레임워크 출현 'NUXT' 첫 단계는 늘 변화무쌍한 개발 환경 설치 시행착오와 경험을 기억하기 위한 메모 스따뜨! 참고로 나의 설치 환경 - 윈도우즈 10, VScode Terminal - Node 버전 v10.15.3 1. Vue-Cli 설치 > npm install -g vue-cli 2. Nuxt App 프로젝트 만들기 패키지 매니저로 npm이 아닌 yarn을 쓰자면 yarn 이 설치되어 있어여 한다. (npm install -g yarn) > npx create-nuxt-app [my_작업폴더명] 구성하고자 하는 환경에 대해 답변을 하고 생성된 폴더로 이동 후, .. 더보기 [iOS] EPUB text-align:justify 문제와 최선 EPUB (디지털책자) 플젝에 참여하면서 우여곡절이 참 많네요. 긴 공백 끝에 빠듯한 일정으로 처음 작업해야만 하는 디지털책자 툴이 추출해 준 모든 absolute 텍스트들.... 배경이미지에 맞춰 좌표를 잡아주는 억지스러운 작업은 멘붕 그 자체였고 아직도 진행형이라는 건 함은정. 더우기 고객사는 출판물과 같은 오와 열을 기대하는 각. 각설하고.. 타겟 디바이스는 ie 기반의 뷰어와 갤탭, 아이패드까지 대처해야 했는데 진행 중 발생된 트러블 중 한가지를 블로그에 남겨 기억하려 합니다. Trouble 오와 열을 위해 적용한 text-align: justify; 속성 iPad 에선 좌,우 정렬은 되지만 문장내 단어와 단어 사이 띄어쓰기 공백이 너무 벌어지는 문제가 있더군요. 문제 해결을 위해 구글링을 해보면.. 더보기 2016 두번째 프로젝트를 마치고.. IT 인프라가 넉넉치 않은 지방으로 이주한 이후로는 본업을 부업처럼 하고 있는데.. 그 만큼 주머니는 가볍지만 상대적인 시간을 얻고 있으니 적당히 만족하는 자위가 필요합니다. 현재까지 경험으론 마크업, UI, 퍼블리셔는 보통 2~3개월 단기 투입이 많은데 더우기 기간이 겹쳐 다른 플젝을 놓치기 일수라 1년에 길~~면 6개월 정도 참여가 가능한 것 같습니다. 물론 아직 6개월을 채워본 경험은 없군요. 요즘은 오픈 전에 UI 관련 마크업을 최대한 당기고 일찍 철수시키는 추세인 것 같습니다. 3월 플젝의 시작은 좀 삐걱거렸지만 적응 타이밍도 오고 소수의 플젝 팀과 정이 쌓일만 하니 철수. 7월 플젝은 업체를 끼고 들어간 관공서 플젝으로 참여. 인원도 많고 시작 역시 삐걱거리긴 했지만 가능한 한 사람들과 웃는 .. 더보기 안드로이드 웹뷰 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.. 더보기 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-.. 더보기 마크업 퍼블리셔 다람쥐의 도토리 수집 마크업 개발자 or 웹퍼블리셔의 일상다공사 극복 플젝이 있을 때 마다 매번 반복하는 자료 검색과 소스 코딩 변화가 빠른 웹이니 최신 기술의 검색이 당연한 과정이지만 두뇌가 에이징될수록 Delete 기능 처리속도는 슈퍼컴 수준입니다. 기억리무버는 이제(?)부터 다람쥐처럼 도토리 숨기기를 시작합니다. 문제는 도토리 숨기기만 15년째. 마크업 동향과 변화에 맞춰 현 시점에 최적의 그것을 찾아내고 코딩해야 하는 필연. 심도 깊은 분석보단 중복되는 활용도 높은 소스코드와 PC,모바일 환경에 따라 기억해둬야 할 것들. 현업에 적용하고 사라졌던 팁과 정보들을 정리하고 기록해볼까 합니다. 마크업 더보기 이전 1 다음
