본문 바로가기

IT

반응형 스킨제작시 스프라이트 이미지 때문에 발생하는 애로사항들... 현재 로딩속도 비약적 향상을 목표로 삼고 베경 이미지를 제외한 모든 이미지 요소를 스프라이트로 대체 했습니다. 하지만 이에 따른 예상치 못한 문제들이 속속들이 드러나고 있습니다. (오른쪽 플로팅 메뉴 주목) 하지만 옆에 플로팅 요소를 보면 아시듯이 스프라이트를 사용하면 img 요소로 바로 심는 것이 아니라 div나 span을 놓고 거기에 background-img를 사용해서 스프라이트를 CSS로 넣는 방식으로 가야합니다. 사실 이미지 파일 주소를 일일히 쳐넣는 것보다 단일 이미지 파일에 스프라이트 위치만 불러오면 되어 스타일링이 상당히 빠르고 편하지만 요소자체의 크기는 변하되 배경 이미지의 크기는 변하지 않아 반응형 이미지의 구현이 쉽지 않다는 단점이 있습니다. 다음도 현재 개편을 하여 큼직큼직한 스프라.. 더보기
PROTOTYPE 디자인 초안 입니다. 큰 변화 없이 이대로 만들어 지고 있어서 디자인 할때 사용한 PSD 파일의 모습을 공개합니다. 이대로 완성까지 만들어지면 정말 좋겠지만... HTML한계상 타협을 봐야 하는 점은 바뀔수도 있습니다. ^^; 더보기
신기한 Sass LESS와 Sass를 비교하면서 뭘 쓸까 고민했는데 해외에서는 Sass의 지지도가 압도적이더군요 -ㅂ- (참고링크: http://css-tricks.com/sass-vs-less/)그래서 저도 망설임 없이 Sass를 사용했습니다. 현재 코드 네스팅, 믹신, 오퍼레이터, 익스텐드를 써보았는데요 익숙해지면 굉장히 편할것 같습니다. 스스로 믹신이나 함수를 만들수 있는데 아직 내공이 거기까지 쌓이진 않았네요;컴패스에서 제공하는 기본 믹신 만으로도 충분한지라; 더보기
코딩은 뒷전이고 워크 플로만드는데 시간 다 보내고 있네요 시간 좀 아껴보려고 오만 꼼수를 동원해서 워크 플로를 짜고 있는데 이것 때문에 시간이 더 걸리네요 -_-; 대충 구축한 워크 플로는 Coda2 + Zen Coding 조합으로 뺑이 없는 초고속 마크업 달성.CodeKit + Compass 로 쾌속 Sass 컴파일 달성. (심지어 자동 스프라이트 생성도 됩니다. ㄷㄷ)오토 리프레시로 옆에다 브라우저 띄워놓고 바로 마크업 하면 실시간으로 반영됩니다. 이거 뭐 초등학생때 나모 웹에디터 쓰는 기분이 나네요 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ (나모 아직도 나오려나...) 구성하기가 좀 까다롭지만 해놓고 나니 전부 한방입니다. -_-b프레임웍 기반이지만 단일 CSS를 사용합니다. 모든 CSS를 하나로 컴파일 시켜버렸는데요, 그래서 무지막지하게 CSS 파일이 큽니다. -_- (압축.. 더보기
프로토타입 스킨, W3C 유효성 검사 무사 통과 어짜피 티스토리 용으로 컨버전 하면 XHTML이랑 짬뽕되서 검사 결과 개판으로 나오기 때문에 일단 기본 마크업 끝내고 최초이자 마지막 검사입니다.경고는 권고안 입니다. HTML5가 너무 새삥이라서 주의 하라네요 -_-여태까지 제가 만든 스킨은 전부 최신 웹표준을 준수합니다. 더보기
스킨 제작 상황 업데이트 프로토타입 스킨은 100% 모바일 퍼스트로 제작이 되었습니다. (모바일 퍼스트: 기존의 반응형 웹페이지가 PC 페이지를 축소시키는 방식 대신에 역순으로 모바일 페이지를 확장하는 방식으로 만드는 방식입니다.)모바일 뷰에서는 기본 메뉴 대신 별도의 메뉴를 따로 제공합니다.기본적인 마크업은 이제 다 끝났고 스타일링만 남았습니다.스타일링 끝나면 티스토리 최적화 작업도 해야하네요이전보다 많이 가볍긴한데.... 티스토리 CDN이 워낙 구려서... 실제 적용해봐야 퍼포먼스를 제대로 알수 있을듯 합니다. ^^ P.S 그나저나 Placeholder로 괭이 사진을 쓰고 있는데... 자꾸 괭이를 보니 집사가 되고 싶네요... 더보기
프로토타입 블로그 스킨 디자인 완료 이제 지옥의 마크업만이 남았네요 ㅋㅋ 요번에는 Sass로 작업을 해볼까합니다. 믹신이나 코드 네스팅도 참신하고 여러모로 작업량도 줄어들기 때문에 상당히 매력적이더군요 하지만 작성시 바로 압축해주는 프로그램이 없기 때문에 에디터에서 압축용 프로그램을 한번 거쳐야 한다는게 좀 까다롭긴 하네요... 아마 대중화가 되면 한방에 되는 프로그램도 나올것 같습니다. ^^ 더보기
아이튠즈로 아이폰용 벨소리 만들기 - m4r,caf 파일 제작 강좌 준비물: 아이튠즈(버전 상관없습니다.), 벨소리로 쓸 음원 원하는 음원을 선택하여 오른쪽 마우스를 누른뒤 정보가져오기를 누릅니다. (물론 보관함에 있는 노래이어야 합니다.) 옵션 텝으로가서 시작시간과 정지시간을 설정합니다. (30초 이내여야 합니다.) 확인을 누르고 설정창을 닫은 뒤, 다시 파일이름에 오른쪽 클릭을 하여 AAC로 버전생성을 선택합니다. 30초짜리 AAC 버전이 생성되었습니다. 오른쪽 마우스를 눌러 Windows 탐색기에서 보기를 누릅니다. 그러면 탐색기 창이 열립니다. 리본에서 보기 → 옵션을 선택합니다. (Windows 8 기준. 이하버전은 보기 → 폴더 옵션을 선택하세요) 그리고 보기 창에서 아래로 내려가 "알려진 확장자 숨기기"의 체크 표시를 해제합니다. 그러고 나서 파일을 선택한체.. 더보기
iOS6 파일 구조/ 백업 복구 가이드 기본 경로 주소록 경로 /Library/AddressBook ┕ 주소록 파일:AddressBook.sqlitedb ┕ 주소록 섬네일 이미지:AddressBookImages.sqlitedb Tip. 그대로 파일을 복붙하고 리스프링 하면 바로 적용됨. 그러나 iOS6에서 부터는 iCloud 도입으로 인해서 별로 필요없는 방법이 됨. 카메라 폴더 경로 /Media/DCIM ┕ 사진첩:100APPLE ※사진 1천개마다 사진첩을 새로 생성함, 100APPLE, 101APPLE 과 같은 형태로 생기며 만약 마지막 폴더 이름이110APPLE이면 자신이 사진을 1만장 촬영했다는 소리. 카메라 사진 정보 경로 /Media/PhotoData Tip. DFU 백업후 DCIM과 이 폴더를 동시에 넣고 리스프링 하면 별도로 데.. 더보기
티스토리 속도향상 프로잭트 - 페이지 압축하기 Google Inspactor나 Site analysis의 권고 사항에는 html,css,js의 압축을 명시하고 있습니다. 따라서 페이지를 압축하면 비약적인 속도향상을 이뤄 낼수 있습니다. 페이지 압축을 위해 HTML compressor에 접속합니다. 제작자가 비트코인이나 라이트 코인으로 기부를 받고 있으니 채굴 좀 많이 하신 분이라면 기부를 하셔도 될 듯 합니다. ^^; 여기서 자신의 skin.html, css, 그리고 자신이 사용중인 자바스크립트를 붙여 넣고 하단에 compress를 누릅니다. 옆에 속성을 설정하는 메뉴가 있긴하지만 자동인식을 하기 때문에 귀찮게 따로 선택해줄 필요는 없습니다. 조금만 기다리면 압축률과 압축된 코드가 나옵니다. 제 블로그의 CSS의 같은 경우 77% 압축이 되었네요. .. 더보기

티스토리툴바