벌써 티스토리 반응형스킨 제작기 시리즈의 네번째 포스팅이네요. 시리즈명 앞에 "좌충우돌"이라는 단어를 붙여야 할까봐요. ㅋㅋ 지난 시간에 HTML과 CSS로 처음에 우리가 디자인한 레이아웃을 만들어봤는데요. 일반적인 홈페이지를 만들땐, 이렇게 Brackets 프로그램이나 기타 웹디자인 프로그램으로 레이아웃을 짜나가면 되는데, 티스토리는 조금 어려운 점이 있더군요. 그 이유는 바로 티스토리에서 제공하는 치환자 때문인데요. 의 형태로 구성된, 티스토리에서 제공하는 변수 같은거라고 이해하시면 되요. 암튼, 이 치환자라는 녀석 때문에, 그리고 하나의 HTML파일에 모든 페이지를 구성해야한다는 특이성때문에 티스토리 스킨을 만드는 작업은 블로그 관리자 페이지의 HTML/CSS 편집 기능을 이용해야 되겠더라구요. 그..
오늘 소개해드릴 CSS3 속성은요, box-shadow입니다. box-shadow 는 DIV같은 박스에 그림자 효과를 주어서 입체감을 표현할 수 있도록 해주는 속성인데요. 이 속성만 잘 사용해도, 밋밋한 스킨을 좀더 세련되게 꾸밀 수 있어요. 그럼 box-shadow에 대해서 알아볼까요? 지원 브라우저 box-shadow는 IE8 이하의 브라우저를 제외한 모든 브라우저에서 지원되는 기능입니다. 아래 표를 보시죠. CSS 문법 (Syntax) box-shadow: none | h-shadow v-shadow blur spread color | inset | initial | inherit ; none box-shadow의 기본값은 "none"입니다. 즉, 기본적으로 box-shadow가 적용되지 않는다는 ..
덥고 습한 날씨가 계속되니 몸이 나른하고 기운도 없고 입맛도 없네요. 아침에 일어나 오늘은 뭘 먹을까 고민하다가 입맛 없을 때 먹으면 딱 좋은 밥도둑 강된장을 만들어 보았어요. 반찬도 하기 귀찮아서 덮밥처럼 먹기위해 야채와 두부를 약간 크게 썰어 만들었지요.^^자!! 그럼 시작해 볼까요? 재료준비 3~4인 기준주재료 : 양파 반개, 감자 반개, 애호박 1/3, 두부 한모, 청양고추 1개양념 : 된장 3T, 고추장 1T, 고추가루 1T, 올리고당 1T, 멸치육수 1컵반(종이컵 기준) 재료사진을 찍고 두부를 썰다가 애호박을 빠뜨렸다는 생각이 나서 다시 찍었어요. 그래서 두부가 썰린 사진이... *^^* 슈가레시피 감자, 양파, 애호박, 두부는 작은 크기로 토막 썰기해서 준비해 주시고 청양고추는 다져 주세요...
저녁에 남편이 출출해 할 때, 주말 점심 손 많이 안가는 간단한 음식이 먹고 싶을 때 정말 간단히 먹을 수 있는 국수를 소개해 드릴께요. 쯔유에 찍어 먹는 소면이예요. 일본 음식중에 이렇게 쯔유 베이스의 육수에 찍어먹는 라면, "쯔케멘(츠케멘)" 이 있는데요. 라면 대신에 소면을 이용한 요리예요. ^^자!! 만들어 볼께요. 재료준비 소면 1인분, 쯔유 200ml, 물 100ml, 파, 와사비, 김Tip ! 백선생님께서 소면 1인분은 오백원짜리 동전 크기만큼 잡으면 된다고 하셨죠! ^^200ml는 종이컵으로 한컵이면 얼추 맞아요. 슈가레시피 쯔유소스는 쯔유와 물을 섞고 와사비 조금과 파를 넣고 잘 섞어 준비해 주시면 돼요. 소면은 끓는 소금물에 삶아서 찬물로 잘 헹궈 준비해 주구요.Tip ! 소면을 끓일때..
오키나와에 고야참푸르(여주볶음)이라는 전통음식이 있어요. 고야(여주)를 포함한 야채들을 쯔유 양념을 하고 달걀을 뿌려 함께 볶아 먹는 음식이예요. 작년 오키나와 여행을 갔을때 먹어보니 넘 맛있더라구요. 비슷한 방법으로 닭고기로 덮밥을 해 먹으면 맛있겠다 생각해서 한번 만들어 봤는데 역시나 맛있네요.^^ 아이들도 좋아할 것 같아요.자!! 그럼 만들어 보아요. 재료준비 2인분 기준주재료 : 닭가슴살 한덩어리, 양파1/4, 당근 1/6, 파프리카 1/4, 숙주 2움큼, 파 1/2뿌리, 달걀 1개양념 : 쯔유 3T, 진간장1t, 후추, 맛술, 소금 조금, 마늘1t 슈가레시피 달가슴살은 살짝 크게 깍뚝썰기를 하고 후추, 맛술, 마늘, 소금을 넣고 조물조물해 준비해 주어요. 아이가 먹을꺼라면 후추를 조금 덜 넣는게..
Prologue안녕하세요. 오늘은 "티스토리 반응형스킨 제작기" 연재물의 3편 입니다. 지난 시간에 우리는 레이아웃의 기본이 되는 구조를 네모난 상자모양으로 만들어놨었죠? 티스토리 반응형스킨 제작기 - 지난 이야기티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용)티스토리 스킨제작기 (2) - 레이아웃 잡기오늘은 지난시간에 만든 구조를 좀더 레이아웃답게 만드는 과정을 진행할 꺼예요. 혹시 지난시간에 보여드린 기본 레이아웃 디자인 기억하시나요? 기본적인 2단 구성의 레이아웃이예요. 이번 포스팅에선, 우선 위와같은 레이아웃을 만드는 과정을 진행할꺼구요. 글이 너무 길어지지만 않으면, 사이드바의 폭을 고정폭으로 설정하고 본문폭에 가변폭을 적용하는 과정까지 진행해 볼께요. 레이아웃..
이전 포스팅에서 '복날 남은 닭고기로 간편하게 만드는 반찬 닭고기 파무침'에서 식은 닭가슴살로 만들 수 있는 반찬을 소개했었어요. 이번 포스팅은 그에 이은 2탄이라 생각하시면 되는데요. 식은 닭가슴살로 만들 수 있는 냉채예요. 치킨 먹고 남은 닭가슴살로도 가능해요.닭고기로 만드는 또다른 요리 레시피 [작은설탕 Cook/요리] - 영양만점 닭고기피카타 (닭고기전) 만들기 [작은설탕 Cook/반찬] - 복날 남은 닭고기로 간편하게 만드는 반찬 닭고기파무침자!! 그럼 만들어 볼께요. 재료준비 주재료 닭가슴살 한덩어리, 대파 1/2뿌리, 오이 1/4, 당근1/4 깨소스 깨가루 3T, 피넛소스 1T, 고추가루 1t, 설탕 1/2t, 물 2T 슈가레시피 파, 오이, 당근은 가늘게 체를 썰어 준비해 주어요. Tip ..
오늘은 중복이네요. 복날 삼계탕을 끓여 먹고 남은 닭고기(주로 퍽퍽살이겠죠?^^)로 닭죽만 해서 드시나요? 저희 어머님은 아주 간단하게 무쳐서 반찬으로 만들어 주세요. 요게 반찬으로도 맛있지만, 바쁜 아침 간단 아침식사꺼리로도 꽤 괜찮아요.닭고기로 만드는 또다른 요리 레시피[작은설탕 Cook/요리] - 영양만점 닭고기피카타 (닭고기전) 만들기[작은설탕 Cook/요리] - 닭가슴살 깨소스냉채 만들기자!! 그럼 같이 함 만들어 볼까요?^^ 재료준비 주재료 닭가슴살 한덩어리, 파 1/2뿌리양념 소금 1t, 후추, 참기름 1t 맘스레시피 닭가슴살을 먹기 좋게 잘게 찟어주어요. 소금, 후추, 파, 참기름을 넣어 주시구요. 간이 잘 베이도록 팍팍 무쳐주세요. 그럼~~ 정말 초간단한 닭고기파무침 완성!!!! 그릇에 ..
요즘 반응형웹 디자인이 적용된 블로그를 둘러보면, 화면의 가로폭을 조정할 때, 사이드바의 크기는 변하지 않으면서 본문의 너비만 줄어드는 이른바 가변폭 이 설정된 블로그를 많이들 보셨을꺼예요. 저도 최근에 티스토리 반응형 스킨을 직접 만들면서 이부분에서 막히길래 많이 검색을 해보았습니다.우선 해결방법이 적용되기 전의 문제점부터 살펴보죠. 문제점 1 : width 속성에 %로 폭설정 우선 가변폭 설정을 하지 않고 본문과 사이드바의 너비를 퍼센트(%)로 지정해 놓으면, 본문과 사이드바가 겹치지는 않지만, 웹브라우저의 너비에 따라 사이드바의 폭도 늘었다 줄었다 하죠. 하지만 사이드바의 특성상, 폭이 일정하게 고정되는 것이 우리의 목표입니다. 사이드바에는 일정한 크기를 갖는 모듈들이 들어가기 때문이죠. 문제점 2..
안녕하세요. 오늘은 티스토리 반응형 스킨제작기 2탄이예요.지난시간에 웹프로그래밍 도구인 Brackets 를 이용하여 티스토리 스킨제작을 위한 환경설정을 했었죠. 오늘은 우리가 만들 스킨의 레이아웃을 구상해볼꺼예요. ※ 알림 저는 HTML/CSS/JavaScript 등과 관련한 전문지식은 없습니다. 따라서 본 시리즈는 "강좌"가 아니라는 점을 미리 알려드립니다. (좌충우돌하면서 함께 배워나가는 시리즈랍니다. ^^)티스토리 반응형 스킨제작기 - 지난 포스팅 [작은설탕 IT/Blog] - 티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용) 레이아웃 디자인 웹페이지를 만들 때, 제일 먼저 고려해줘야 하는 것이 "홈페이지 디자인을 어떻게 만들까?" 하는 부분입니다. 즉, 웹페이지의..
- Total
- Today
- Yesterday