CSS 썸네일형 리스트형 제이쿼리(jQuery) - CSS관련 API 1. DIV 크기 구하기(동적) - 더블클릭시 jQuery Ajax 더보기 jQuery Attributes(jQuery로 요소의 속성 변경하기) - 2 1. 마우스 오버시 다른 이미지와 아웃시 원래 이미지 보여주기 및 attr로 속성 가져오기 예제 네이년 2. 마우스 오버시 큰 이미지 보여주기 (로컬에 이미지가 있을때 예제) 더보기 제이쿼리(jQuery) - css() 메서드와 콜백함수(CallBack) 1. css()함수 사용 - 예를 들어서 기사나 본문글 폰트 키우고 줄이는 걸 적용해보자. bigger smaller Hello!. This is a main articles 2. 콜백(Callback)과 맵(Map) 첫번째 두번째 세번째 네번째 더보기 제이쿼리(jQuery) - Hello world!! 찍어보자. 1. $() 팩토리 함수(메서드, 생성자) * $() 로 CSS의 선택기(selector)와 모든 DOM요소 접근 - $("선택기").XXX메서드(); * 자바스크립트 익명 메서드(람다식) 호출 - $(document).ready(function() {....}); 2. 기본사용방법 3. 간단한 예제를 보자. 더보기 CSS 코드 생성기. css3 소스 생성. 천재가 아니라 외우질 못해서 남겨두자. http://css3pie.com/ 더보기 div 배너 및 이미지 고정.(화면 해상도 관계없이) 이미지 캡쳐는 못했지만 여러가지 방법이 있지만 아래 방법으로 해본 결과 해상도 관계없이 이미지가 고정되고 특히나 창을 임의적으로 줄였을때 이미지가 본문과 겹치는 현상이 발생 하는 소스도 있는데 아래는 고정됨. position:fixed.. .leftBanner{ position: fixed; left: 50%; top: 107px; margin-left: -710px; text-align:center; height:160px; width:120px; z-index:1000; } 위의 수치값들은 특히 left, top, margin-left값들은 알아서 화면에 맞게 수치 조정해야 함. 더보기 div와 span태크 div태그는 한줄전체를 영역으로 span태그는 내용 만큼만을 영역으로 한다. 예제1 [태그]⇩ div영역 span 첫번째 영역 span 두번째 영역 span 세번째 영역 [결과]⇩ div영역span 첫번째 영역span 두번째 영역span 세번째 영역 예제2 [태그]⇩ div영역 div영역 span 첫번째 영역 span 두번째 영역 span 세번째 영역 [결과]⇩div영역div영역span 첫번째 영역span 두번째 영역span 세번째 영역div태그는 한줄을 차지하므로 위에서 처럼 두줄에 걸쳐 표시되고 span태그는 영역 만큼만 출력되고 옆으로 이동하여 표시됨. 그리고 div태그를 style로 조정하여 div태그 안에 또 div태그를 넣어서 아래와 같이 홈페이지 레이아웃을 구성할수 있음div태그 main_t.. 더보기 CSS DIV 이미지 보이기 감추기 function imgview(){ { var test = document.getElementById('test'); test.style.display = 'inline'; } } function imghide(){ { var test = document.getElementById('test'); test.style.display = 'none'; } } ......................................................................................................................................................................................... 하지만 이제 jquer.. 더보기 Jquery mobile(제이쿼리 모바일) 에서 nav data-role="navbar"를 이용할 경우 글자수. Jquery mobile를 이용하여 모바일 페이지를 만들때 메뉴를 nav 태그를 이용해서 만들수도 있다 data-role = "nave bar"를 이용해서. 그러다 보면 글자수가 많아지거나 메뉴가 많아지면 자동으로 글을 truncation하는데 css를 조금 수정해주면 된다. 예) 메뉴 가나.. | 다라.. | 마바.. | 사아.. |아차.. 더보기 유용한 div 레이아웃 템플릿 사이트 코드 썩스란 사이트 인데 웹사이트 제작시 잡아야 하는 레이아웃 템플릿을 제공해준다. 무료이고 server-side코딩만 하다가 front-end쪽 하면 HTML이랑 CSS때문에 약간 고생할수 있는데 그때 이걸 다운받아서 레이아웃 잡고 시작하면 좋을듯. http://www.code-에스유씨케이에스.com/css%20layouts/fixed-width-css-layouts/ 좋은 사이트임에는 틀림없는데 주소가 조금 그렇다. 난 전적으로 이해하지만.. 위의 주소 클릭하면 잘못된 에러다..에스유씨케이에스를 영문으로 바꿀것.. 절대 나쁜 사이트 아니다.. 더보기 이전 1 다음
