💸원 and beyond

데스크탑 브라우저, iPhone, iPad 모바일 브라우저 등에 스타일시트를 구분하기 위한 미디어 쿼리(Media Queries)를 Andy Clarke씨가 정리했습니다. 속성으로 구분하는 방법과 파일로 구분하는 두가지 방법을 모두 포함합니다. [출처-파이어준] 추가적인 수정은 계속 내가~[출처] 디바이스별 미디어쿼리(media queries) 정의 정리|작성자 냐비 속성으로 구분/* 스마트폰 가로+세로 */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px){ } /* 스마트폰 가로 */ @media only screen and (min-width : 321px) { } /* 스마트폰 세로 */ @media o..

두가지 입니다. 위 두가지 소스도 문제가 있는데 도메인을 사용하신분의경우 문제가 될수있습니다. 일단, 이경우 head 상단에 붙을경우 소스가 보여지게되는데

http://jqueryui.com/easing/

브라우저마다 input file은 제각각 다르게 보임.CSS 와 Jquery로 input file 스타일을 바꾸는 소스 아래 첨부파일은 간단하게 소스만 정리 아래 주소는 원래 소스 URLhttps://github.com/alterebro/jQuery.NiceFileInput.js

[jquery] 간단한 슬라이드 [반복 loop X] next 누르다가 끝으로 가면 더이상 next로 가지 않음.처음도 마찬가지 previous 누르다가 처음으로 오면더이상 previous가 작동하지 않는다

레이어 팝업 소스 오늘 하루 이 창을 열지 않음 [닫기] 오늘 하루 이 창을 열지 않음 [닫기]

사이즈에 따른 반응형 스타일링 responsive3 .box { width: 25%; height: 300px; background: orange; float: left; } @media (min-width: 401px) and (max-width: 800px) { .box { width: 50%; } } @media (max-width: 400px) { .box { width: 100%; } } A B C D

Posted by 서 지수 in 배움터 - 열공on Mar 31st, 2014 태블릿 PC, 스마트 폰 등 모바일 기기의 이용이 늘어나면서 모바일 웹에 대한 관심이 많아 지고 있습니다. 사용자들은 같은 웹 컨텐츠를 이용 하더라도 PC와 모바일 기기에서 동등한 서비스를 제공 받기를 원합니다. 이에따라 화면 크기의 제약사항과 단말기의 기능 속성에 따른 고려사항이 생겼지만 그렇다고 여러 종류의 웹(url)을 만들 수 없습니다. 그에 대한 대응 방안으로 반응형 웹이 뜨고있습니다. 반응형 웹(Responsive Web) 그렇다면 반응형 웹이란 무엇일까요? 쉽게 말해 디바이스 종류에 따라 웹페이지의 크기가 자동적으로 재조정 되는 것을 말합니다. 어떠한 환경에서도 그에 맞게 사이즈가 변화되어 사용자가 보기 편리하게 ..

Click here to toggle visibility of element #foo This is foo 클릭해서 보여주고, 다시 클릭하면 숨기는게 가능한 js 출처 :: http://blog.movalog.com/a/javascript-toggle-visibility/

1. 부드럽게 올리기 Go Top 2. 간단 1. Go Top 2. Go Top

블로그를 꾸미다 보면 네이버 블로그야 기본적으로 나눔고딕을 PC에 설치만 하면 포스팅할 때 나눔고딕이나 나눔바른고딕으로 지정해서 발행할수 있지만 티스토리는 얼마전까지만 해도 웹폰트로 변환하고 업로드 해야되는 불편함이 있었는데요. http://www.google.com/fonts/earlyaccess 나눔붓글씨 웹폰트 @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css); font-family: 'Nanum Brush Script', cursive; 붓글씨와 펜글씨까지 웹폰트로 적용가능 한 것 보고 깜작 놀랐습니다. 나눔고딕 웹폰트 @import url(http://fonts.googleapis.com/earlyaccess/na..

나눔고딕 폰트는 다른 웹폰트들처럼 구글을 사용하면 편리한데, 사용법 : http://www.google.com/fonts/earlyaccess 최근 새로 나온 나눔바른고딕은 아직 포함 안된건지??여튼 이제는 바른고딕이 더 예뻐보여서!!^^ css 파일에 추가 @font-face { font-family: 'NanumBarunGothic'; src: url('NanumBarunGothic.eot'); url('NanumBarunGothic.woff') format('woff'), url('NanumBarunGothic.ttf') format('truetype'), font-weight: normal; font-style: normal;}@font-face { font-family: 'NanumBarunGo..

네이버 NanumBarunGothic(나눔바른고딕) 폰트를 웹폰트로 변환하여 홈페이지에 적용했다. 개발자들이 코딩 완성하면 이런 기분이겠구나. 다 해서 한 여섯 시간 이상 투입한 것 같다 http://onlinefontconverter.com/위의 사이트에서 특정 폰트를 웹폰트로 변환시킨다. 나눔바른고딕을 예로 들자면 나눔바른고딕 TTF 혹은 OTF 파일을 받으면 된다. 폰트 설치가 프로그램 설치형식이라면 제어판>글꼴에 가면 원본 파일을 찾을 수 있다. 혹여나 저작권 이슈로 논란이 될 수도 있으니 잘 확인해보고 사용하는 것이 좋을 것이다. 이 홈페이지에서 eot, woff, svg, otf 네 가지 형태로만 변환해서 개인 FTP 혹은 홈페이지에 업로드 하면 된다. 간편하게 font 폴더를 하나 만들어서 ..