demun(대문블로그)

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

CSS3가 많이 보편화 됐습니다. 익스플로러만 사용하지 않는다면 거의 모든 브라우져들이 html5와 CSS3를 많이 지원합니다. 이번에는 웹폰트를 활용해서 버튼을 만들고 아이콘까지 포함되는 방법을 알아보겠습니다. 이것은 이미지없이 CSS 코드만으로 버튼을 만들고 아이콘까지 적용하는 방법입니다. 완성작을 한번 보여드리겠습니다. 먼저 html 마크업은 아주 간단합니다. 아래와 같습니다. Download 다음은 CSS 코드입니다. body { width: 500px; margin: 200px auto; background: #666; } .button { width: 450px; height: 100px; line-height: 100px; color: #333; text-decoration: none; fo..

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

티스토리에서는 상단의 따옴표를 클릭하면 한 영역을 인용문형태로 만들수 있습니다. css 에서도 blockquote 를 처리하는 코드가 있는데 이걸 이미지가 없이 CSS 코드만으로 그럴싸하게 만들수 있습니다. 코드는 아래와 같습니다. blockquote { padding-top: 20px; overflow: hidden; line-height: 150%; color: #454545; } blockquote:before { display: block; float: left; margin: 10px 15px 0 0; font-size: 100px; content: open-quote; color: #bababa; text-shadow: 0 1px 1px #909090; } blockquote:after { c..

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

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

여러분은 css4를 들어보셨나요? 아직 css3도 익히지 못했는데 벌써 css4가 초안이 발표되어서 외국에서는 한참 논의중이군요. 자세한 것은 W3C의 초안을 보시면 되는데 역시 영어의 압박이 있습니다. 관련 주제들도 전부 영어라 뭔말인지 모르겠네요.... W3C 의 선택자에 대한 CSS 4 초안 보기 선택자를 보면 자주 보면 $ 도 나옵니다. $E>F 자식요소 F를 기반으로 부모요소 E의 스타일을 허용한다는 뜻이라는데 상속이 아니라 꺼꾸로 올라가는거 같네요....저도 영어라 잘 모르겠습니다. 또 로컬컴에서의 링크와 외부 도메인으로 넘어가는 링크를 구분하는것도 있습니다. Location Pseudo-Classes - :any-link and :local-link 참조연결자인 :matches 도 있는데요...

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

아이콘은 이제 까지 모두 이미지로 배경처리하고 hover 처리하면서 보여주곤 했었습니다. 하지만 이건 이미지가 하나도 없는 단순이 CSS코드만으로 아이콘을 표현합니다. 원문은 Pure CSS social medial icons 라고 합니다. 링크를 클릭하시면 원문을 보실 수 있습니다. 데모페이지는 보기 아래 이미지를 보시면 이해가 가실겁니다. html5이다보니 익스플로러는 지원하지 않습니다. 그래도 IE 8 정도만 되고 거의 정상적으로 보이더군요. HTML 마크업은 비교적 단순하며 아래와 같습니다. Facebook Twitter RSS Flickr Delicious LinkedIn Google Orkut Technorati NetVibes CSS 파일은 내용이 워낙 길어 블로그에서는 생략합니다. 테스트로..

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

jquery mobile 에는 jquery.mobile.css 가 자동으로 포함되어 다섯가지 테마를 제공하고 버튼이나 아이콘도 포함되어 모바일에서 보기좋게 설정을 알아서 해줍니다. 따로 스타일을 설정하지 않아도 다 알아서 해주죠. 그중에 아이콘과 버튼의 스타일이 맘에 들어서 가지고 와서 조금 만쳐봤습니다. 현재 jqm홈페이지에서는 1.0을 배포하고 있습니다. zip파일로 제공하는데요. 거기에 이미지와 css 관련 자료는 다 있습니다. jquery mobile 의 버튼은 a, b, c, d, e 이렇게 다섯가지를 기본으로 제공합니다. 그중에서 맘에 드는것은 바로 아이콘입니다. 하나의 이미지의 png 파일을 backgrpund-position 을 이용해서 배치를 합니다. 요넘을 블로그에서 어떻게 사용해볼까하..

퍼블리셔/css2011. 12. 16. 19:02

현재 그라데이션은 내용이 상당이 많습니다. 각 브라우져마다 지원하는 현황이 다르기 때문입니다. 또한 정보공유가 쉽지 않아 현재 딱 뭐라 말하기는 어렵지만 현재 지원하는 현황을 위주로 써 나가겠습니다. 수정 사항이 있으면 알려주시면 수정하겠습니다. 그라데이션을 얘기하려면 벤더를 먼저 이야기 해야 합니다. CSS 3가 공식으로 표준안이 발표되기전부터 각 브라우져들은 브라우져에 맞게 CSS 3를 지원 했습니다. 벤더 프리픽스(vendor prefix)라고 해서 각 브라우져에서 새로운 기능을 추가하고 시범적으로 운영하기 위함입니다. 이 벤더 프리픽스는 핵이 아닙니다. 이는 나중에 공식속성이 나오면 지원하지 않을 가능성이 많기 때문에 벤더 프리픽스를 먼저 선언하고 뒤에 공식(?) 속성을 선언하는것이 좋습니다. 각..

퍼블리셔/css2011. 12. 16. 18:53

-o- 는 오페라 브라우져의 벤더 프리픽스 입니다. 각 브라우져에 대한 벤더 프리픽스는 -webkit-gradient 에서 확인 할 수 있습니다. 오페라는 원형 그라디언트에 대해서는 문서화하여 정확하게 나와 있는데 선형 그라디언트에 대해서는 좀 모호하게 나와 있습니다. 문서의 링크를 먼저 알려드리고 시작하겠습니다. 다양한 예제와 정확한 원문이 있으니 참고하시기 바랍니다. 오페라 원형 그라디언트 문서 바고가기 , 선형 그라디언트 문서 바로가기 그래서 일단 원형 그라디언트에 대해서 이야기 합니다. -o-radial-gradient 원형 그라디언트 글 보기 -o-radial-gradient 우선 원형 그라디언트의 구문을 보겠습니다. 1. position 위치. 위치는 원형 그라데이션이 어느 위치에 있는지를 지..

퍼블리셔/css2011. 12. 16. 08:00

css3 의 멋진 기능중 하나는 바로 그라데이션입니다. 이미지가 없어도 코드 몇개로 그라데이션을 만들수가 있지요. 뿐만 아니라 이제는 포토샵이 아니더라도 멋진 버튼도 만들수 있습니다. html5가 아니더라도 그리고 꼭 웹표준 브라우져가 아닌 IE 라도 자바스크립트를 이용한다거나 필터를 이용하면 만들수 있긴 합니다. 그러나 css3만큼 편하고 좋지는 않지요... 그중에서 css3를 이용해서 그라데이션을 만드는 방법을 알아보겠습니다. 사실 그라데이션에는 많은 글이 있습니다. 두개의 글을 쓰다가 너무 전문적이고 긴글이라 다시 씁니다.^^; 먼저 벤더 프리픽스에 대해서 안다고 가정하고 시작합니다. 만약 모르시면 이전글을 참고하세요. 참고링크 text-shadow 텍스트 그림자 box-shadow 박스 그림자 웹..

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

CSS3에서 box-shadow 속성은 박스에 하나 이상의 그림자를 줄 수 있는것을 말합니다. 박스 안쪽에도 줄 수 있고, 바깥쪽에도 줄 수 있습니다. 바깥쪽에 줄경우 border 의 바깥쪽에만 그려지게 됩니다. 안쪽에 줄경우 padding 영역 안쪽에만 그려지게 됩니다. 브라우져 지원 여부 box-shadow의 문법은 4개의 길이값과 색상, 그리고 옵션인 inset 키워드를 허용합니다. 생략할 경우 바깥쪽으로 그림자가 그려지게 됩니다. 길이값은 상대단위 값과 절대단위 값을 모두 사용할 수 있습니다. 예: em, ex, px, in, cm, mm, pt, pc 수평거리, 수직거리, 흐림정도, 확장거리 보기 1. X축 수평거리. X축 수평거리는 첫번째 항목에서 지정합니다. 위처럼 정수를 사용하면 오른쪽으로..