demun(대문블로그)

퍼블리셔/기술2012. 10. 31. 09:00

float 는 띄우다 라는 뜻으로 css 코드 입니다. 좌우측으로 배치를 할때 사용하는데요. float: left 하면 왼쪽으로 요소를 배치합니다. 특히 레이아웃을 마크업할때 많이 사용합니다. float 문제는 요소를 띄우다보니 float 를 사용한 부모요소가 자식요소의 높이를 몰라 다른 컨텐츠와 레이아웃이 겹치게 됩니다.그래서 float 를 사용하면 반드시 해제를 시켜줘야 합니다. 이전에도 이와 비슷한 글을 쓴적이 있는데요. float 를 해제하는 방법은 여러가지가 있기 때문입니다.float 속성[정렬] IE 해결법 -> http://demun.tistory.com/1889float 를 해결하는 방법 -> http://demun.tistory.com/1932 그럼 오늘은 왜 쓰냐?요것도 업데이트 됐습니..

퍼블리셔/css2012. 10. 30. 09:00

반응형으로 반응하는 웹디자인에서 img 는 어떻게 처리하는지를 알아봅니다. 이전에는 반응형 웹디자인의 조건 글꼴크기와 width 에 대해서 알아보았습니다. 여기서는 img 에 대해서 알아보는데요. 이건 비교적 간단합니다. img 에 대해서 아래처럼 처리하면 됩니다. img { max-width: 100%; } img 뿐만 아니라 비디오나 리치 미디어와 같은 가로 너비가 고정된 엘리먼트에도 동일하게 사용합니다. 그럼 아래처럼 표기하면 됩니다. img, embed, object, video { max-width: 100%; } 이처럼 비교적 간단합니다.문제는 max-width를 지원하지 않는 IE.6 입니다.IE.6에서 max-width 를 지원하게 만드는 방법은 몇가지가 있습니다만 expression필터를..

티스토리스킨수정/스킨수정도와줌2012. 10. 29. 09:00

아래 내용은 메일로 스킨을 수정해달라는 내용을 포스팅한것입니다.스킨 수정은 티스토리 스킨 수정을 대문이 도와줍니다. 를 참고하세요. 스킨 수정내용입니다.1. 본문폭과 사이드바 폭 수정.2. 사이드바 폭을 줄여달라는 요청.본문 : 468, 사이드바 : 262 를 전체적으로 키워 본문 : 690, 사이드바 : 200 으로 수정. 3. 제목이 왼쪽에 있는데 가운데로 옮겨달라는 요청. 4. 댓글이 보이고 안보이고의 부분 수정. 5. 관리자 영역을 사이드바에 똑같은 스타일로 그리고 위쪽에서 여백을 두고 생성해주길 원함. Admin, Write 부분.사이드바 관리에서 관리자 영역 새로 생성 - 사이드바 관리에서 삭제 가능.

티스토리스킨수정/스킨수정도와줌2012. 10. 28. 09:00

다짜고짜 소스 코드를 보내고 왼쪽으로 쏠린다고 바로 잡아달라고 했습니다.ㅎㅎㅎㅎㅎㅎ 내용을 자세히보니 큰 화면폭일때 내용이 왼쪽으로 쏠리는 현상이 있었습니다.하필이면 않좋은 테이블태그를 사용했었습니다. 가운데 정렬을 해드려서 해결했습니다. 해결전 왼족으로 쏠린것을 알 수 있습니다. 왼쪽보다 우측여백이 많이 보이죠. 사진이 큽니다. 위 사진은 해결이 된 부분입니다. 왼쪽과 오른쪽이 똑같이 여백이 있씁니다.

퍼블리셔/css2012. 10. 27. 09:00

반응형 웹디자인의 첫번째 조건인 글꼴 크기를 정하는 방법에 대해서 알아봤습니다. 이제 글꼴 크기를 정했으니 레이아웃에 반영되는 너비 width 를 지정하는 방법에 대해서 알아보겠습니다. 예를들어 아래와 같은 px 로 지정한 css 설정이 있다고 가정합니다. header content sidebar footer 기본만 정했으니 참고하시고 여기서도 타킷 ÷ 컨텍스트 = 결과 공식을 사용해서 width를 반응형으로 수정해보겠습니다. #wrapper { width: 96%; /* 가장큰것이 100%라고 가정하고 96%로 지정합니다. */ margin: 0 auto; } #header { width: 97.9166667%; /* 940 ÷ 960 */ margin: 10px; } #content { width: ..

퍼블리셔/css2012. 10. 26. 09:00

반응형 웹디자인을 적용하려면 제일 먼저 글꼴 크기를 정해줘야 한다. 예전에 방탄웹에서는 키워드를 사용하는 방법을 말했다. 이유는 키워드는 어떤 브라우져에서 봐도 동일하나는 결론이였죠. 하지만 이제는 환경이 좀 변했습니다. 바로 반응형이죠. 브라우져의 크기, 보는 기기의 크기에 따라 웹페이지가 변해야 한다는 점입니다. 그 조건에 가장먼저 적용해야 하는 것이 바로 글꼴의 크기 입니다. 글꼴의 크기에 따라서 컨텐츠의 크기도 달라지고, 여백도 달라집니다. 즉 모든 것이 달라지기 때문에 레이아웃이 변합니다. 기존의 px 로 되어 있는 크기를 em 으로 변환해야 합니다. 그런 어떤식으로 변환해야 올바른 것일까?? 특별히 다른 값을 명시하지 않는 한 모든 최신 브라우져는 디폴트 폰트 크기로 16px 를 사용합니다. ..

퍼블리셔/기술2012. 10. 25. 09:00

부트스트랩의 장점중 하나는 기본 틀이 만들어져 있어서 갖다 쓰기만 하면 된다는 점입니다. 그중에서 드롭다운 형식의 메뉴바입니다. 자세한 내용은 http://twitter.github.com/bootstrap/javascript.html#dropdowns 를 참고하시기 바랍니다. 일단 예제를 한번 보시죠. 어떤걸 말하는지 보시면 알 수 있을겁니다. Project Name Dropdown Action Another action Something else here Separated link Dropdown 2 Action Another action Something else here Separated link Dropdown 3 Action Another action Something else here Sep..

티스토리/티스토리가이드2012. 10. 24. 09:00

부트스트랩 티스토리 스킨에서 태터데스크(첫화면 꾸미기)을 사용할때의 팁한가지를 알려드리겠습니다. 하나의 예제로 http://superzun.tistory.com/ 를 들겠습니다. 오해는 마세요. 방문자수가 늘면 늘었지 줄진 않을겁니다. ㅎㅎㅎㅎ 만약 그냥 사용하시면 아래 이미지처럼 배경이 없이 들어갑니다. 부트스트랩 스킨은 동일한 인터페이스를 가지고 있습니다. 바로 위젯(.widget)을 사용하는데요. 스킨에 기본적으로 스타일이 입혀져 있으니 아래의 코드를 활용해서 사용해보세요. 위젯 - html 제목이 들어가는 곳 내용이 들어가는 곳 첫페이지 꾸미기를 잠시 보자면 아래처럼 제목부분과 내용부분을 분리해서 작성하면 편합니다. 몇번 해보시면 잘 될겁니다. 만약 해도 안된다면 댓글 주세요. 그럼 대략 아래처럼..

티스토리/티스토리초대장2012. 10. 22. 23:49

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

티스토리/스킨배포2012. 10. 22. 22:33

부트스트랩 스킨 자바스크립트에 문제가 있어 업데이트 합니다.이것도 트랙백을 날려주셔서 알게 됐습니다.http://demun.tistory.com/2203#trackback4435504 부트스트랩에서 사용하는 js 와 스킨에 사용되는 js 를 모두 하나의 js 에 포함해서 배포를 했습니다.js 를 압축할때 사용했던 도구는 이전에 설명했던 코드정렬사이트를 이용했는데 확인결과 압축시 코드를 약간 변형시켰습니다. 그래서 다시 YUI 를 이용했습니다.확인결과 정상작동 되었습니다. 자바스크립트는 총 3줄입니다.제일위의 prettify.js 는 코드하이라이팅 기능이 되는 자바스크립트 입니다.블로그내에서 사용하고자 하면 주석을 해제해주세요. 부트스트랩 티스토리 스킨인 Bootstrap_TS_ver.3.2 를 이용하시는..