Section.G
article thumbnail
소소한 업데이트 예정사항 for 씨닭 1.1.0 - #02
라이프다이어리/잡담 2014. 11. 17. 20:22

개발이 어느정도 완료된 씨닭 1.1.0 의 덧글 및 방명록 입력란입니다. 버튼을 제외하고 모든 부분을 싹! 바꿨습니다. 먼저, 기존 버전에서 입력창이 구분이 안되신다는 얘기가 있어서 이번 기회에 싹 바꿨습니다.입력란은 스탠바이 상태와 마우스 오버 시 그리고 실제 사용할 때의 외곽선과 배경색을 다르게해서 구분이 명확하도록 했습니다.라벨 옆의 물음표에 마우스를 올리면 간단한 설명이 툴팁 형식으로 팝업됩니다.

article thumbnail
#001. 플립스위치(토글) 형식 체크박스 만들기 _ HTML · CSS
라이프다이어리/잡담 2014. 11. 9. 19:25

심심한 체크박스는 가라! 개성 충만한 체크박스를 심플하게 만들어보자! 정말 쉬워서 당장 블로그에 달고 싶어지는 체크박스 커스터마이징을 해봅시다. 시작하기 차근차근 배워가는 노하우먼저, 이 곳 (http://proto.io/freebies/onoff/)을 클릭하여 커스터마이징을 도와줄 웹 페이지로 이동합니다. * 위 이미지는 이해를 돕기 위해 편집된 화면이며 실제 웹 페이지는 영문으로 작성되어 있습니다.열린 페이지에서 위의 항목을 참조하여, 설정하시면 됩니다. ( 간단한 단어 정도 읽으실 수 있다면 안 읽어보셔도 됩니다. ) 설정이 완료되셨다면 하단으로 내려 작성된 커스텀스타일시트(.CSS)를 복사하셔서 원하시는 곳에 붙여넣으시면 됩니다. 그리고 조금 더 내리시면 만드신 체크박스를 HTML상에서 적용할 수..

article thumbnail
소소한 업데이트 for 씨닭 #01
라이프다이어리/잡담 2014. 11. 8. 15:46

@Eruis의 스킨 "씨닭"의 업데이트가 안되는 걸 보니, 프로젝트 중단인 것 같다구요?헐 .. 그런 식으로 저의 근성을 과소평가하시면 안됩니다. 소소한 업데이트 번번히 해서 여러분들을 괴롭히느니, 과감한 대규모 업데이트로 여러분의 눈과 귀를 즐겁게 해줄 생각에 업데이트가 다소 늦어지고 있는 거랍니다.이미 눈치 채신 분들은 있겠지만 씨닭의 추가 예정 기능은 바로 이 곳! Section.G에서 먼저 체험해보실 수 있습니다. 이 곳에서 직접 테스트를 해보며, 어떤 문제가 있는지 혹은 잘 작동은 되는지 확인해보고 있습니다.(명불허전 마루타 블로그 .. ㄷㄷ) 그리고, 앞으로 추가 업데이트 예정 사항은 바로 이 카테고리에서 확인해보실 수 있습니다.그럼 첫 번째 업데이트 사항을 확인해볼까요? "밀어.. 아니 눌러..

티스토리용 반응형 무료 스킨 | Cynical Dark | Bootstrap, jQuery, html5
라이프다이어리/잡담 2014. 10. 5. 16:02

@Eruis's Skin Project #04Cynical Dark 소개Cynical Dark(이하 "씨닭")은 부트스트랩(Bootstrap)과 jQuery(제이쿼리)기반의 티스토리용 반응형 스킨입니다. 여기서 반응형 웹이란? 별도의 전용 레이아웃 제작 없이 그 페이지의 컨텐츠를 각각 다른 크기의 화면을 가진 기기에서도 동일하게 이용할 수 있게끔 제작된 웹을 일컫습니다. 이번 씨닭은 스킨 제작 프로젝트의 네번째 프로젝트로써, 기존의 다른 스킨을 수정해서 사용했던 1~3번째와는 달리 직접 A부터 (.. 는 부트스트랩 예제를 썼으니 양심상) 는 아니고 한... C쯤부터 Z까지 직접 제작한 점이 차별화되었습니다. 미리보기... 미리보기를 넘어서 체험을 손수 하시고 계십니다.예, 맞습니다. 지금 보고 계신 스킨..

article thumbnail
아무래도 안 되겠습니다.
라이프다이어리/잡담 2014. 9. 28. 14:32

[사진 1] 태블릿 환경에서 구현되는 방명록 작성란 다른 사람의 테마를 재구성하는 것으로는 모든 기능을 구현할 수 없을 것 같아서 특단의 조치를 내렸습니다. 현재 가지고 있는 기술력을 바탕으로 손수 스킨을 만들자! 그래서 A부터 Z까지 스킨의 모든 부분을 처음부터 손수 만들고 있습니다. 사실 .. 부트스트랩 기본 예제를 기반으로 하고 있습니다만 직접 만든다는 것에 큰 의의를 두고 있습니다. [사진 2, 3] 현재 스킨에 사용되는 모든 파일의 목록과 상세정보 뭐 .. 아직 개발 초창기 단계로써 검색 결과부터 지역 로그, 태그 로그, 방명록 글쓰기 섹션까지만 완성된 상황이라 완성될 시의 요구되는 디스크 공간은 아직 미정이나, 현재 총 스킨이 요구하는 디스크 용량은 241KB입니다. 뭐 .. 나눔고딕은 구글 ..

article thumbnail
다시 뒤엎고 시작한 스킨.
라이프다이어리/잡담 2014. 9. 21. 17:20

안녕하세요? @Eruis입니다.기존에 개발 중이던 스킨이 치명적인 버그로 미쳐 완성되지 못하게 되었고, 다시 새로 처음부터 제작 중입니다. 현재 개발이 완료된 부분을 먼저 공개해드릴 예정입니다.공개된 화면은 태블릿 화면에서 보여질 각 영역을 캡쳐한 것입니다.* 현재 제작 중인 스킨은 기존과 동일하게 미디어 쿼리 기반 반응형 스킨입니다. 앞서 공개한 덧글 영역과 디자인이 유사한 방명록입니다.ADD YOUR 버튼을 클릭하면 바로 방명록 쓰기 부분으로 화면이 이동됩니다.... 뭐 이 기능 덕분에 스패머들이 더욱 더 떡밥을 뿌리기 쉬워졌다는 게 흠이 될 것 같습니다. 검색 기능을 이용하면 출력되는 화면입니다.이 부분은 워드프레스 기반인 원본 테마와 동일하게 구현할 수 없는 부분이므로, 자체 제작되었습니다. 사이..

article thumbnail
NEW Design will SOON!

안녕하세요? 오늘도 개발에 매진하고 있는 @Eruis입니다. 현재 개발 중인 Section.G만의 독창적이고 개성있는 스킨의 스틸컷을 잠깐 보여드리겠습니다. 이 스킨의 개발 및 안정화가 완료되면 추후에 적용될 예정입니다. 사진 1. PC화면에서의 상단 메뉴 디자인 마우스 오버를 하면 하위 메뉴가 나옵니다. 사진 2. 화면을 밑으로 스크롤 하면 상단 메뉴바가 블로그 제목, 검색, 이메일 문의 등만 나오도록 간략해집니다. 메뉴를 표시하고 싶다면 PC는 블로그 제목에 마우스 오버를 하시거나 스마트폰과 마찬가지로 좌측 상단 메뉴 버튼을 누르시면 됩니다. 사진 3. 이번 스킨도 마찬가지로 반응형 웹으로써 모바일 환경을 지원합니다. 사진 4. 모바일 화면에서 메뉴 버튼을 누르면 오프캔버스 형식으로 메뉴가 출력됩니다..

홈페이지 디자인 개선 및 버그 수정.

안녕하십니까? @Eruis입니다.현재 Section.G에 디자인 개선 및 일부 버그 수정이 완료되어 해당 내용을 안내해드립니다. 가. 상단 로고 마우스 오버(Hover) 효과 추가. 상단의 Section.G 로고에 마우스 커서를 올리면 흑백으로 서서히 바뀌는 오버 효과를 넣었습니다. 별 특별한 의미는 없습니다. 그냥 능력과시용(?)이라는 카더라가 있습니다. 나. 모바일 화면 버그 수정.모바일 화면에서 메뉴 버튼을 누르면 본 화면이 툭 튀어나오는 화면보다 덜 밀리는(?) 현상이 발견되었습니다.이는 .CSS 구문에 속성 값 수정으로 해결했습니다. 다. 화면 글씨체 변경 기능 버그 수정.이건 모바일보다는 PC쪽에 연관이 더 깊은 버그입니다.Section.G는 나눔고딕을 웹 폰트로 불러와서 사용하고 있습니다.본..

article thumbnail
포스트 게시 날짜 폰트 수정
라이프다이어리/잡담 2014. 7. 24. 19:40

사소한 업데이트 이후, 찾아온 휴가! 이 휴가 기간을 위해 할 수 있는 모든 것을 해보려는 수작을 벌이던 중, 치명적인 오류를 목격했으니! 최적화가 되어있다고 자부하던 IE11에서 포스트 게시 일자가 씹히는(?) 괴현상이 발견되었습니다. 부라부랴 폰트 사이즈를 1px 줄이는 걸로 해결을 보았습니다만 .. 최적화라는 단어 .. 함부로 사용은 하지 말아야겠네요 ㅠㅠ

article thumbnail
웹 브라우저 업데이트 권장 메시지.
라이프다이어리/잡담 2014. 7. 20. 16:21

* 14.07.20에 업데이트된 브라우저 업데이트 권장 메시지 오늘도 진행된 사소한 업데이트그 두번째 업데이트는 '웹 브라우저 업데이트 권장 메시지'입니다. 만약에 설치된 Internet Explorer(IE)의 버전이 9 미만인 환경의 PC에서 접속을 할 경우, 공지 창 밑에 업데이트 권장 메시지를 띄우도록 한 것입니다. 이 창은 공지창과 마찬가지로 상하로 따라다니면서 메시지에 업그레이드를 할 수 있는 웹 페이지의 URL을 링크로 걸어놓아 이용자 여러분들이 더욱 더 편하게 업그레이드를 하실 수 있도록 도와드리고 있습니다. ( 이 정도면 스토킹 수준이 아닐까 ... ) 무튼, 소스 코드들을 살짝 공개해볼까합니다.+ 현재 이 곳의 코드와 실제 Section.G에 적용되는 코드가 충돌되는 문제로 일부 클래스..