Web
[CSS] 마우스커서 커스텀
https://jsfiddle.net/Kimara/nnj7L0xc/ Custom Cursors커서 모양을 이미지로 바꿀 수 있다. 모바일용 브라우저, 오페라 에서는 적용 X익스 6이상 O style="cursor: url(smiley.gif), url(myBall.cur), auto" 첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고, 이것도 실패하면 마지막에 설정된 값(auto)이 적용된다. 이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값을 입력하도록 한다.이미지의 크기는 "128 ×128"px 까지 허용되지만, "32 x 32"px 가 적..
[CSS] 뷰포트
뷰포트는 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 된다. 그런데 스마트 기기는 기본으로 설정되어 있는 뷰포트 영역으로 인해 미디어 쿼리가 정상적으로 작동하지 않는 문젝 발생할 수 있다.이러한 문제를 방지하기 위해 뷰포트 메타 태그를 이용해서 화면의 크기나 배율을 조절해야 한다. ※뷰포트 속성 - width device-width, 양수 뷰포트의 너비를 지정한다.- height device-height, 양수 뷰포트의 높이를 지정한다.- initial-scale 양수 뷰포트의 초기 배율을 지정. 기본값은 1이다. 1보다 작은 값을 사용하면 축소된 페이지를 표시하고, 1보다 큰 값을 사용하면 확대되..
[CSS] 미디어쿼리
미디어쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. (IE9 이상) @media [only 또는 not] [미디어유형] [and또는 ,콤마] (조건문) {실행문} @media (min-width:320px) {실행문} => width값이 320px 이상일 때 실행문을 실행 @media (min-width:320px) and (max-width:768px) {실행문} => width값이 320px 이상이고 768px 이하일 때 실행문을 실해 min/max(접두사 구문): min은 최소, 즉 이상이라는 의미고 있고, max는 최대, 즉 이하라는 의미 ※주의사항 - 띄어쓰기 주의. ~and (min-width:320px) {}- mi..
[CSS] reset.css와 normailize.css
브라우저마다 설정되어 있는 기본 스타일의 차이를 없애고 사이트 제작 스타일 설정을 효율적으로 할 수 있도록 리셋 CSS 나 노멀라이즈 CSS를 사용합니다. 리셋 CSS는 모든 스타일을 완전히 초기화하는 것이고, 노멀라이즈 CSS는 유용한 스타일을 보유하고 일부 스타일을 리셋하여모든 브라우저에 기본 스타일을 동일하게 하고 있습니다. 리셋CSS 계열 1. Reset CSS(Eric Meyer's CSS reset) : http://meyerweb.com/eric/tools/css/reset/2. HTML5 Reset Stylesheet : http://html5doctor.com/html-5-reset-stylesheet/3. Tinyreset-tiny CSS reset for the modern web :..
[CSS] font-smoothing
-webkit-font-smoothing: subpixel-antialiased;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; -ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;
[CSS] 컨텐츠 요소를 가운데 오게 하는 방법
컨텐츠 요소를 가운데 오게 하는 방법?반응형을 작업할 때 어떤 요소를 가운데 오게 하는 방법은 상당히 중요하고 방법도 여러가지가 있습니다. 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다. - 부모요소(인라인구조) : text-align : center; line-height: (height값과 동일하게) - 요소(블록구조) : margin:0 auto; line-height: (height값과 동일하게)요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다. - 부모요소 : display:table; - 자식요소 : display:table-cell, text-align:center;..
[제이쿼리] 현재 위치에서 팝업창 가운데로 띄우기
스크롤 바를 내린 상태에서 팝업 창을 띄우면 상단에 팝업창이 생기는 문제가 발생할 수 있다. "top": (($(window).height()-$("#popupDiv").outerHeight())/2+$(window).scrollTop())+"px""left": (($(window).width()-$("#popupDiv").outerWidth())/2+$(window).scrollLeft())+"px" 위 공식을 사용하면 현재 위치에서 가운데에 팝업창을 띄울 수 있다. $("body").css("overflow","hidden");//body 스크롤바 없애기 $("body").css("overflow","auto");//body 스크롤바 생성 body의 overflow를 건드는 이유는 팝업창을 띄운 고정..
[제이쿼리] hover -> .stop(true,true)
*위쎈(http://www.bulgariswissen.com/weissen1707/index.asp)페이지 상단 네비부분 호버했을 때 서브네비가 내려와야 함.처음에 마우스리브를 썼었는데 마우스가 왔다갔다 하는 액션을 다 받아서서브네비가 메롱거림... => 클릭 시 버블링 막아주고, .stop(true,true) 넣어주면 괜찮아진다. 기억하기~! $('#header .gnb .health_nav').hover(function(e){ e.preventDefault(); e.stopPropagation(); $(this).children('a').stop(true,true).addClass('on'); $(this).children('ul').stop(true,true).slideDown(); },functi..
[HTML] View Port(뷰포트 설정)
- 뷰포트란 전체 웹 페이지 가운데 브라우저 창에 보이는 부분을 말한다.- 모바일 브라우저에 대응하는 html문서의 head안에 viewport를 설정한다.- 브라우저와 해상도에 따라 다르게 설정한다. - width=device-width; 가로 화면 전환시 화면에 맞게 페이지 폭이 넓어지게 된다. 쓰지 않을 경우 화면이 폭에 맞추어 확대됨. device-width 옵션은 iPhone OS 1.1.1 이후 적용. - initial-scale=1.0; 초기화면을 해당 비율로 확대하여 보여주는 옵션- maximum-scale=1.0; 확대할 수 있는 최대값 (범위 0~10.0) 디폴트값은 1.6- user-scalable=yes; 사용자가 화면을 확대할 수 있도록 허용 - 등록되는 웹 사이트의 아이콘 지정...
[제이쿼리] 콜백 함수
jQuery 콜백 함수 JavaScript 문은 한 줄씩 실행됩니다. 그러나 효과를 사용하면 효과가 완료되지 않은 경우에도 다음 코드 줄을 실행할 수 있습니다. 이로 인해 오류가 발생할 수 있습니다. 이를 방지하기 위해 콜백 함수를 만들 수 있습니다. 콜백 함수는 현재 효과가 끝난 후에 실행됩니다.