web/HTML (15) 썸네일형 리스트형 fixed 일때 사이 간격 맞추기 { position: fixed; top: 0; left: 50%; margin-left: 216px; overflow: auto; height: 100%; } position을 fixed로 할 시 반응형일 경우 옆의 개체와 일정한 간격을 유지하기 위해선 약간의 꼼수가 필요하다.left 50%; 와 margin-left 값을 해당 태그사이즈 / 2 + 간격사이즈 를 px로 주면 반응형에도 알맞게 떨어진다. doctype doctype은 해당 html 문서가 어떤 타입으로 사용되어 선언되었는지를 말해주는 선언자 입니다. 파일로 본다면 이 문서가 doc / pdf / hwp 입니다! 라고 선언하는것과 같습니다. doctype에는 크게 HTML 4.01 / HTML5 / XHTML 1.0 / XHTML1.1 이 있습니다. HTML 4.01 / XHTML 1.0은 각각 다시 Strict / Transitional / Frameset 형식이 나눠지면서 각각 지원하는 태그들도 달라졌습니다.또한 표준/비표준에 따라 width값이 달라지고 / inline 정렬이 달라지기 까지 했죠. 그렇습니다. 난장판이죠? 그래서 나온것이 지금의 HTML5와 XHTML1.1 입니다. 하지만 예전의 페이지도 브라우저에서 정상적으로 랜더링을 해줘야 하기.. input 속성이 disabled 면 post 일때 데이터를 않보내는군요. -_- html 책을 한번도 않읽어본 놈이라 웹종사 2년만에 새로운걸 알게되는군요.. html를 맞게 작성했는데 왜 데이터가 않가나.. 검색해보니 Tip: Disabled elements in a form will not be submitted. 그렇군요. 규약으로 정해져있군요. Note: The disabled attribute will not work with . 결국 hidden 으로 처리하세요. 라고 써있네요. ㅎㅎㅎㅎㅎㅎㅎㅎ -_- 갑자기 멘붕이네요. 내가 공부를 제대로 한건지..ㅋ 기초적인것도 모르고..ㅎ 출처 : http://www.w3schools.com/tags/att_input_disabled.asp PC에서 모바일 페이지 보기(크롬 플러그인 User-Agent Switcher for Chrome) 파이어폭스나 오페라에서 환경설정을 변경하여 pc에서도 모바일페이지로 인식하게끔할수 있습니다.(웹페이지 요청시 user-agent를 변경하는 방법이지요.) 크롬에서도 가능하나 더욱 편리하게 플로그인이 존재 합니다. 1. 크롬으로 접속후 아래의 경로로 들어가서 플로그인을 설치 합니다.https://chrome.google.com/webstore/detail/user-agent-switcher-for-c/djflhoibgkdhkhhcedjiklpkjnoahfmg 2. 설치 후 아이콘을 볼수 있습니다. 클릭해보시면 각종 브라우져와 스마트폰os를 볼수 있습니다. 만일 ios 모바일 페이지로 보고 싶다면 ios를 클릭후 iphone4 나 아이패드를 클릭하면 해당 디바이스의 웹 화면으로 보실수 있습니다. 3. iph.. html 특수 문자 ( Special Characters in HTML ) Special Characters in HTMLleft single quote ‘‘right single quote ’’single low-9 quote ‚‚left double quote ““right double quote ””double low-9 quote „„dagger ††double dagger ‡‡per mill sign ‰‰single left-pointing angle quote ‹‹single right-pointing angle quote ››black spade suit ♠♠black club suit ♣♣black heart suit ♥♥black diamond suit ♦♦overline, = spacing overscore ‾‾leftward arrow ←←upward arr.. 구글에서 tilt를 검색하면?! 어떻게 표현한걸까? 구글에서 tilt를 검색하면 검색 화면이 기울어져서 나온다.(한번 검색해보세요.) 와..신기하다. 구글은 역시 기발해. 생각하고 창을 닫아버린다면 당신은 개발자가 아닌것이다.(너무 심한 억측인가요?ㅎ)개발자라면 자고로! 이것은 어떻게 만든것이지?! 라고 생각하면 소스를 뜯어봐야겠지요?! 요소검사를 해보자 5초만에 보이더군요. 자체에 css로 표현을 했습니다.문제는 html5 에서만 지원하는 transform:rotate() 를 사용했습니다. transfrom 함수의 경우 표준 함수가 아닌 관계로 브라우저 마다 명시를 해줘야 합니다.(html5를 공부하셧다면 당연히 아시겠지요?) rotate()안의 변수는 기울기로 1deg(1도) 만큼 기울어 진것입니다. 왼쪽이 일반. 오른쪽이 rotate를 적용한 화면이.. JSON을 응용해보자.(JSON + jquery 예제 2) 저번 포스팅에서는 JSON형태를 jquery를 통하여 이미지 링크를 화면에 뿌려주는 작업을 했습니다.이번에는 구글 이미지에서 보여주는것처럼 버튼을 누를때다마 이미지를 뿌려주는 작업을 해보겠습니다.일단 구글 이미지는 다음 화면과 같습니다. 아래의 결과 더보기를 버튼을 누르면 이미지들이 아래에 생성되는 기능입니다.(트위터나 블로그에도 많이 사용되는 기능이죠?) 사실 jquery 에서 지원하는 함수만 써준다면 간단히 해결이 됩니다.먼저 버튼 이벤트를 위해서 기존의 소스에서 페이지 실행후 바로 실행되던 스크립트를 이벤트 형식으로 바꿔줍니다. var ImageAdd = function(){$.getJSON(jsonimage, params, function(data, status) {if(data.rankedTwi.. JSON은 무엇일까? (JSON + jquery 예제) JSON(JavaScript Object Notation)의 약자 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이. DATA 교환언어. 참고 JSON 개요 : http://www.json.org/json-ko.html XML도 많이 사용하지만 요즘엔 JSON도 많이 지원을 해준다.(왠만한 api 및 데이터교환은 XML or json 방식으로 해주는듯하다. )openAPI를 사용하는 도중에 xml방식보다는 JSON방식으로 사용하는편이 너무 쉬워서 예제를 올려본다. www.followkr.com 에서 지원해 주는 API로 만들었습니다.아래의 예제는 http://www.followkr.com/common/html/api.html 에 있는 sample code를 변형하여 작성하였습니다. jQuer.. 이전 1 2 다음
