구글맵 오류 해결 하기 만약 부트스트랩으로 만들어진 프로젝트에서 구글맵을 사용한다면, * { box-sizing: border-box; } 사용으로 인하여 화면표시에 약간의 문제가 있을 것입니다. 그 이전에, 이미지에서 max-width 의 사용과 함께 이슈들에 부딪힐 수 있습니다. 다음의 코드는 이러한 모든 문제를 해결해 줄 것입니다. /* 구글맵 캔버스 고치기 * * 부트스트랩의 `box-sizing` 전역 설정을 초기화하기 위해 당신의 구글맵 임베디드를 * `.google-map-canvas` 로 감싸세요. 당신은 선택적으로 당신이 다른 어느 곳에도 * 적용한 경우의 이미지들의 `max-width` 를 초기화하는 것이 필요합니다. * (부트스트랩3 에서는 그러한 작용이 `.img-responsive..
페이지 이동 후에 자동을 페이지가 다운로드 되도록 해 주는 소스 입니다. 아래 자바스크립트를 Html 파일을 하나 생성 후에 삽입해 주면 되는 간단한 작업입니다. 구글 애드센스나 다음애드핏등이 삽입 되어 있는 페이지로 이동되게 한 후 광고를 노출 시키고, 원하는 시간 (예: 5초) 후에 자동으로 해당 파일이 다운로드 될수 있게 만들고 싶을때 유용하게 사용할 수 있습니다. 예를 들어 download.html 이라는 파일을 하나 생성 후 위 코드를 삽입해 주면 5초 후에 해당 파일이 자동으로 다운로드 됩니다. 위 코드에서 download file 부분을 파일 위치로 변경 해 주고 5000 부분이 파일이 다운로드 될 시간 입니다. (예: 3초 = 3000) 5초 후에 페이지를 이동하게 할 수 있도록 변경해서 ..
사이트 제작시 간단하게 활용할 수 있는 버튼 스타일 만들어져 있는 여러가지 버튼 스타일들 입니다. 해당 버튼의 html과 css로 간단하게 가져다 사용할 수 있습니다. https://tympanus.net/Development/CreativeButtons/
미디어 쿼리 반응형 웹사이트 제작시 필요한 미디어 쿼리 입니다. min-width 와 max-width만 필요한 화면 해상도에 맞게 변경하면 반응형 웹사이트 제작시에 유용하게 사용할 수 있습니다. min-width : 321px 디바이스의 화면 사이즈가 321px 이상 부터 적용 됩니다. max-width : 1920px 디바이스 화면 사이즈가 1920px 까지 적용 됩니다. 예를 들어 @media only screen and (min-width : 768px) and (max-width : 1024px) 라고 하면, 디바이스의 화면 사이즈 최소 768px 부터 1024px 까지 해당 CSS를 적용하게 되는 것 입니다. /* Smartphones (portrait and landscape) -------..
기존 구글 폰트로는 나눔고딕을 적용해도 정상적으로 나오지 않습니다. 저 같은 경우는 익스를 아예 사용조차 하진 않지만, 클라이언트가 익스에서 정상적인 출력을 원하는 경우가 종종있습니다. 이런 경우 아래 링크를 임포트 해 주시면 정상적으로 익스플로러 계열의 브라우저에서도 정상적으로 보여 집니다. http://cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css Html문서의 head에 적용 해 줍니다. 사용중인 css 파일에 적용시에는 @import url("//cdn.jsdelivr.net/font-nanum/1.0/nanumgothic/nanumgothic.css");
