본문 바로가기

CSS

티스토리 배포용 스킨 티저 - EP1 티스토리에서 지원하는 모든 기능과 호환되는 나름 최초?의 스킨 - 툴바 지원- 플러그인 지원- 티에디션 지원- 테터데스크 지원- CSS Grid 베이스- 골-든시불장™ 레이아웃 엔진 더보기
CSS3의 새로운 효과와 스케치 목업으로 간단한 스킨 만들기 - 이글루스 스킨 Frosty CSS만 작성하면 스킨이 나오는 이글루스로 간단하게 만들어보았다. 제작시간: 약 하루? 어제 반나절 + 오늘 반나절 스케치로 만든 목업이다. 사용후기는 여기를 참고 그냥 평범한 1140 그리드 스킨이다. 딱 보면 느낌 알겠지만 반응형이 아니다. (애초에 지원할 이유도 없음)대신에 실험삼아 요새 핫한(?) CSS3 태그를 써 보았다. Backdrop filter 조니 아이브의 주도 하에 애플 제품군에는 새로운 디자인 언어가 적용되었다. 플렛 디자인이라고 불리는 이것은 기존의 실물을 흉내내던 스큐어모픽과는 달리 형광톤의 컬러와 블러 레이어를 통해 경계를 나누는 방식이다. 이후 iOS와 macOS의 서리낀 유리효과를 표현하고자 수많은 웹개발자들이 삽질에 삽질을 거듭하였다.물론 현재 쓰고 있는 XP1에도 검색창.. 더보기
루리웹 마이피 테마 alpha 아직 이름도 못 지었다. 지난번께 '부라리큰'이었으니 이번에는 부라리²로 할까 생각중.관련글: Burarikun - 루리웹 마이피용 CSS3 스타일 근근웹 마이피는 2016년에 무!려! 테이블 레이아웃을 사용하고 있다. 2013년에 스킨만들때는 float가지고 테이블 속성 뭉개고 다녔지만 지금은 flex-box가 도입되어 레이아웃 짜는데 40분도 채 안걸렸다. 근근웹 마이피는 자바스크립트를 지원하지 않기 때문에 상식선에서는 슬라이더를 넣을 수가 없다. 하지만 의지의 둠반도인은 포기하지 않는다! 근성으로 CSS3으로만 동작하는 슬라이더를 넣었다. 그럭저럭 봐줄만 하다. 더 화려하게 꾸미고 싶긴한데 지저분 해질까봐 이 이상 못 건드리겠음... 조만간 배포 예정. 더보기
아기를 위한 HTML 그림책 야! 이 미친놈드랔ㅋㅋㅋㅋㅋㅋ이게 뭐얔ㅋㅋㅋㅋㅋ HTML for Babies 라니!!! 아무리 조기 교육이 중요하다지만 ㅋㅋㅋㅋ 너무 어린나이 아닌가? ㅋㅋㅋ 시덥잖은 개그가 아니다 진짜로 Code Babies라는 곳에서 나온 책이다. 주로 아기를 위한 프로그래밍 서적을 출간하는 회사다. -_-; ('개발에는 너무 이른 것이 없다'라니 허허...) 비단 html 뿐만이 아니다. 자바스크립트도 있고 CSS도 있다. 유아 용 뿐만 아니라 어린이용 서적도 있다. 이쯤되면 정말 개그가 아니라 진지한 수준. 뉴욕에 사는 웹디자이너가 자기 애를 위해서 만든 것인데 이것을 정식 출판 한 것이라고 한다. 크... 역시 코드 강국은 뭐가 달라도 다르다. 우리나라에서 저짓하면 아이를 벌써부터 노예 만드려고 한다고 욕먹을텐.. 더보기
CSS3의 HLSA 색상이 멋진 이유 CSS에서 사용되는 색상은 hex 코드, rgb(a), 그리고 색상 명이 있다. hex 코드는 웹 뿐만 아니라 워낙에 광범위 하게 쓰이고 있다 보니 따로 설명할 필요가 없다고 본다. rgb 같은 경우에는 IE7 이하는 alpha 필터를 별도로 지정해줘야 하기 때문에 rgba 속성은 쓸 수가 없다. 색상 명은 w3c 표준으로 지정된 몇 개의 색상 명이 있는데 이것들은 이름만 적으면 바로 사용할 수 있다. 그런데 이번에 새로 등장한 CSS3에서 추가된 색상 표기 방법 중에 HLSA라는 것이 추가 되었다. 이것은 무엇일까? HLSA는 Hue Lightness Saturation Alpha의 약자이다. 각각의 항목을 설명해보자면, H는 색조, L은 명도, S는 채도, A는 투명도를 뜻한다. 기존의 rgba 컬러.. 더보기
Suit & Tie - Addon Stylesheet for Fastboot v1.5.1 Readiz님의 Fastboot 1.5.1 업뎃 소식을 30일날 접하고 잉여력 폭발해서 3시간 만에 만든 애드온 스타일 시트 입니다. HTML은 단 한 줄도 건드리지 않았으며 CSS 파일만 달랑 만들었습니다. 웹 폰트는 쓰지 않았으며, 매킨토시에서는 Helvetica Neue와 애플 산돌 고딕 네오, 윈도우 에서는 Arial과 맑은 고딕이 기본 적용 되며 맑은 고딕이 없을 경우에는 나눔고딕이 적용 됩니다. (마음 같아선 Proxima nova나 Gotham 쓰고 싶지만...) 사실 31일날 올리려 했으나, 그 날은 도무지 이런 글 올릴만한 기분이 아니어서 걍 예약 발행 해 놓았습니다. 살짝 걱정이 되는 것은 워낙 업데이트가 빠르셔서 제가 만든 스타일 시트가 이 글이 발행 될때 쯤에는 구버전에나 적합 할 .. 더보기
Dynamite - 티스토리용 페럴랙스 스킨 페럴랙스를 기본으로 지원하는 스킨입니다. CSS3으로 구현한 반쪽짜리 페럴랙스가 아닌 자바스크립트로 지원하는 페럴랙스 입니다.페이지 별로 다른 베너가 들어가며, 베너는 모두 페럴랙스 기능이 제공됩니다. 더보기
티스토리 새 관리 - 메인 완료 이제 이짓을 모든 페이지마다 할걸 생각하니 정신이 아득하군요 -ㅅ-그리고 SVG를 CSS에 쑤셔 넣는거 너무 귀찮아요... 색상 변경도 귀찮고... 더보기
티스토리 새 관리 - 오늘은 여기까지 데이터 url로 SVG를 CSS에 심어넣는 것은 처음 써봤는데 생각보다 신기합니다. 문제는 코드가 너무 길어서 SCSS에 집어 넣으면 가로 스크롤이 엄청 길어지는게 좀 귀찮습니다. -ㅅ- 그리고 티스토리 이 미친놈들이 거의 모든 UI요소를 스프라이트로 짜버려서 그거 없애느라 혼났습니다. -_- 아니 셀렉터가 모자라던 시절인 것은 이해는 하지만, heading까지 다음체로해서 png로 만들 필요는 있었나 싶네요 (걍 웹폰트 쓰지...) 마크업이 아니라 CSS로 위에 덮어 씌우는 일은 마이피 스킨만들때도 해봤지만, 아이콘 같은거 집어넣으려고 하면 :before 써가면서 삽질해야 하는거 사람할일 아닙니다; 걍 워드프레스처럼 관리도 스킨질 좀 하게 해주지... P.S 반응형 됩니다. 일부 플래시 요소는 어떻게 .. 더보기
티스토리 새 관리 화면 기존 관리화면이 너무 마음에 안들어서 새로 스타일시트를 짜고 있습니다. 이제 아이콘과 Sprite 이미지만 교체하면 거의 완성입니다. 더보기