'퍼블리셔/css'에 해당되는 글 50건

@font-face kits를 이용하여 버튼 아이콘 만들기-고급팁

퍼블리셔/css2012.01.22 06:00

CSS3가 많이 보편화 됐습니다. 익스플로러만 사용하지 않는다면 거의 모든 브라우져들이 html5와 CSS3를 많이 지원합니다. 이번에는 웹폰트를 활용해서 버튼을 만들고 아이콘까지 포함되는 방법을 알아보겠습니다. 이것은 이미지없이 CSS 코드만으로 버튼을 만들고 아이콘까지 적용하는 방법입니다. 완성작을 한번 보여드리겠습니다. 먼저 html 마크업은 아주 간단합니다. 아래와 같습니다.   <a href="#" class="but..
CSS코드만으로 인용문 blockquote 만들기

퍼블리셔/css2012.01.21 06:00

티스토리에서는 상단의 따옴표를 클릭하면 한 영역을 인용문형태로 만들수 있습니다. css 에서도 blockquote 를 처리하는 코드가 있는데 이걸 이미지가 없이 CSS 코드만으로 그럴싸하게 만들수 있습니다.  코드는 아래와 같습니다. blockquote { padding-top: 20px; overflow: hidden; line-height: 150%; color: #454545; } blockquote:befo..
CSS 만으로 대각선 만들기

퍼블리셔/css2012.01.20 06:00

CSS만으로 사선을 만드는 방법을 알아보겠습니다. 원글은 여기 입니다. 영어로 되어 있으니 제가 쉽게 설명을 해드릴게요. 이러한 형식은 티스토리에서 서식으로 만들어서 사용해도 좋을것 같습니다. 일단 html 마크업은 아래와 같습니다. 스타일이 포함되지 않은 html입니다. <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> &l..
CSS4에 대한 소식

퍼블리셔/css2011.12.23 06:00

여러분은 css4를 들어보셨나요? 아직 css3도 익히지 못했는데 벌써 css4가 초안이 발표되어서 외국에서는 한참 논의중이군요. 자세한 것은 W3C의 초안을 보시면 되는데 역시 영어의 압박이 있습니다. 관련 주제들도 전부 영어라 뭔말인지 모르겠네요.... W3C 의  선택자에 대한 CSS 4 초안 보기 선택자를 보면 자주 보면 $ 도 나옵니다. $E>F 자식요소 F를 기반으로 부모요소 E의 스타일을 허용한다는 뜻이라는데 상속..
이미지없는 소셜 버튼 css3 social icons

퍼블리셔/css2011.12.22 06:00

아이콘은 이제 까지 모두 이미지로 배경처리하고 hover 처리하면서 보여주곤 했었습니다. 하지만 이건 이미지가 하나도 없는 단순이 CSS코드만으로 아이콘을 표현합니다. 원문은 Pure CSS social medial icons 라고 합니다. 링크를 클릭하시면 원문을 보실 수 있습니다. 데모페이지는 보기 아래 이미지를 보시면 이해가 가실겁니다. html5이다보니 익스플로러는 지원하지 않습니다. 그래도 IE 8 정도만 되고 거의 정상적으로 보..
jquery mobile 의 버튼 스타일

퍼블리셔/css2011.12.20 06:00

jquery mobile 에는 jquery.mobile.css 가 자동으로 포함되어 다섯가지 테마를 제공하고 버튼이나 아이콘도 포함되어 모바일에서 보기좋게 설정을 알아서 해줍니다. 따로 스타일을 설정하지 않아도 다 알아서 해주죠. 그중에 아이콘과 버튼의 스타일이 맘에 들어서 가지고 와서 조금 만쳐봤습니다. 현재 jqm홈페이지에서는 1.0을 배포하고 있습니다. zip파일로 제공하는데요. 거기에 이미지와 css 관련 자료는 다 있습니다. jquery ..
-webkit-gradient

퍼블리셔/css2011.12.16 19:02

현재 그라데이션은 내용이 상당이 많습니다. 각 브라우져마다 지원하는 현황이 다르기 때문입니다. 또한 정보공유가 쉽지 않아 현재 딱 뭐라 말하기는 어렵지만 현재 지원하는 현황을 위주로 써 나가겠습니다. 수정 사항이 있으면 알려주시면 수정하겠습니다. 그라데이션을 얘기하려면 벤더를 먼저 이야기 해야 합니다. CSS 3가 공식으로 표준안이 발표되기전부터 각 브라우져들은 브라우져에 맞게 CSS 3를 지원 했습니다. 벤더 프리픽스(vendor prefix)라..
-o-linear-gradient , -o-radial-gradient

퍼블리셔/css2011.12.16 18:53

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

퍼블리셔/css2011.12.16 08:00

css3 의 멋진 기능중 하나는 바로 그라데이션입니다. 이미지가 없어도 코드 몇개로 그라데이션을 만들수가 있지요. 뿐만 아니라 이제는 포토샵이 아니더라도 멋진 버튼도 만들수 있습니다. html5가 아니더라도 그리고 꼭 웹표준 브라우져가 아닌 IE 라도 자바스크립트를 이용한다거나 필터를 이용하면 만들수 있긴 합니다. 그러나 css3만큼 편하고 좋지는 않지요... 그중에서 css3를 이용해서 그라데이션을 만드는 방법을 알아보겠습니다. 사실 그라데이..
box-shadow

퍼블리셔/css2011.12.10 06:00

CSS3에서 box-shadow 속성은 박스에 하나 이상의 그림자를 줄 수 있는것을 말합니다. 박스 안쪽에도 줄 수 있고, 바깥쪽에도 줄 수 있습니다. 바깥쪽에 줄경우 border 의 바깥쪽에만 그려지게 됩니다. 안쪽에 줄경우 padding 영역 안쪽에만 그려지게 됩니다. 브라우져 지원 여부 box-shadow의 문법은 4개의 길이값과 색상, 그리고 옵션인 inset 키워드를 허용합니다. 생략할 경우 바깥쪽으로 그림자가 그려지게 됩니다. ..