demun(대문블로그)

퍼블리셔/도구2011. 2. 25. 06:00

버튼을 만드는 방법은 참 여러가지 입니다. html 과 css 를 활용해서 만드는 방법이 있구요. 요즘에는 css 3 를 이용한 방법도 많이 눈이 띄더군요. 헌데 이번에 소개하는것은 단순이 선택만 하면 그럴싸한 버튼을 즉석에서 만들어 주는 사이트 입니다. 사설접고 사이트 주소 날립니다. => http://www.performable.com/buttons/ 버튼 스타일에도 여러가지가 있으니 이것 저것 클릭해보세요. 저는 Transparent 로 선택하고 아래처럼 선택하고 다운로드 버튼을 한번 만들어 봤습니다. Build my Button 을 클릭하시면 이메일로 코드가 옵니다. 회원가입같은거 필요없이 바로 사용할수 있습니다. 메일을 열어보시면 아래처럼 주소가 있을겁니다. 접속해보세요. 그럼 아까 만든 버튼이..

퍼블리셔/도구2011. 2. 25. 06:00

이전글에서 버튼을 만들어 주는 사이트를 소개했습니다. 본문의 a 링크에 스타일이 지정이 되어있지 않으면 간단이 자바스크립트 한줄로 해결이 됐지만 스타일이지정이 되어 있는경우는 중복으로 인해 !important 속성을 따로 추가해주어야 했습니다. 아래방법은 자바스크립트를 사용하지 않고 이미지를 다운로드 받아서 사용하는 방법입니다. 해서 배경이미지주소로 접속을 해보았습니다. 배경이미지 주소 => http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-red.png 다운로드 받았습니다. 그럼 class를 하나 만듭니다. !! 치환자의 경우 ##_치환자_## 는 #\#_치환자_## 로 표시됩니다.!! Download 이글을 드레그해서 ..

퍼블리셔/도구2011. 2. 25. 06:00

1.2편에 이어서 이번에는 서식으로 지정해서 이용하는 방법을 알아보겠습니다. 1편에서 여러개의 이미지름 만들어보세요. 우선 제가 몇개 만들어놓은 이미지를 한번 보세요. 녹색 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-green.png 남색 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/transparent-blue.png 노랑색 긴 라운드 사각버튼 : http://d1nu2rn22elx8m.cloudfront.net/buttons/resources/images/premier-yellow.png 녹색 긴 둥근 버튼 ..

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

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

퍼블리셔/도구2011. 2. 23. 06:00

스킨을 만들거나 자바스크립트 등을 테스트 할때 좋을것 같습니다. 테스트로 제가 현재의 티스토리 블로그 html 과 css 등을 포함해서 해봤습니다. 현재 컴퓨터에서 제작하던 식으로 보여지는 군요. 티스토리 치환자는 서버에서 변환되어서 보여지는것이라 여기서는 그냥 액면 그대로 보여집니다. 간단한 테스트용으로 사용하면 좋을것 같군요. 온라인 미리보기 편집기 사이트 => http://jsfiddle.net 우측에 share 를 클릭하면 다른 사람과 공유할 수도 있습니다. 제작중에 있는 사이트나 코드를 서로 공유하면서 수정할수도 있겠네요. 참고링크 2011/02/20 - [DESIGN/디자인리소스] - 색상도구 사이트[색상표] 2011/02/22 - [DESIGN/디자인리소스] - 웹 색상도구 사이트

퍼블리셔/도구2011. 2. 22. 06:00

이전에 색상도구 , 색상표에 대한 글을 쓴적이 있는데요. 이번에도 좋은 사이트가 있어 소개합니다. 온라인 색상표 사이트 주소 => http://0to255.com 첫번째 대문입니다. 아래 색상을 클릭하면 보다 전문적으로 선택할수 있는 곳으로 안내합니다. 노랑색 계열를 선택해봤습니다. 아주 자세하게 나옵니다. 우측 편으로 랜덤한 색상으로 이동할수도 있습니다. Pick another color 을 클릭하시면 바로 색상을 선택할수도 있습니다. 이전에 소개한 사이트도 참고하세요. 참고링크 2011/02/20 - [DESIGN/디자인리소스] - 색상도구 사이트[색상표]

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

이미지를 처리하는 기법으로는 여러가지 방법이 있는데 하나 하나 짚어보겠습니다. 우선 저장할때 처리하는 방법을 먼지 짚어보겠습니다. 이미지는 용량문제로 .gif 파일을 주로 이용합니다. 이미지 파일을 크기를 떠나서 선명도가 좋기로는 아래와 같습니다. .gif < .jpg < .png 하지만 선명도가 좋으면 좋을수록 용량이 커지는 단점이 있지요. 그래서 .gif 파일을 많이 이용합니다. 또 한가지 투명한 PNG 파일은 ie6 에서 배경이 회색으로 보인다는 단점이 있습니다. 이또한 해결하는 방법으로는 자바스크립트를 이용하곤 합니다. 마찬가지로 투명한 PNG 파일이 ie6 에서 배경이 회색으로 보이는것을 방지하기위해 자바스크립트를 포함하면 그만큼 무거워지는것은 당연한 일이지요. 참고링크 IE6 에서 투명배경을 ..

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

이미지를 처리하는 방법의 결론은 좀더 빠르고 , 가벼운 이미지를 사용하는것입니다. 거기에 접근하는데에 무리가 없어야 한다는 점이죠. 또한 .png 확장자를 이용할때는 ie 6 때문에 투명배경을 사용하지않고 배경색을 입혀서 사용합니다. 배경색을 사용하지 않았을때 ie6 에서 보여지는 것을 예제로 보겠습니다. 아래 이미지중 위의것은 이미지를 만들때 배경색을 입혀서 만든것이고 , 아래것은 배경을 투명하게 해서 만든것입니다. 그리고 ie 6 으로 본것입니다. 물론 다른 브라우져는 똑같이 보여집니다. 이는 많이 사용하는 둥근 버튼의 경우에도 적용됩니다. 한가지 예로 제 블로그에 사용되는 이미지에는 모두 배경색이 적용된다음 그 위에 이미지가 그려진 것입니다. 위의 3자가 만들어진 것을 포토샵으로 보시면 도움이 되실..

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

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

퍼블리셔/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;..