demun(대문블로그)

퍼블리셔/css2011. 12. 9. 06:00

CSS3 의 text-shadow 속성은 지정된 텍스트 블럭에 하나 이상의 그림자를 부여하는 것입니다. text-shadow 속성의 문법은 3개의 길이값과 1개의 색 값을 사용합니다. 예를들어 아래와 같습니다. .class { text-shadow: 5px 5px 5px #333; } 길이값은 절대값과 상대단위 모두 사용할 수 있습니다. 예: em, ex, px, in, cm, mm, pt, pc 자 이제부터 상세하게 text-shadow 에 대해서 알아보겠습니다. 속성과 값에는 어떤것이 있고, 어떤것이 생략이 가능한지 알아보겠습니다. 내용이 길어서 더보기를 사용했으며, 마우스로 클릭해서 내용을 보시기 바랍니다. 브라우져 지원여부 1. X축 수평거리. 수평거리를 나타내는 값은 첫번째 자리에 있는 값입니다..

퍼블리셔/css2011. 12. 3. 06:00

예전에 방탄웹에 대한 언급을 한적이 있습니다. 제가 이책을 보고 상당이 감명을 받은바 배포하던 스킨을 모두 중지하는 결과를 낳았습니다. 그래서 방탄웹이라는 티스토리 스킨을 만들어서 서브 블로그에 적용을 해서 사용해봤습니다. 유동폭과 글자 비례형 디자인으로요...스타일은 방탄웹에서 소스를 그대로 적용해서 티스토리로만 적용을 해보았죠^^ 하나 하나 어렵게 알고 있던 지식들이 이 책에 모두 나열이 되어 있었습니다. 그것도 왜 그런지 이유를 포함하고 올바른 방법까지 제시하면서 글을 썻습니다. 그래서 댄씨더홈(Dan cederhorm)의 글을 몇권 더 읽었고 더불어 박수만씨가 번역을 했는데 그분이 번역한 다른 책까지 모두 읽어 보았습니다. 그러던중.... 댄씨더홈의 블로그를 오랜만에 방문해서 보니 또 다른 책이 ..

퍼블리셔/css2011. 12. 2. 06:00

이전에 이미지없는 네비게이션 메뉴에 대한 글을 언급한 적이 있습니다. CSS3로 멋지게 코딩을 해서 로딩속도 또한 빠르고, 비주얼적인면에서도 상당이 퀄리티가 있어서 소개를 했었습니다. 이동버튼에 관한 글 이미지없는 네비게이션 메뉴 보시면 아시겠지만 상당이 퀄리티가 있습니다. 이것을 티스토리에는 어떻게 적용을 할까요?? 적용을 하기전 먼저 생각해봐야 할것이 있습니다. CSS3로 코딩을 했기에 이전 브라우져에서는 안보여진다는 점이죠. 멋진 IE6,7을 이야기 하는겁니다.^^; 또 한가지 염두해두어야 할점은 티스토리의 카테고리 치환자를 사용할지의 여부입니다. 즉 네비게이션에 티스토리 치환자를 사용할경우 사이드바나 다른곳에서는 사용할 수 없다는 점이죠. 크로스 브라우징이나, 본문에 한번밖에 사용하지 못하는 카테..

퍼블리셔/css2011. 11. 25. 06:00

현재 글 쓰는 시점에 스킨에 적용되어 있는 버튼입니다. 이미지 없이 css3 코드만으로 둥근 형태의 버튼을 만드는 겁니다. 원문보기 => http://www.red-team-design.com/just-another-awesome-css3-buttons 대략 아래처럼 보입니다. 링크는 아래처럼 표시하면 됩니다. Actions Button Add Edit Delete Save Send email Miscellaneous Like Next Favourite Spark Play Social media buttons Follow me Become a fan 버튼과 input 는 아래처럼 표시하면 됩니다. Buttons and inputs Clean button Button with icon Disabled bu..

퍼블리셔/css2011. 11. 24. 06:00

블로그를 하다보면 파일도 첨부하고 링크도 많이 겁니다. 글들이 많다보니 파일과 링크가 그냥 텍스트하고 분간이 안가는 경우가 있습니다. 기본적으로 스킨을 제작하시는 분들이 링크에 일반적으로 색깔을 넣어 표시합니다. 대략 링크에 색깔을 넣으면 아래처럼 표시하곤 합니다. 아래는 예제입니다. a:link{color:#333; } a:visited{color:#333; } a:hover{color:#06C; } a:focus{color:#333; } a:active{color:#333; } 티스토리에는 본문 치환자라는것이 있는데요. 본문에만 적용되게 하고 싶으면 본문만 감싸고 있는 디비젼이 있어야 합니다. HTML 상에서 대략 아래처럼 있다고 가정합니다. [#\#_article_rep_desc_##] 그렇다면 본..

퍼블리셔/css2011. 11. 20. 11:11

이미지없이 에니메니트되는 네비게이션 메뉴가 있어 소개합니다. 원문보기 => http://www.red-team-design.com/css3-animated-dropdown-menu 제가 종종 방문하는 사이트 인데요. css3 로 움직이는 네비게이션 메뉴를 만드는 방법입니다. 원문에 코드가 나와 있기는 합니다만 제가 테스트로 몇가지 수정해보고 다른 브라우져에서는 어떻게 보이는지도 한번 테스트해보았습니다. 일단 html 코드는 아래와 같습니다. 홈 첫번째 folder1 Item 11 Item 12 Item 13 Item 14 folder2 Item 21 Item 22 Item 23 Item 24 folder3 Item 31 Item 32 Item 33 Item 34 folder4 Item 41 Item 42..

퍼블리셔/css2011. 7. 18. 06:00

왼쪽 정렬, 오른쪽 정렬을 하는 방법으로 float 를 사용하곤 합니다. 아마도 가장 많이 사용하는 선택자가 아닌가 싶네요. 그런데 주의 할점이 있습니다. float:left 는 왼쪽으로 띄우고, float:right 는 오른쪽으로 띄웁니다. 문제는 이렇게 float 로 띄울경우 다음에 오는박스가 동일한 크기가 오면 상관없지만 만약 크기가 작을경우 , 그위로 올라타는 경우가 생깁니다. 즉 3번 박스가 원래는 4번자리에 위치해야 하지만 2번 다음에 위치하게 됩니다. 차례대로 정렬이 되지 않는다는 거죠. 2번 박스가 작아도 동일하게 옆으로만 정렬이 돼야 하는데 동일한 크기거나 크기가 클경우는 정상적이지만 만약 크기가 작다면 위처럼 올라타는 문제가 생깁니다. 또하나 float 로 지정을 할경우 그 위부모가 배..

퍼블리셔/css2011. 2. 24. 06:00

CSS3 새로 나온지라 많이들 모르시지요? 저도 잘 모릅니다. 그런데 간단하게 코드를 생성해주는 사이트가 있어 소개합니다. 사이트 주소는 http://css3generator.com/ 입니다. 검색창에 마우스를 클릭하시면 CSS 속성이 나옵니다. 아무거나 선택해보세요. 저는 텍스틀에 그림자를 표시해주는 text-shadow 를 선택해봤습니다. 각 칸에 너비를 넣으면 아래코드에 알아서 표시해줍니다. 색상은 그냥 표시해도되고 클릭하면 색상표가 열립니다. 참고링크 2011/02/20 - [DESIGN/웹디자인] - 색상도구 사이트[색상표] 2011/02/22 - [DESIGN/웹디자인] - 웹 색상도구 사이트 2011/02/23 - [DESIGN/웹디자인] - 웹 디자인 미리보기 사이트

퍼블리셔/css2011. 2. 21. 06:00

조각난 이미지를 병합된 하나의 이미지로 만드는것이 Image Sprite라고 했습니다. 마찬가지로 hover 효과를 다른 이미지가 필요한데요. 이것도 같이 병합해서 하나의 이미지 안에 넣고 사용하는겁니다. 전에 이야기한 타이틀 부분에 대해서 이야기 하겠습니다. 이전글을 안보신분은 보시고 이걸 보시면 더욱 좋습니다. 같은 예제를 사용합니다. =>http://demun.tistory.com/1896 너비가 730이고 높이가 100 인 이미지가 있다고 가정합니다. 우선 html 코드부터 보시죠. [#\#_title_##] css 설정은 아래와 같습니다. #title h1 a{ width:730px; height:100px; background:url(images/button.png) no-repeat 0 0;..

퍼블리셔/css2011. 2. 21. 06:00

이미지 확장자에 대한글과 이미지를 만들때 배경색을 넣어서 만드는 방법을 알아봤습니다. 여기서 배경색을 넣어서 만드는 방법은 png파일을 ie 6 에서 보여질때 다른 브라우져와 동일하게 보여지기 위한 방법이였습니다. 그럼 위의 기법에 대해서 잠깐 알아보겠습니다. Image Replacement : 의미있는 어떤 요소를 이미지로 처리하고 요소에 해당하는 텍스트 넣되 시각적으로는 안보이게 하는 방법입니다.이 기법의 장점은 접근성을 떨어뜨리지 않으면서도 검색엔진으로부터 높은 가중치를 받을 수 있다는 점 입니다. Image Sprite : 이미지 파일을 하나로 합쳐서 배경으로 처리하는 것으로 웹 문서 전송 속도를 높이는 기법 입니다. 자세한 것은 설명을 예를 들면서 이야기 하겠습니다. 예를들어 티스토리의 스킨을 ..