'개인적인 프로그램/웹표준,웹접근성,CSS' 카테고리의 글 목록

xhtml 과 html 그리고 shottag

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:57

다음과 같은 태그는 html validator에서 이런 에러를 낸다.

NET-enabling start-tag requires SHORTTAG YES .

The sequence <FOO /> can be interpreted in at least two different ways, depending on the DOCTYPE of the document. For HTML 4.01 Strict, the '/' terminates the tag <FOO (with an implied '>'). However, since many browsers don't interpret it this way, even in the presence of an HTML 4.01 Strict DOCTYPE, it is best to avoid it completely in pure HTML documents and reserve its use solely for those written in XHTML.

------------구글 번역 ------------------

<foo />의 순서에 적어도 두 개의 서로 다른 방법으로 해석할 수에 따라 문서의 doctype합니다. html 4.01에 대한 엄격한, '/'이 종료 (with의 태그 <foo에서는 묵시적 '> '). 그러나,이 방법이 많은 브라우저를하지 해석하는 경우에도 엄격한 4.01 doctype html의 존재를, 완전하게 그것을 피하는 것이 좋습니다 순수 html 문서와 예약을 위해서만 이들을 사용 xhtml로 작성된합니다.

대충 html문서에서는 slefclose 하지 말고

xhtml 에서만 하라는 뜻..

난 그것도 모르고 죄다 <br />이렇게 죄다 닫아버렸다..

보는 족족..

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

해결할 웹접근성 이슈 (0)	2013.12.24
css적용이 안될때.. (0)	2011.10.26
웹표준 관련 사이트 링크 (0)	2011.10.26
input type="file" 스타일 이슈 (0)	2011.10.26
내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법 (0)	2011.10.26

Posted by 삽지리

,

웹표준 관련 사이트 링크

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:48

cdk 코리아 : http://forum.standardmag.org/

신현석님 홈피 : http://hyeonseok.com/

html validator : http://validator.w3.org/

css validator : http://jigsaw.w3.org/css-validator/

카도와 : http://www.iabf.or.kr/

나라 디자인 : http://naradesign.net/

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

css적용이 안될때.. (0)	2011.10.26
xhtml 과 html 그리고 shottag (0)	2011.10.26
input type="file" 스타일 이슈 (0)	2011.10.26
내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법 (0)	2011.10.26
ie flicker 버그와 관련된 글 (0)	2011.10.26

Posted by 삽지리

,

input type="file" 스타일 이슈

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:47

참조 : http://www.quirksmode.org/dom/inputfile.html

동작원리는 투명도를 이용하여 file박스를 화면에서 투명하게는 하되 z-index를 사용하여 상위에 위치시켜 해당하는 곳을 클릭하면 input 박스가 클릭되도록 하는것

css 자체가 웹표준에 맞지 않고 예외처리가 심하다.

별로 좋지 않은 방식.

참고로 file박스는 직접클릭해서 파일선택창을 띄워야지만 제대로 값이 전달된다

click()이벤트를 이용하여 다른곳에서 이벤트를 호출해서 파일선택창을 띄워도

form의 submit에서 에러가 난다.

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

xhtml 과 html 그리고 shottag (0)	2011.10.26
웹표준 관련 사이트 링크 (0)	2011.10.26
내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법 (0)	2011.10.26
ie flicker 버그와 관련된 글 (0)	2011.10.26
디자인을 위한 빈태그.. (0)	2011.10.26

Posted by 삽지리

,

내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:42

□ 브라우저별 체크

- 브라우저별 검증은 최신버전을 기준으로 한다.

- ie 6, ie 7 사파리 최신버전, 모질라 파이어폭스 최신버전, 오페라 최신버전

- ie 6를 사용한다면 http://tredosoft.com/IE7_standalone에서 Internet Explorer 7 standalone 를 받아 ie7를 테스트할 수 있다.

- ie 7을 사용한다면 http://tredosoft.com/Multiple_IE 에서 Download Multiple IE installer 을 다운받아 설치하면 IE3,IE4.01,IE5,IE5.5,IE6를 테스트할 수 있다.

□ (X)HTML 체크

- (x)html Validate - http://validator.w3.org/

□ CSS 체크

- http://jigsaw.w3.org/css-validator/

□ 접근성 체크

- Kado-Wah를 사용하여 웹접근성 체크를 함

- Kado-Wah는 도구일 뿐 Kado-Wah를 사용하여 웹접근성을 완벽하게 확보했다고 볼 수 없음.

- http://www.iabf.or.kr(웹 접근성 연구소)에서 Kado-Wah 최신버전을 다운받을 수 있음

□ 페이지의 구조화

- 파이어폭스 > 보기 > 페이지 스타일 > ‘스타일 없음’으로 한후 구조화 체크

□ javascript 체크

- 파이어폭스 > 도구 > 부가기능 > 유용한 확장기능 찾기 > firebug 로 검색 후 설치 > 도구 > firebug > open firebug > console 창에 javascript 에러가 뜨는지 여부 확인

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

웹표준 관련 사이트 링크 (0)	2011.10.26
input type="file" 스타일 이슈 (0)	2011.10.26
ie flicker 버그와 관련된 글 (0)	2011.10.26
디자인을 위한 빈태그.. (0)	2011.10.26
웹접근성에 충실한 팝업존 (0)	2011.10.26

Posted by 삽지리

,

ie flicker 버그와 관련된 글

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:40

원인 : http://www.fivesevensix.com/studies/ie6flicker/

해결방법 : http://naradesign.net/wp/2008/04/29/140/

내용 :

Flicker Bug 개요

IE6 이하 버전을 사용하는 사용자가 ‘저장된 페이지의 새 버전 확인’ 옵션을 ‘페이지를 열때마다’로 두었을 때 IE는 이미 로드된 숨은 이미지를 화면에 다시 출력해야 하는 경우 이것을 캐시로부터 찾지 않고 출력하는 순간마다 다시 서버측에 요청하는 버그가 있습니다. 이것은 익히 잘 알려진 Flicker 버그 입니다. 한 가지 예로서 :hover 라는 가상선택자를 사용하여 배경이미지를 교체시키는 기법을 사용할 때 IE는 교체될 이미지를 캐시에서 불러오지 않고 실시간으로 서버측에서 다시 불러오기 때문에 사용자가 깜빡거림을 느끼게 됩니다. 이것은 깜빡거림만 문제가 되는것이 아니라 불필요한 http 요청이 반복적으로 일어난다는 사실로 하여금 IE브라우징시 웹페이지의 성능을 떨어뜨리는 요인이 됩니다.

Flicker Bug 해결방법

여기 IE Flicker Bug를 MS에서 제공하는 execCommand문으로 해결하는 잘 알려진 방법이 있습니다.

Javascript 문법으로는 아래와 같이 표현합니다.

try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}

CSS 문법으로는 아래와 같이 표현합니다.

html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}

CSS 또는 Javascript 문법 가운데 택일하여 적용하시면 Flicker Bug를 해결할 수 있지만 실제 적용하는 경우 Javascript코드를 활용하는 방법이 권장됩니다.

CSS 문법이 지닌 문제는 BackgroundImageCache Identifier(배경이미지 캐시 식별자)가 없는 브라우져에 대한 예외처리가 없다는 점, 그리고 한번만 수행하면 되는 코드가 지속적으로 수행된다는 점 입니다.
참조 : http://neonatas.tistory.com/39

이 문법은 W3C 표준과 무관하게 MS에서 제공된 것이며 IE 브라우저에서만 인식하기 때문에 다른 브라우저들은 무시합니다. 또한 Windows XP SP1 이후의 운영체제, 또는 IE 브라우저의 6.00.2800.1106 이후 버전에 적용됩니다. 이 문법들이 안정적인지에 대하여는 보증할 수 없습니다. 현재와 같은 방식으로 execCommand문을 사용할 때 어떤 문제가 발생할 수 있다고 판단되시면 코멘트 부탁드립니다.

참조문서

No more IE6 background flicker – http://evil.che.lu/2006/9/25/no-more-ie6-background-flicker
MS의 execCommand설명 – http://msdn2.microsoft.com/en-us/library/ms536419(VS.85).aspx
Available memory decreases when you view a Web page in Internet Explorer 6 Service Pack 1 – http://support.microsoft.com/kb/823727
High Performance Web Sites > Avoid CSS Expressions – http://stevesouders.com/examples/rule-expr.php

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

input type="file" 스타일 이슈 (0)	2011.10.26
내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법 (0)	2011.10.26
디자인을 위한 빈태그.. (0)	2011.10.26
웹접근성에 충실한 팝업존 (0)	2011.10.26
포커스가 있을때만 나오게 하는 css (0)	2011.10.26

Posted by 삽지리

,

디자인을 위한 빈태그..

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:40

어떤 상자를 만들떄

위하고 아래에

</div>

이런식으로 빈태그를 넣어서

box_top라는 class에 백그라운드로 이미지를 넣고

쓰는경우가 있는데

이경우 height가 과도하게 적어져버리면.

이상해지는 경우가 있다

이경우 대체로 font-size나 line-height문제라고 생각된다.

이경우 overflow:hidden;을 줌으로써 해결이 되는것 같다.

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법 (0)	2011.10.26
ie flicker 버그와 관련된 글 (0)	2011.10.26
웹접근성에 충실한 팝업존 (0)	2011.10.26
포커스가 있을때만 나오게 하는 css (0)	2011.10.26
longdesc 대신 alt와 title를 쓰자.. (0)	2011.10.26

Posted by 삽지리

,

웹접근성에 충실한 팝업존

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:37

이미지등의 컨텐츠는 파주시껄 가져다 썻으므로 좀 민감..

이 팝업존은 웹접근성을 고려해서 만들었고

ie 6, 파폭, 오페라 ,사파리에서 작동유무를 확인했고

스타일과 자바스크립트의 사용유무에 따른 접근성 확보는 파폭에서 확인하였다..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  #popup_zone{
   width:200px;
   background:red;
   position:relative;
  }

  #popup_zone ol li{
   float:left;
   display:inline;
  }
  /* 공통 팝업 스타일 */
  .sub_popup_zone{
   display:none;
   top: 20px;
   left:10px;
   position:absolute;
  }

  .sub_popup_zone_no_script{

  }

  #popup_zone_script{
   display:none;
  }
  #popup_zone_no_script{
   width:200px;
   height:125px;
   overflow:auto;
   top:20px;
   left:10px;
   position:absolute;
  }
</style>

  /***************************************************************
  * 팝업존 class
  * popup_id(팝업이미지)의 id는 뒤에 숫자가 붙되 1부터 증가하여야한다.
  *   예 : popup_id가 popup_zone 일 경우 팝업이미지의
  *   id는 popup_zone1, popup_zone2, popup_zone3
  *
  * popup_id는 반드시 정의해야한다.
  * sub_popup_id(서브팝업영역)의 id는 뒤에 숫자가 붙되 1부터 증가하여야한다.
  * 예 : sub_popup_id가 sub_popup_zone 일 경우 서브팝업영역의
  * id는 sub_popup_zone1, sub_popup_zone2, sub_popup_zone3
  *
  * sub_popup_id는 반드시 정의해야한다.
  *   name는 popup_zone class의 변수명을 넣는다.
  * 예: var popup_1 = new popup_zone(); popup_1.name="popup_1";
  ***************************************************************/
  var popup_zone = function(){
   // 상태값 0은 정지 1은 동작
   this.status = 1;
   // 팝업의 총 갯수
   this.total = 0;
   // 딜레이타임
   this.delay = 5000;
   // 선택된 팝업
   this.select = 0;
   // 팝업이미지의 아이디
   this.popup_id = "";
   // 서브팝업영역의 아이디
   this.sub_popup_id = "";
   // 변수명을 넣어준다.
   this.name = "";
  }

  /***************************************************************
  * 팝업존의 이미지와 레이어를 변경
  *   이벤트 대상 : 팝업이미지.src 와 서브팝업영역.style.display
  *   순번 target_num을 제외한 이미지를 off이미지로 변경시키고
  * 순번 target_num을 제외한 레이어를 display:none 로 변경시킨다.
  ***************************************************************/
  popup_zone.prototype.change = function (target_num){
   var target_div="";
   var target_img="";
   var re;
   for(var i=1; i<=this.total ; i++ )
   {
    target_div = this.sub_popup_id+i;
    getObject(target_div).style.display= "none";
    target_img = this.popup_id+i;
    target_img_name = getObject(target_img).src;
    if( target_img_name.indexOf("on.") > -1 ) {
     re = /on\./g;
     getObject(target_img).src = target_img_name.replace(re,"off.");
    }
   }
   target_div = this.sub_popup_id+target_num;
   getObject(target_div).style.display= "block";

   target_img = this.popup_id+target_num;
   target_img_name = getObject(target_img).src;
   if( target_img_name.indexOf("off.") > -1 ) {
    re = /off\./g;
    getObject(target_img).src = target_img_name.replace(re,"on.");
   }
   this.select = target_num;
  }

  /***************************************************************
  * 팝업존의 이미지를 시간에 따라 변경시킨다.
  *   delay가 0보다 크지 않으면 status와 상관없이 정지한다.
  *   status가 1이면 delay에 설정된 시간(Milliseconds)에 따라 팝업이 변화한다.
  * status가 0이면 팝업이 변화하지 않는다.
  ***************************************************************/
  popup_zone.prototype.roll = function(){
   if(this.delay > 0){
    if(this.status == 1){
     if(this.select == this.total){
      this.select = 1;
     }else{
      this.select = parseInt(this.select) + 1;
     }
     this.change(this.select);
    }
    setTimeout(this.name+".roll();",this.delay)
   }
  }

  /***************************************************************
  * 팝업존을 스타트시킨다.
  *   이 메쏘드의 호출은 반드시 팝업존 다음에 선언되어야한다.

  ***************************************************************/
  popup_zone.prototype.start = function(){
   getObject("popup_zone_script").style.display= "block";
   this.roll();
  }

  /***************************************************************
  *   사용예시
  *   필수항목(popup_id,sub_popup_id,name)은 반드시 선언되어야한다.
  * var popup_1 = new popup_zone();
  * popup_1.total = 5;
  * popup_1.popup_id = "popup_zone";
  * popup_1.sub_popup_id = "sub_popup_zone";
  * popup_1.name = "popup_1";
  * popup_1.delay = 1000;
  * paid.UserEvent.addListener(window, "load", popup_1.start(), false);
  *
  *   paid.UserEvent.addListener(window, "load", popup_1.start(), false);
  * 의 경우 팝업존의 엘리먼트 전에 선언되면 개체를 찾지 못하기 때문에 에러가 난다.
  ***************************************************************/

//-->
</script>

</head>

<body>

<div id="popup_zone">
<script type="text/javascript">

</script>
<noscript>
  <ol>
   <li>
    <a href="#sub_popup_zone_no_script1" >
     <img border="0" alt="1번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_01_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script2">
     <img border="0" alt="2번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_02_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script3">
     <img border="0" alt="3번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_03_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script4">
     <img border="0" alt="4번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_04_off.gif"/>
    </a>

   </li>
   <li>
    <a href="#sub_popup_zone_no_script5">
     <img border="0" alt="5번 팝업존" src="http://www.paju.go.kr/open_content/img/main/popup_num_05_off.gif"/>
    </a>

   </li>
  </ol>
  <div id="popup_zone_no_script" >
      <div id ="sub_popup_zone_no_script1" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/event_infor/board.tdf?a=user.board.BoardApp&board_id=BD_WWW_03_04_06_1&c=2002&seq=298&npp=10&cp=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080421091036254697_1.gif" alt="사운드오브뮤직" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script2" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/inner_issue_new/board.tdf?a=user.board.BoardApp&board_id=DB_WWW_03_04_01_1&c=2002&seq=3350&npp=10&cp=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080418093053380291_1.gif" alt="개별공시지가열람" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script3" class="sub_popup_zone_no_script">
     <a href="http://branch.paju.go.kr/open_content/B000001290/B000001290_12/B000001290_02/branch/board.tdf?a=user.board.BoardApp&c=2002&board_id=BD_WWW_03_04_01&seq=4415&search_cons_without_keyword=ocode&issearch=true&ocode=000003099" target="_blank"
     onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080418093516240293_1.gif" alt="풍수해보험전국확대실시" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script4" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/law_making_new/board.tdf?a=user.board.BoardApp&board_id=BD_WWW_03_04_03&c=2002&seq=4657&npp=10&cp=2&pg=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080418093558287294_1.gif" alt="계량기정기검사" border="0" width="177" height="125" /></a>
    </div>
    <div id ="sub_popup_zone_no_script5" class="sub_popup_zone_no_script">
     <a href="http://www.paju.go.kr/open_content/organization/news/inner_issue_new/board.tdf?a=user.board.BoardApp&board_id=DB_WWW_03_04_01_1&c=2002&seq=3344&npp=10&cp=1"                                                 onmouseover="popup_1.status=0;" onfocus="this.onmouseover();" onmouseout="popup_1.status=1;" onblur= "this.onmouseout();"><img src="http://www.paju.go.kr/open_content/upload/allim/20080415175901734184_1.gif" alt="메일서비스 휴면계정 일제 정비" border="0" width="177" height="125" /></a>
    </div>
  </div>
</noscript>
</div>

</body>

</html>

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

ie flicker 버그와 관련된 글 (0)	2011.10.26
디자인을 위한 빈태그.. (0)	2011.10.26
포커스가 있을때만 나오게 하는 css (0)	2011.10.26
longdesc 대신 alt와 title를 쓰자.. (0)	2011.10.26
Browser sniffing (브라우저의 버전과 제품 벤더를 알아보자) (0)	2011.10.26

Posted by 삽지리

,

포커스가 있을때만 나오게 하는 css

개인적인 프로그램/웹표준,웹접근성,CSS 2011. 10. 26. 13:36

#skip a {

height:0px;

left:310px;

overflow:hidden;

position:absolute;

top:0pt;

}

#skip a:hover, #skip a:focus, #skip a:active {

color:#000000;

height:auto;

}

간단하다 height를 0px를 기본으로 주고 hover,focus,active시에만 높이를 주는것..

심플하지 않은가??

display:none을 하는것보다 더 명확하다.

참조사이트 : http://www.webolution.co.kr 에서 개발한 모 사이트..

----------------------

실제로 적용해보면 왠지 쉽지 않다..

흠냥..

#haha a {
height:0px;
position:absolute;
overflow:hidden;
}

#haha a:hover, #haha a:focus, #haha a:active
{
height:auto;
overflow:visible;
}

</style>
</head>
<body>
<div id = "haha">
<a href="#">보이냐?</a>
</div>
</body>

적용해 봣다..

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

디자인을 위한 빈태그.. (0)	2011.10.26
웹접근성에 충실한 팝업존 (0)	2011.10.26
longdesc 대신 alt와 title를 쓰자.. (0)	2011.10.26
Browser sniffing (브라우저의 버전과 제품 벤더를 알아보자) (0)	2011.10.26
테이블레이아웃 구성시 원하는 사이즈 대로만 나오게 하기.. (0)	2011.10.26

Posted by 삽지리

,

잡동사니 블로그

'개인적인 프로그램/웹표준,웹접근성,CSS'에 해당되는 글 17건

해결할 웹접근성 이슈

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

css적용이 안될때..

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

xhtml 과 html 그리고 shottag

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

웹표준 관련 사이트 링크

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

input type="file" 스타일 이슈

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

내가 쓰고 있는 웹표준 및 웹 접근성 검증 방법

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

ie flicker 버그와 관련된 글

Flicker Bug 개요

Flicker Bug 해결방법

참조문서

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

디자인을 위한 빈태그..

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

웹접근성에 충실한 팝업존

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

포커스가 있을때만 나오게 하는 css

'개인적인 프로그램 > 웹표준,웹접근성,CSS' 카테고리의 다른 글

카테고리

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

달력

링크

티스토리툴바


	네이버만 쓰다가 네이버가 싫어서 티스토리로 이사했습니다. by 삽지리