본문 바로가기

WEB_TECH

웹페이지에서 나눔고딕 사용하는 방법 다음의 코드를 실행해 봅시다. 이렇게 하면 구글에서 제공하는 웹폰트인 나눔폰트를 링크하게 됩니다.네이버에서 나눔폰트를 무료로 공개했기 때문에 구글에서도 무료로 api를 제공할 수 있습니다.한글은 아마 무료폰트가 나눔폰트가 유일하지 않나 싶네요. 나눔브러쉬나눔고딕나눔고딕코딩나눔명조나눔펜 브라우저에서 실행시켜보면 각각의 나눔폰트로 출력되는 것을 확인할 수 있습니다. 더보기
video.js 플러그인을 알아봅시다. video.js 플러그인을 알아봅시다. video.js는 자바스크립트 라이브러리로서 video태그를 사용해서 손쉽게 사용할 수 있으면서도 멋진 UI로 구현이 되는 플러그인입니다. 브라우저마다 표시되는 video 태그가 일관되지 않아서 어려움이 있습니다. 또 ie8에서는 video태그가 동작하지 않습니다. 이러한 문제를 간단히 해결하는 플러그인이 바로 video.js입니다. 다음은 video.js 홈페이지입니다. http://videojs.com/ 사용하는 방법은 아주 간단합니다. html페이지에서 상단에 를 넣어줍니다. 다운로드 받아서 로컬경로로 해 주어도 됩니다. 그리고 body태그 사이에 이렇게 태그를 넣어주면 됩니다. 이것은 태그빌더입니다. 환경을 웹상에서 생성해 주면 쉽게 태그가 생성됩니다. 친절.. 더보기
익스플로러 하위버전테스트 할 수 있는 프로그램 : IE Tester 다운받기 IE Tester 다운로드 http://www.my-debugbar.com/wiki/IETester/HomePage 다음 경로로 가면 IE구버전 테스트 환경을 제공해 주는 프로그램을 다운받을 수 있습니다. 저는 왠만하면 최신브라우저를 쓰기때문에 IE8 이전 버전의 브라우저가 없습니다.이럴때 아주 유용한 프로그램입니다. 최신버전은 트라이얼버전 같이 날짜제한이 있다고 해서 올드버전(4.11)으로 다운 받았습니다. 설치후 실행해 보았습니다.IE5.5 버전으로 네이버 사이트를 열어보았습니다.이렇게 뜨네요, 각 버전별로 브라우저환경이 다 마련돼 있으니까 테스트하기 정말 좋을 것 같습니다. 더보기
form태그 사용법 이번시간에는 form 태그의 사용법에 대해 알아보겠습니다.form 태그는 데이터를 받거나 입력하는등 기능적인 역할을 하는 태그입니다.주로 서버스크립트와 함께 쓰입니다. 중요하기 때문에 꼭 잘 사용할 수 있도록 배워두어야 합니다. 텍스트 필드disabled는 폼을 불능화시킵니다.readonly는 값을 입력하지는 못하지만 이미 입력되어 있는 값은 서버로 전송됩니다.[사용예] 이름: 비밀번호이런 식으로 작성하면 입력하는 글자가 안보입니다. hidden data화면상에 표시되지 않는 컨트롤을 생성.서버로 전달할 내용이지만 사용자에게 노출되지 않아야 하는 데이터를 넘길때 사용됩니다.서버측언어와 함께 사용되는 기법입니다. textarea여러줄의 텍스트를 입력할 때 사용하는 태그값rows는 입력한 행의 수colss는.. 더보기
meta 태그란 meta 태그는 문서의 정보를 표시하는 태그입니다.문서내용이 표시되지는 않고 문서의 데이터가 됩니다. 문법은 다음과 같습니다. [사용예]검색엔진에서 키워드 설정 문자코드 캐릭터셋 설정 다른페이지로 이동이렇게 하면 5초후에 다음경로로 이동합니다. 더보기
이스케이핑에 대해서 알아봅시다 이스케이핑이란 만일 화면에 태그를 실행시키지 않고 표시하려면 이스케이핑을 해야 합니다. & → (공백) → > (크다 표시)" → " (큰따옴표)' → ' (어포스트로피) 이스케이핑 도구를 편리하게 사용하려면 다음 사이트로 가면 됩니다.http://www.htmlescape.net/htmlescape_tool.html 더보기
내 블로그에 jsfiddle을 사용하여 소스코드 공유하기 jsfiddle은 코드를 작성해서 외부에서 공유및 수정도 가능하고 블로그에도 임베디드 할 수 있는 멋진 사이트입니다. jquery도 사용할 수 있고 코드색상변환기능도 있고 버전관리 공동개발 등 아주 강력한 기능을 가지고 있습니다. 홈페이지는 http://jsfiddle.net/ 회원가입하고 시작하면 다음과 같은 화면이 나옵니다. 여기서 다음과 같이 코드를 작성해 보겠습니다. 이렇게 웹상에서 실행되는 것을 눈으로 확인할 수 있습니다. 저장하면 웹경로가 자동으로 생성되는데요. 현재 이페이지는 다음과 같습니다. http://jsfiddle.net/anne_soft_guilbert/9ueY3/ 경로를 클릭해 보면 이 소스가 그대로 있는 것을 확인할 수 있습니다. 이 경로로 가서 다른 사람이 작업해서 업데이트 하.. 더보기
미디어쿼리 이미지를 기기별로 다르게 크기를 교체해서 보여주기 해상도가 큰 기기에서는 이미지 사이즈를 크게 해 줘도 되지만 모바일기기에서는 해상도가 큰 이미지는 화면 밖으로 나가게 되어 아주 보기 흉하게 됩니다.이런 현상에 대응하기 위한 방법이 있습니다. 이미지를 640사이즈에 맞추어서 제작하고 2배 축소하면 아이폰사이즈가 되고1.5배 축소하면 안드로이드 사이즈가 되도록 하는 것입니다. 이것은 아주 멋진 방법이 될 것입니다. 다음의 코드를 실행해 봅시다. 이미지 이렇게 하면 pc에서는 640x960이미지가 화면에 뜨는데 아이폰에서는 320x480이미지가 뜨고안드로이드 폰에서는 480x720이미지가 뜹니다. 더보기
CSS로 정렬하기를 배워봅시다 정렬을 하기위해서는 Block요소의 태그에서 적용됩니다., , 등의 태그에서 쓸 수 있습니다.주의 : 인라인태그에서는 적용되지 않습니다. 1. margin:auto를 이용한 중앙정렬문단을 중앙 정렬하려면 margin:auto 속성을 사용합니다.그런데 이 방법은 도큐타입이 정해지지 않았거나 ie8이하의 브라우저에서는 작동하지 않습니다.왼쪽과 오른쪽 여백을 auto로 설정해도 같은 결과가 나옵니다.margin-left:auto;margin-right:auto; [참고소스] In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.'Whenever you.. 더보기
CSS 박스모델이 무엇인가요? CSS Box 모델이란? 모든 HTML 요소들은 상자로 표현할 수 있습니다.상자는 용도에 따라 다르게 쓰이지만 공통적으로 쓰입니다.박스모델이라는 것은 HTML요소를 감싸는 상자가 있는데 용도에 상관없이 공통적으로 사용되어지는 요소들을 다루는 방법에 대한 모델입니다.먼저 여백(margin), 테두리(border), 패딩(padding), 실제내용이 들어가는 컨텐츠(content)가 무엇인지 알아야 합니다. 이미지 참고 : w3schools.com 이 그림을 참고하면 알겠지만 margin : 보더 주변 바깥지역입니다. 배경색이 없는 투명입니다.border : 패팅과 내용의 주위를 두르는 가는테두리입니다.padding : 패딩은 컨텐츠의 주위공간을 지웁니다. 배경 색상에 의해 영향을 받습니다. 다음을 보면 w.. 더보기

티스토리툴바