본문 바로가기

2018/10

CSS로 만드는 입체 텍스트 효과 알고 쓰면 별거 아니지만, 일일이 코딩하려면 잔손이 꽤나 많이 가는 CSS 입체 효과입니다. 3번째 텍스트 효과는 배경색이 어느정도 있어야 입체 효과가 나기 때문에  배경색이 없는데는 사용하는것을 추천하지 않습니다. 복사해서 블로그 제목 등에 사용하면 됩니다. .longshadow {  color: #131313;  text-shadow:     1px -1px 0 ..
웹브라우저별 CSS 호환성을 확인해보자. 스킨 만들어 배포하다보면 제일 많이하는 질문이 IE에서 CSS 일부가 적용되지 않는다는 것입니다.크롬에서는 미리보기대로 나오는데 IE에서는 안나와요. 뭐 이런...제가 만들어 배포하는 스킨중 절반 정도는 IE 11에서 몇가지 이펙트가 적용되지 않습니다.기능적으로 쓰는데는 문제가 없지만, 미리보기에서 화려하고 보기좋았던 레이아웃이 IE 11에서는 안먹는 경우가 있습니다.IE 11 은 2013년 말에 나왔습니다.만 5년된 브라우저이고, 그 이후..
웹 개발자/디자이너가 되기위해 알아두면 좋은 무료 강의 사이트들 예전에 공부하는데 많이 도움이 되었던 무료 IT강의 사이트들 북마크가 있어서 공유합니다.큰 사이트들은 미끼?용 강의들만 무료인 경우가 많지만, 개인이 운영하는 좋은 강의 사이트도 있어서 소개를 합니다.강의 품질이 대체로 좋은 웹쪽 관련 무료 강의가 많은 사이트만 골랐습니다.허접한 개발도서보다 더 좋은 강의들도 꽤 많습니다.구름EDUhttps://edu.goorm.io/코다임에서 운영하는 강의 사이트입니다.자사 클라우드 기반 IDE인 구름ID..
티스토리 반응형 신스킨 3종 분석  티스토리가 여러가지 부분에서 개선이 이루어지면서 신스킨 3종이 새롭게 나왔습니다.신스킨 제작 가이드라인에 맞춰 앞으로 새로 만들 스킨에 적용을 해 나가야할 것 같아서 수박 겉핧는 느낌으로다가...티스토리가 나아가려는 방향을 살펴보는 느낌적인 느낌으로 스킨 소스를 좀 살펴 봤습니다.달라진 부분들------------------------------1. CSS에서 사용하는 기본 크기 단위가 em 단위로 모두 변경되었습니다. ..
반응형 그리드 블랙&화이트 티스토리 스킨 배포합니다. 사이드바 위젯과 프로필 이미지가 표시되지 않는 텍스트 중심읜 단색 스킨입니다.메인화면 전체 컬러가 흑백으로 보이도록 제작했습니다. 왼쪽 사이드바에는 카테고리 및 블로그 방문자들이 이용하는데 필요한 기능들만이 표시됩니다. 목록 썸네일 이미지들은 흑백(그레이스케일)로 표시되며, 마우스 오버를 하면 컬러로 변하면서 110% 큰 이미지로 확대됩니다. 모바일에서는 스크롤되면서 현재 폰 안에 보이는 이미지만 컬러보 확대되어 보입니다. 썸네일 이미지 크기는 ..
반응형 그리드 1단 940 티스토리 스킨 배포합니다. 고정형 너비를 원하는 분이 있어서 앞서 배포된 반응형 그리드 1단 스킨을 레이아웃 너비를 940px 로 고정해서 변형을 준 스킨입니다. 컬러를 최대한 배제하고 미니멀하게 보일 수 있도록 몇몇가지 튀는 부분을 개선했습니다. ->너비 100% 이전 스킨 보기 변경된 사항들은 다음과 같습니다. 글 목록 썸네일 제목을 1줄로 고정.글 목록 글 내용 미리보기 줄 수를 4줄로 고정(모바일은 기존 2줄에서 4줄로 고정)글 목록 제목과 내용 줄수..
반응형 포토갤러리2 티스토리 스킨 배포합니다. 메이슨리로 제작한 포토갤러리 스킨입니다. 브라우저 너비가 변경되는데 따라 자동으로 한행에 표시되는 썸네일 갯수가 조정됩니다. 이미지만 압축적으로 여백없이 모아서 보여주고, 이미지 위에 마우스 오버를 하면 포스트 썸네일 제목과 텍스트가 보이는 형태입니다. 모바일에서는 목록을 스크롤하면 현재 화면 가운데에 위치한 썸네일만 제목과 텍스트가 자동으로 보입니다.알림!-------------------메이슨리 기반의 포토갤러리 스킨은 글에 첨부된 이미지가..
반응형 포토갤러리 티스토리 스킨1 배포합니다. 메이슨리 자바스크립트 라이브러리로 제작한 포토갤러리 티스토리 스킨입니다. 웹브라우저 너비에 따라 1행에 표시되는 썸네일의 갯수가 자동 조정됩니다. 행당 표시되는 썸네일 갯수가 변하는데 따라 애니메이션이 되면서 레이아웃이 조정됩니다. 썸네일 이미지 크기는 300px x 300px 로 고정입니다. 글 제목과 내용 미리보기는 이미지에 마우스 커서를 가져가면 자동으로 표시됩니다. 모바일 화면에서는 화면을 스크롤하는데 따라 현재 표시되는 썸네일의 제목과..
반응형 그리드 1단 스킨2 배포합니다.(Masonry 기반 스킨) 메이슨리(Masonry) 기반으로 반들어진 반응형 티스토리 스킨입니다. 브라우저 너비가 바뀌면 목록의 썸네일들이 애니메이션 되면서 레이아웃이 변경됩니다. 썸네일 이미지 가로 너비는 300px 입니다. 포스트 원본 이미지의 가로/세로 비율이 유지된 채로 썸네일 이미지가 생성되기 때문에  세로로 긴 이미지를 타이틀 이미지로 자주 사용하는 경우 보기좋은 메인 화면을 만들 수 있습니다. 스마트폰 세로 보기로 촬영한 사진을 포스팅하기 좋은 스킨입..
반응형 그리드 1단 레이아웃 티스토리 스킨 배포합니다. 단정하고 심플한 사진 중심 블로그를 위한 반응형 스킨입니다. 컬러 사용을 최대한 배제했고, 사이드바 메뉴와 검색 기능을 히든으로 감춰서 최대한 심플한 느낌을 낼 수 있도록 했습니다. 메인 썸네일 목록의 그림자 효과를 빼려면  CSS파일(style.css)의 264, 265, 266 행을 삭제하면 됩니다. 사이드바 모듈 갯수는 4개단위(4개, 8개, 12개)로 표시가 되도록 하는 것을 추천합니다. 레이아웃 구조상 브라우저 크기가 줄어드는데..