Study/HTML5+etc8 iframe 로 한페이지안에 여러개의 링크 띄우기 iframe은 하나의 웹페이지안에 프레임을 만들어 또다른 웹을 띄우거나 링크를 거는등의 작업을 할 수 있습니다. 위와 같이 같은 페이지 안에 프레임을 만들어 다른 페이지를 띄워줄 수 있습니다. 그리고 크기도 다양하게 만들 수 있습니다. 사용방법은 간단합니다. 1cs 위와 같이 iframe 태그안에 아래의 속성값을 넣어주면 됩니다. 안에 넣을 수 있는 속성값입니다. HTML5에서는 지원하지 않는 속성들이 늘어났습니다. sandbox, src, srcdoc, width만 지원합니다. sandbox는 보안관련 기능 태그이고(자세한건 다음에~), src는 잘아시다 시피 띄어줄 소스 url을 넣는 곳입니다. srcdoc은 별도의 htmlcode를 넣어 띄어줄수 있습니다. width는 잘 아시다 시피 프레임의 가로.. 2016. 12. 5. HTML5 브라우저별 호환기능 볼 수 있는 사이트 1. http://html5test.com/ 기본적으로 내가 접속한 브라우저를 기준으로 지원하는 기능들을 보여줍니다. 그리고 다른 특정 브라우저를 선택할 수 도 있고, 특정 브라우저끼리 비교도 가능합니다. 2. http://html5please.com/ 이 사이트에서는 브라우저별 지원되는 기능들, 지원되지 않은 기기의 기능등등을 보실 수 있습니다. 그리고 주의가 필요한 기능들등 세세히 볼 수 있습니다. 3. http://html5readiness.com/ 마지막으로 한눈에 연도별 브라우저별로 지원 기능들을 보 실 수 있는 사이트 입니다. 업데이트가 2013년이 끝이긴 하지만 연도를 누르시면 브라우저별 지원 기능들이 그래픽적으로 나타납니다. 마우스를 가져다 놓으시면 무슨 기능인지도 나타납니다.^^ 2016. 11. 28. j-query로 구글맵 띄우기!! map_test 이번에는 구글맵을 j query를 이용해서 띄어 볼께용. 그냥 일반적인 구글맵은 앞의 포스트를 참고하세용. GEOLOCATION for Google Maps JavaScript V3 First, 준비하기 일단은 라이브러리를 받아야 합니다. >> library. 다운을 받으신 후 압축을 푸세용. 여기서 필요한건 ui폴더인데 폴더채로 작업하시는 폴더에 복사해주세용. Second, 코딩하기. 먼저 기본 자바스크립트 입니다. 필수!! 1234cs 그리고 레이아웃이죠? 보여질 부분!! 123456789101112131415161718 map page current location Colored by Color Scriptercs 여기서 중요한건 "map_style" 이라는 클래스를 추가시켜야 하.. 2015. 2. 12. HTML(J-query, javascrpit) 이미지 크기조절 1. 스타일 이용하기. style에 아래의 코드를 넣어줍니다. 12345678910cs" img{} "는 img라는 초기 스타일값이니 초기 크기는 30%로~. " img:hover{} " 는 마우스 포인터가 이미지 위에 있을때의 스타일 값 50%네용. "transition-property" 는 어떤부분에 효과를 줄꺼냐는 것이고~ "transition-duration" 는 효과시간입니다. 적용해보죠~ 이미지는 구글이미지를~ㅋㅋ 처음 실행시키면 이렇습니다. 폭이 브라우저의 30% 마우스를 그림위에 놓으면 50%로 커지네용~ 2. JavaScript& class이용하기 JavaScript는 아래의 코드와 같이 만듭니다. 123456789101112131415 $(document).ready(function().. 2015. 2. 12. PhotoSwipe로 gallery 만들기!! photoswipe PhotoSwipe를 이용하면 간단하고도 깔끔한 갤러리를 만들 수 있습니다. 단계별로 알아 볼 께용.ㅋ First step - 먼저 파일준비하기 phothswipe site 요기서 다운로드한다음에 자신의 프로젝트 폴더에 압축을 풀어 주세용. 저 같은 경우엔 C:/Program Files (x86)/Apache Group/Apache2/htdocs/photoswipe/ 요기로~ Second step - 이제 라이브러리를 적용해보죠~ 기존의 j-query는 못씁니다. photoswipe에서 제공해 주는걸로 대체해야 해용 헤더부분에 아래의 코드를 추가합니당. 1234567891011121314151617181920212223242526 div.gallery-row:after { clear:.. 2015. 2. 12. JQuery Tip!! test code 1. 브라우저 크기에 따른 스타일적용(다른 내용으로 보이도록하기) 아래와 같은 코드를 적용합니다. 1cs 아래의 코드를 예로 들어보면 12cs line 1 은 브라우저의 폭이 599까지이면 mobile이라는 css 스타일을 적용 line 2 는 브라우저의 폭이 600보다 크면 desktop이라는 css 스타일 적용 아래의 코드를 작성했다고 하면 12345678910111213141516171819202122232425262728293031323334 T his is example.This is example.This is example. This is example.This is example.This is example. This is example.This is example.Thi.. 2015. 2. 12. 이전 1 2 다음 인기글
