demun(대문블로그)

퍼블리셔/css2012. 1. 20. 06:00

CSS만으로 사선을 만드는 방법을 알아보겠습니다. 원글은 여기 입니다. 영어로 되어 있으니 제가 쉽게 설명을 해드릴게요. 이러한 형식은 티스토리에서 서식으로 만들어서 사용해도 좋을것 같습니다. 일단 html 마크업은 아래와 같습니다. 스타일이 포함되지 않은 html입니다. 박스 제목 안녕하세요.! P블럭 입니다. 그다음 스타일을 지정합니다. body { background: #e3e3e3; font-family: "나눔고딕",sans-serif; width: 400px; margin: 100px auto; } a { padding: 10px; text-decoration: none; color: white; font-weight: bold; display: block; border-right: 30px ..

티스토리/티스토리초대장2012. 1. 19. 17:32

이전에 초대장을 배포하고 남은 것이 있습니다. 신청해주세요. 어떤 블로그를 하실건지와 이메일 주소를 댓글로 알려주세요. 비밀글에 체크하세요. i n v i t a t i o n 티스토리 초대장 + 남은 초대장 수 : 33 안녕하세요! 티스토리에 보금자리를 마련하시려는 여러분께 초대장을 배포해 드리려고 합니다. 나만의, 내 생각을, 내 기억을 담는 소중한 블로그를 만들고 싶다면 티스토리로 시작해보세요! 티스토리 블로그는 초대에 의해서만 가입이 가능합니다. 원하시는 분은 댓글에 E-mail 주소를 남겨주시면 초대장을 보내드립니다. 남겨주실 때에는 꼭 비밀댓글로 남겨주세요! 초대장을 보내드리고 바로 개설하시지 않으신 분들은 초대장을 회수할 수도 있으니 바로 개설해주세요! Yes 이런 분들께 드립니다! 1. 다..

퍼블리셔/html2012. 1. 19. 06:00

html4 도 마찬가지지만 html5에서도 브라우져 호환성을 위해 스타일 시트를 초기화합니다. 이는 초기화보다도 재설정이라고 해야 맞는 표현인것 같습니다. 이전에 소개했던 html5 사이트에서 제공하는 스타일시트를 그대로 사용하면 됩니다. http://html5boilerplate.com/ 에서 제공하는 스타일 시트 코드를 읽을줄 알면 모든 주석을 제거하고 스타일 시트를 분기해서 사용하면 좋겠습니다. 또 한군데는 html5용 재설정 스타일코드를 제공합니다. HTML5 Reset Stylesheet - html5doctor.com 에서 제공하는 코드입니다. html 이나 xhtml 에서는 에릭마이어의 스타일 초기화 코드를 사용해도 좋습니다. 저는 이걸 사용하거든요. Eric Meyer’s CSS reset..

티스토리/스킨변경제작이력2012. 1. 17. 20:52

1단 스킨을 만들때 적용했던 따라다니는 플로팅메뉴를 사이드바형식으로 적용했습니다. 사이드바는 전부 하단으로 내렸습니다. 사이드바도 플로팅 메뉴로 사용할 수 있게끔했지만 항상 따라다니기 때문에 높이제약이 있어 사이드바 메뉴 한두개 정도만 적용이 가능합니다. 많이 적용하면 보이질 않아요.... 플로팅 메뉴를 사이드바에 구성한것은 온오프믹스 사이트나 기타 신문사 사이트에 보면 징글징글하게 광고가 따라다니죠....ㅎㅎㅎㅎ 이걸 착안으로 한번 만들어 봤습니다. 광고야 나중에 떼면 되니까요.... 여기서 신경을 쓴것은 티스토리는 상단에 tistorytoolbarid 라는 메뉴가 있습니다. 요걸 아예 위에 배치하는 장소를 마련했습니다. 왼쪽으로는 소셜아이콘으로 배치를 했지요. 상단에 아이콘과 사이드바의 아이콘은 하나..

티스토리/스킨배포2012. 1. 17. 06:00

이전에 제작한 스킨 demunWhite1Col 은 애초부터 레이아웃 해상도를 변경하기 좋게 코드를 짯습니다. 제가 개인적으로 구글 애드센스를 달기좋게 본문너비를 730px 로 맞추어서 분명 다른분들도 있을거라 생각하고 레이아웃을 수정하기 좋게 만들었지요. 730px 가 본문너비로 적은것은 아니지만 1단 스킨이라면 남는 공간이 있지요. 그래서 플로팅 메뉴를 만들었지만 역시나 더 넓게 사용하고자 하는분들에게 필요한 해상도 레이아웃을 만들었습니다. 두가지 입니다. 1024의 해상도에서 사용하는 CSS 와 1280의 해상도에서 사용하는 CSS 이렇게 두개입니다. 각각의 해상도에는 1024css 와 ie7.css 이렇게 두개가 필요합니다. ie7이하 특히 ie6까지 호환하기 위해 수정이 필요하죠. 즉 1024해상..

티스토리/스킨배포2012. 1. 16. 14:00

이전에 만들었던 스킨을 레이아웃만 조정해서 이번에는 1단 스킨을 만들었습니다. 1단스킨은 사이드바가 없는 관계로 옆이 아무래도 허전한 느낌이 듭니다. 이점이 1단 스킨의 단점이기도 하지요. 그래서 이번에는 그 부분을 보완하기위해 플로팅메뉴(스크롤하면 따라다니는 메뉴)를 추가했습니다. 이 플로팅 메뉴도 선별해서 아주 가벼운것으로 적용했습니다. jQuery 로 적용된것들도 많은데 순수 자바스크립트로만 구성된 플로팅메뉴로써 가벼운것으로 적용을 했습니다. 여기에는 위로, 아래로 이동하는 링크와 광고를 넣어서 미리보기를 만들어봤습니다. 기본글꼴로 나눔고딕을 사용하며, 나눔고딕이 설치되어 있지 않을경우 웹폰트로 나눔고딕으로 보여지게 했습니다. 이전과 마찬가지로 black.css 주석만 제거하면 바로 블랙테마로 손쉽..

퍼블리셔/html2012. 1. 13. 06:00

단한번의 클릭으로 html5 템플릿을 만들어주는 사이트를 알려드립니다. 이전에 html5 상용구를 사용해서 템플릿을 제공하는 사이트 html5boilerplate 를 소개한 적이 있습니다. 여기서는 3가지의 스타일에서 골라 다운로드를 받아서 사용하면 됐습니다. 마찬가지로 initializr 도 3가지 스타일대로 템플릿을 제공해주고 있습니다. 홈페이지 => http://www.initializr.com/ 제목은 1초 기능 템플릿이라고 해서 가장 간단한 템플릿을 말합니다. 이것을 받아서 사용해도 됩니다. 제가 다운로드 받아서 보니 간단해도 있을것은 다 있습니다. 미디어쿼리 @media 까지 적용되어서 작성되어 있습니다. 고급 사용자가 사용하는 일분짜리 템플릿은 클릭하면 다운로드가 바로 되는것이 아니라 고급사..

퍼블리셔/기술2012. 1. 12. 20:48

미국은 ie6이 1%이하라는 소식이 있군요. 데이터 상으로 이제 ie6은 미국과 작별인사를 했습니다. ie6은 정말 힘들게합니다. 개발자나 디자이너 퍼블리셔....등등 힘든 분야의 사람들이 한둘이 아니죠... 사용률에 대한 데이터는 ie 6 countdown 이라는 사이트에서 볼 수 있습니다. 우리나라는 아직 7.2%라고 나오지만 제가 알기로는 두배이상 되는걸로 알고 있습니다. 조만간 크로스 브라우징할때 IE6은 신경 안쓸날이 오겠군요. 솔직이 ie6 은 정말 아닙니다. 그리고 ie7도 아니죠... 모든 사용자들이 최소한 ie 9이상을 써야 좋습니다. 그럼 거의 땅짚고 헤엄치기 수준으로 레이아웃을 제작할 겁니다.

티스토리/스킨배포2012. 1. 10. 06:00

demunWhite 스킨 배포에 대한 글을 수정합니다. 2단과 3단 스킨을 같이 배포해서 글을 분리했습니다. 여기서는 demunWhite 2단 스킨에 대한 소개와 공통적으로 적용된 특징에 대해서 이야기 합니다. 우선 이번 demunWhite 의 스킨은 종류가 3가지 입니다. 그리고 각각 2가지 테마를 가지고 있습니다. 화이트, 블랙 테마는 화이트가 기본입니다. 이름을 정할때 다른 스킨들도 화이트라는 이름이 많아서 저는 구별하기위해 demun 이라는 이름을 붙였습니다. 그래서 기본 이름은 demunWhite 입니다. demunWhite 의 특징들을 소개합니다. 1. 가볍습니다. 이미지를 최소화할려고 노력하였고 이미지 없이 제작하려하다보니 너무 밑밑해서 아이콘 이미지를 넣었습니다. ie6 을 감안해서 모두 ..

퍼블리셔/기술2012. 1. 8. 06:00

블로그나 홈페이지를 운영하다보면 코드를 작성할 일이 있습니다. 저의 경우도 html 이나 css 등 코드를 적을 경우가 많이 있습니다. 구문강조도구는 티스토리에서도 설치를 해서 사용하기도 하고, 다른 사이트에서 만든것을 사용하기도 합니다. 이전에 소개했던 온라인 구문강조도구를 비롯해 여러군데가 더 있어서 소개합니다. 이 소개하는곳은 티스토리에 직접 설치하지 않고 온라인으로 바로 사용하는 곳입니다. 두곳은 삭제했습니다. 3. pastehtml.com 여기는 markdown 까지 지원한다는군요.다른곳에 비해 html 까지 잘 지원합니다. 하단에 보시면 html 이나 markdown 등을 선택하는곳이 있습니다. 4. pastesite.com 구문강조 기능뿐만 아니라 비밀번호등을 넣을수 있어 보호를 할 수 있습..