먹고살거 (109) 썸네일형 리스트형 세로 가운데 정렬 진짜 골치고 골치인 세로 가운데 정렬 TABLE을 이용하지 않고서는 구현하기 힘든 세로가운데정렬 가로로 가운데 정렬만하면 됬지 세로는 왜 그래야하는가? 이런 답답한 작업은정말정말 하기싫다 그래서 구현된 세로 가운제 스크립트!!!!!!!!!!!!!! 잘써보자. html 이곳의 텍스트가 상하 중앙정렬 이곳의 텍스트가 상하 중앙정렬 이곳의 텍스트가 상하 중앙정렬 이곳의 텍스트가 상하 중앙정렬 CSS div.wrap {width:600px; *zoom:1} div.wrap:after {content:""; clear:both; display:block} div.wrap .left {width:300px; float:left} div.wrap .right {width:250px; float:right; bor.. 레이어 뒷단 반투명하게 막기 레이어가 표준에 어긋나긴하지만 구현하는 방법은 알아야될것같다. 모듈팝업버튼 레이어내용입니다. 닫기 핵 사용한다고 꼭 나쁜건 아닌것같은데.. 표준에는 맞지 않지만 그렇다고 틀리게 보이는걸 맞추려고 핵을 사용한다고해서 나쁜건 아닌것같다 안그랬음 왜 핵을 만들엇겠는가? 이세상에 브라우져는 너무너무 많다 이젠 핸드폰 이라고 모바일 웹도 생겨서 미칠지경 ie6,ie7,ie8,ie9에 ie10베타 버젼도 나오고 파이어폭스에 사파리에 오페라에 크롬 안드로이드, 아이폰, 베가, OS... 해결책은 엄청난 기술의 마크업 실력을 가져서 하던가 아니면 꼼수를 부려 노가다로 맞추던가.. =_=.. http://blog.naver.com/0131v?Redirect=Log&logNo=110119269445 코딩좀 공유합시다. 유용한 정보가 많은곳 http://www.webmini.net/webtip?PHPSESSID=2e86b0c1f2dbb51a98f00c47004c6668 웹퍼블리셔 작업의 구조설명(이해하기 쉽다.) 어떤 사람의 몸매 -> HTML 그사람의 옷차림,헤어스타일 -> CSS 그사람의 전체적인 스타일 -> HTML + CSS .몸매와 옷차림이 좋아 전체적인 스타일이 좋은사람은 킹카등극 .몸매가 좋으면 옷매무새가 살고 옷을 골라입는것에 따라 몸매의 결점을 커버가능 .몸매(키 등)를 바꾸려면 뼈를깍는 고통과 시간이 소요 .옷차림이나 헤어스타일은 손쉽게 변경가능 .몸매는 표준이 존재한다 -> HTML구조의 표준화 .양말을 귀에걸면 안된다 -> 적절한 CSS의 사용 이걸 읽고 나서야 이해를 할수있었다. 근데 javasrcipt와 jquery는 뭘까? 그사람의 성격???????행동????몸짓손짓?????? '_'ㅎㅎㅎㅎ뭐든 뭔가 액션을 취한것이겠지? 오홍홍홍홍 이쁜짤 신민아 웹퍼블리셔의 필독 하코사 http://cafe.naver.com/hacosa 웹접근성연구소 http://www.wah.or.kr/index.asp W3C 대한민국 사무국 http://www.w3.org/ 한국장애인인권포럼 http://www.ableforum.com/ 한국 웹 접근성 그룹 http://kwag.net/ 신현석님 블로그 http://hyeonseok.com/ 정찬명님 블로그 http://naradesign.net/wp/ 필수도서 Best 5 http://naradesign.net/wp/2007/07/17/124/ 자기가 하고싶고 관심이 있다면.. 이미 알고계신것일수도 있습니다^^* 일단 검색해봅시다! IE6만 사용하는 파일설정 IE6은 항상 문제가 많다! 다른곳은 다 잘되고 IE6만 문제일때!!! 그럴때는 ~~?? ex)png를 사용할때(휴...), style을 따로 설정해야할때!!!!!!!!(핵사용ㅠ) 등등.. JQUERY 공부하기 3탄! 공부하는 순서는 1.제이쿼리가 페이지가 열리고 경고창 띄우기 2.제이쿼리로 태그의 스타일을 적용해보자 3.제이쿼리를 이용하여 레이어 팝업을 띄워보자 4.제이쿼리를 이용하여 2뎁스 메뉴를 만들어보자 5.제이쿼리를 이용하여 3뎁스 메뉴를 만들어보자 //마우스 클릭하면 레이어팝업 나타나기 //인라인으로 사용할경우 $(document).ready(function(){ $(".layerBox a").click(function(){ $(".layerBox p").css("display","block"); }); }); //class로 지정되있을 경우 $(document).ready(function(){ $(".layerBox a").click(function(){ $(".layerBox p").removeClass.. JQUERY 공부하기 2탄! 공부하는 순서는 1.제이쿼리가 페이지가 열리고 경고창 띄우기 2.제이쿼리로 태그의 스타일을 적용해보자 3.제이쿼리를 이용하여 레이어 팝업을 띄워보자 4.제이쿼리를 이용하여 2뎁스 메뉴를 만들어보자 5.제이쿼리를 이용하여 3뎁스 메뉴를 만들어보자 //셀렉터 스타일 적용하기 $(document).ready(function(){ $("h1").css("background","#eee");//태그를 이용해서 스타일을 적용할수도있고 $(".click").css("background","#eee");//class값을 이용해서 스타일을 적용할수도있고 $("#study_list").css("border","1px solid red");//id값을 이용해서 스타일을 적용할수도있고 }); 이렇게 css를 이용하지않고도 셀.. fieldset 컨텐츠 내용에는 항상 제목이있다. 그제목을 표현하려면 라는것이 필요하다. label이 컨텐츠 였다면 이걸 설명하는것이 있어야하겠지.....................? 예로 로그인을 들어보겠습니다. **html코딩 --------------------------------------------------------------------------- 로그인하기 아이디입력 비밀번호입력 --------------------------------------------------------------------------- **CSS 코딩 -------------------------------------------------------------------------------------------------.. JQUERY 공부하기 1탄! 제이쿼리를 공부하려면 일단 쓸줄알아야지 ㅎㅎㅎ 일단 jquery-1.5.2.min.js 다운받기! -> http://code.jquery.com/jquery-1.5.2.min.js 공부하는 순서는 1.제이쿼리가 페이지가 열리고 경고창 띄우기 2.제이쿼리로 태그의 스타일을 적용해보자 3.제이쿼리를 이용하여 레이어 팝업을 띄워보자 4.제이쿼리를 이용하여 2뎁스 메뉴를 만들어보자 5.제이쿼리를 이용하여 3뎁스 메뉴를 만들어보자 파일을 보면 코드를 쓴 방식이 나옴 제이쿼리는 페이지가 모두 로딩이 되고 실행이 되야하기에! jQuery(document).ready(function(){ //여기에 원하는 제이쿼리를 쓰면 되지요 }); $(document).ready(function(){ //여기에 원하는 제이쿼리를 .. 팀교육 : floating banner Style #content_a {width:800px; height:1200px; padding:10px; margin:0 auto; border:5px solid #333} #quick {position:absolute; top:100px; left:50%; margin-left:425px; width:180px; padding:10px; text-align:center; height:100px; background:#000; color:#fff; font-weight:bold} Javascript jQuery(function($){ var quickBox = $("#quick"); var quickTop = parseInt(quickBox.offset().top); //퀵메뉴 top 포지션을 변수로.. 웹퍼블리셔 트랙백URI - http://naradesign.net/wp/2007/01/02/99/trackback/ - 나라디자인의 정찬면님 - 웹 퍼블리셔의 세 가지 기술. 1. 구조 기술(Structure Technique) - Semantic Markup 과 Valid Markup 을 모두 구사하는 기술. 2. 표현 기술(Rendering Technique) - CSS 만을 이용하여 표현에 관계된 요소를 처리하고 이를 최적화 하는 기술. 3. 호환 기술(Compatibility Technique) - 다양한 Vendor, Platform, Device 에 대하여 동일한 Content 또는 동일한 View 를 제공하는 기술. 구조기술(structure technique). 문법적으로 유효한 XHTML 을 구사하.. 팝업창 닫기 JAVASCRIPT HTML 닫기 탭메뉴 HTML 공지사항 공지사항 리스트입니다. 공지사항 리스트입니다. 공지사항 리스트입니다. 공지사항 리스트입니다. 공지사항 리스트입니다. 보도자료 보도자료 리스트입니다. 보도자료 리스트입니다. 보도자료 리스트입니다. 보도자료 리스트입니다. 보도자료 리스트입니다. 이벤트 이벤트 리스트입니다. 이벤트 리스트입니다. 이벤트 리스트입니다. 이벤트 리스트입니다. 이벤트 리스트입니다. .. Object 대체 컨텐츠 *object안에 있는 컨텐츠를 대체 컨텐츠로 인식한다고 하는군요!!* 플래시가 안나올경우 플래시 플레이어를 다운받으라는 데체 텍스트가 필요함. 플래시 플레이어가 필요합니다.www.adobe.com 를 클릭해서 다운로드 받으세요. 하지만 여기서 문제가 생김 플래시는 항상 1순위기 때문에 레이어가 위에있어도 그 최상단에 플래시가 로딩이된다,... 제이쿼리로 레이어가 실행되었을때 플래시를 display:none해주거나 스크립트 코드를 사용해서 플래시를 코딩해놓는 수밖에 없다.ㅠ_ㅠ 팀교육 : 탭메뉴 HTML 공지사항 공지사항 리스트입니다. 공지사항 리스트입니다. 공지사항 리스트입니다. 공지사항 리스트입니다. 공지사항 리스트입니다. 보도자료 보도자료 리스트입니다. 보도자료 리스트입니다. 보도자료 리스트입니다. 보도자료 리스트입니다. 보도자료 리스트입니다. 이벤트 이벤트 리스트입니다. 이벤트 리스트입니다. 이벤트 리스트입니다. 이벤트 리스트입니다. 이벤트 리스트입니다. CSS #tab_nav {width:190px; min-height:110px; border:4px solid #E6E6E6; padding:6px; overflow-y:auto} #tab_nav h2 {background:#999; color:#fff; font-weight:bold;} #tab_nav h2 a {display:bloc.. 접근성을 해치지 않는 팝업 열기 HTML a href="#" onclick="openPopup('popup_print', this.href, '20','20','740','650','0','0','0','1','0'); return false;">새 창a>JSfunction openPopup(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable) { var objPopup; toolbar_str = toolbar ? 'yes' : 'no'; menubar_str = menubar ? 'yes' : 'no'; statusbar_str = statusbar ? 'yes' : 'no'; scrollbar_str = s.. 팀교육 : 접근성을 해치지 않는 팝업 열기 HTML 새 창 JS function openPopup(name, url, left, top, width, height, toolbar, menubar, statusbar, scrollbar, resizable) { var objPopup; toolbar_str = toolbar ? 'yes' : 'no'; menubar_str = menubar ? 'yes' : 'no'; statusbar_str = statusbar ? 'yes' : 'no'; scrollbar_str = scrollbar ? 'yes' : 'no'; resizable_str = resizable ? 'yes' : 'no'; objPopup = window.open(url, name, 'left='+left+',top='+top+',.. 이미지 갤러리 HTML CSS #gallery p {float:left; border:6px solid #333333; padding:5px} #gallery ul {clear:both; padding:10px 0 0 0} #gallery ul li {float:left; margin:0 4px 0 0; border:4px solid #333333} #gallery ul li.on {border:4px solid #FF3300} JQUERY jQuery(function($){ var imgThumb = $("#gallery ul li"); //썸네일 리스트를 변수로 저장 $("#gallery ul li:eq(0)").addClass("on"); //리스트 중 첫번째에 on 클래스 부여 //alert(thumbLengt.. 이전 1 2 3 4 5 6 다음 목록 더보기
