demun(대문블로그)

퍼블리셔/css2014. 4. 16. 09:14

반응형으로 작업을 해보신분들은 아마도 아실겁니다. 아이폰의 경우 뷰포트가 변경이 되면 자동으로 폰트 크기를 조절합니다. 이걸 방지하는것이 text-size-adjust 입니다. text-size-adjus 는 4가지 속성을 사용할 수 있습니다. 1. auto html { -webkit-text-size-adjust: auto; } 화면의 폭에 맞게 텍스트의 크기를 자동으로 조절한다. 자동으로 조절한다는것은 디바이스의 렌더링이 다르다면 다르게 렌더링이 되므로 추천하는 방식은 아니다. 2. none html { -webkit-text-size-adjust: none; } 텍스트의 크기를 자동으로 조절하지 말라는 뜻이다. 대체적으로 많이 사용하는 방법이다. 일반적으로 body 의 폰트크기를 설정하고 미디어쿼리..

퍼블리셔/css2014. 2. 28. 06:00

해외 동영상에 좋은 것이 있어서 따라해 봤습니다.이전에 보았던거지만 실전에서 잠시 사용해볼 기회가 있어 이번에 코드와 동영상을 공유합니다.어떤 코드인지 동영상을 먼저 보시면 이해가 가실겁니다. 코드는 git 사이트에 업로드 해 놓았습니다.참고하세요. https://github.com/demun/demunCode/tree/master/CSS/css3/transform-01 여기에는 webkit 에만 사용하는 속성이 사용됩니다.자세한 webkit 정보는 http://css-infos.net/properties/webkit 에서 볼 수 있습니다.

퍼블리셔/css2013. 7. 18. 23:40

이전에 발행했던 글인데 블로그 스킨에 스타일을 적용했던것을 지금은 현재 글에만 적용을 하였습니다.그래서 다시 발행합니다. 티스토리 본문에서 보여지는 목록 형식을 말합니다. 티스토리에서는 글쓰기 편집창 상단에 보여지는 목록 형식이 있지요. 스킨마다 스타일을 어떻게 적용하느냐에 따라서 보여지는것이 다른데요. 적당한것이 없나 살펴보다 좋은 글이 있어 알려드립니다. 원본 글 -> http://www.red-team-design.com/css3-ordered-list-styles 데모 -> http://www.red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html 이걸 티스토리에서 사용하도록 수정하였고, 특히 에드센스 스킨..

퍼블리셔/css2013. 7. 18. 23:38

이전에 발행된 글이 잘못 발행되어서 수정해서 재발행 합니다. 티스토리에서 본문에 글을 쓰다보면 특별이 강조하고자 하는 글들이 있습니다.그럴때 사용할만한 서식을 찾다가 그림자가 들어간 형태의 박스 형식의 글을 찾았고 티스토리에 적용해 보았습니다.원본 글 -> http://www.red-team-design.com/how-to-create-slick-effects-with-css3-box-shadow 아래는 이미지 입니다. 파일이 잘못 올라가서 수정해서 올립니다. 티스토리에서도 사용이 가능하고 또 저는 에드센스 스킨에 포함해서 사용하려고 수정을 해보았습니다. 박스 스타일 미리보기 less 를 이용하면 각 컬러셋마다 다양한 결과를 만들어낼수 있습니다. 에드센스 스킨은 컬러셋이 여려개다보니 좀더 수정을 해야 합..

퍼블리셔/css2013. 5. 13. 05:00

red-team-design 에서 크로스 브라우징 버튼이 있습니다.이걸 less 파일로 만들어봤습니다. 좋은점은 역시 ie에서도 무리없이 보여진다는 점입니다. 원본 : http://www.red-team-design.com/cross-browser-css-gradient-buttons데모 : http://www.red-team-design.com/wp-content/uploads/2011/01/cross-browser-css-gradient-buttons-demo.html less 의 장점은 아래처럼 복잡한 css 도 간단하게 작성할 수 있다는 점입니다. 파일을 올려드리겠습니다.요것도 스킨에 포함해서 사용하든가, 아니면 서식으로 사용하면 좋을것 같습니다.

퍼블리셔/css2013. 5. 9. 06:00

티스토리 본문에서 서식으로 사용하면 좋을것 같아서 이렇게 만들어 보았습니다. 티스토리 본문에서 사용하면 아주 좋은것 같은 스타일을 찾다가,,,,,,,찾다가 그나마 괜찮은 녀석이 있어 적용해보았습니다. 아래 스타일들은 ie에서 보아도 그리 흉하게 깨지지 않는다는 점입니다. 어떤 형식인지 한번 이미지로 참고하시기 바랍니다. 티스토리 본문에서 사용할려고 를 일부러 사용하였고 h3 의 활용하려고 클래스를 주었습니다. html 코드는 이렇습니다. box1 box2 box3 수정하려면 h3 나 box1 같은 클래스는 필요없겠지요.... 여하튼 이런식으로 작성되었구요. 3가지 스타일을 선택했습니다. 첫번째 스타일을 원본글 -> http://www.cssrex.com/tips-tricks/how-to-create-3d..

퍼블리셔/css2013. 5. 3. 19:40

스킨을 제작하다보니 어지간한 ie 버그는 알고 있어 애초에 피하는 형식으로 작업을 합니다.이번에 드롭다운 메뉴를 만들다가 ie7에만 유독 버그가 있어 이렇게 정보를 공유합니다. z-index 는 우선 가장 먼저 알아야할 점은 가장 위 부모의 index 의 크기 차이로 결정이 납니다.즉 같은 형제끼리 header 와 main 이 있다고 하면 .. .header { z-index: 2; } .main { z-index: 1; } 이처럼 하면 정상적으로 main이 header 위에 올수 없습니다.그런데 여기에 position:absolute 가 온다거나 하면 좀 달라질수 있습니다.또 리스트인 ul li 가 들어가면 또 달라집니다. 역시 머리아픈 ie..... 여기서는 position의 문제. ul li 의 문..

퍼블리셔/css2013. 3. 16. 08:00

css 로만 구성된 에니메인션 드롭다운 입니다. 이전에 한번 소개한것 같은데요.....제가 이번에 에드센스 스킨을 만들면서 이걸 적용해보았습니다. 원본 -> http://www.red-team-design.com/css3-animated-dropdown-menu 현재 원작자의 홈페이지는 sass 로 제작되고, 모바일까지 적용되는것까지 나왔는데. 저는 그것까지는 필요없고 단순이 css 드롭다운이 필요했습니다. 이전것을 애드센스 스킨에 맞추어서 제작하려면 컬러셋을 변경해야만 햇습니다. 즉 재사용이 가능하게끔 여러 컬러셋을 가질수 있도록 해야했죠. 여기에 html5, css3 를 사용해서 미리보기를 하려면 웹표준 브라우져로 보아야만 제대로 보입니다. 크롬, 파이어폭스, 오페라, 사파리 등등..... 예제에 보..

퍼블리셔/css2012. 12. 11. 09:00

반응형으로 이미지와 동영상을 적용하는 방법을 알아보겠습니다. 미디어쿼리를 ie가 지원하지 않기 때문에 자바스크립트등을 적용하는 방법이 아닌 순수 html 과 css 만으로 반응형으로 동작하는 방법을 알아보고, 티스토리 블로그에도 적용이 가능한 방법을 알아봅니다. ie 에서 미디어쿼리등을 지원하는 방법등은 나중에 다시 쓰겠습니다. 이미지가 반응형으로 자동으로 크기가 줄어들고 커지고 할려면 코드는 간단합니다. img { max-width: 100%; height: auto; } 근데 여기에는 한가지 알아두어야 할 점이 있습니다. img 의 최대크기를 100%라고 했지만 이것은 어디까지나 부모의 너비가 최대치입니다. 즉 부모가 너비가 width:500px 처럼 한정되어 있으면 최대 500px 까지만 커지는 겁..

퍼블리셔/css2012. 11. 1. 09:00

css 를 사용하는데 좀더 편하고, 확장할 수 있는 방법이 less 나 sass 를 사용하는겁니다. 관련한 한글로 된 문서는 많이 없는데요. 제가 하나 하나 하면서 추가해볼까 합니다. 그럼 less, sass 이게 뭐냐? css 의 전처리 도구라고 생각하면 됩니다. 아니 좀더 편하게 , 좀더 체계적으로 사용할 수 있게 하는 도구라고 생각하면 될듯 싶습니다. less -> http://lesscss.org/ sass ->http://sass-lang.com/ 몇가지 예를들면 이해가 가실겁니다. 왼쪽이 less 고 우측이 컴파일된 css 코드 입니다. 대략 설명하자면 @gray 에 #333 을 설정하고 p는 @gray 그대로 사용합니다. 그 바로 아래 a 는 p 안에 a 를 말합니다. color 은 @gra..