숲속의 곰 9마리

css 속성중에 overflow란 속성이 있다. 간단히 설명하면 ~ 어떤 한 테두리영역에 크기를 정한 후 그 안에 내용을 보여주고자 할 때 테두리크기는 고정하며 안에 내용이 더 크기가 클 때에는 테두리영역만큼만 보여주게 할 수가 있다. 예를 들면 텍스트 롤링이나 배너 롤링 같은 곳에 사용한다. 그런데 잘 ..

CSS Sprite 기능을 구글의 경우로 설명을 드리면 구글 하단에 쓰이는 이미지를 보면 하나의 통 이미지 입니다. 이 이미지를 해당 div의 background로 넣고 position의 값을 변경하면 원하는 부분의 이미지 즉 메일, 캘린더, 노트 부분만 나오게 하는 기능입니다. 그래서 IE Developer Toolbar를 이용하여 그 부분의 스..

웹표준은 하나의 코드로 많은 브라우저와 호환성을 유지하기 위해서 사용합니다. CSS 핵은 이와는 정 반대의 브라우저 전용 코드죠. 핵에 의존한다는 것은 웹표준을 포기하는 것입니다. 핵의 남용에 따른 문제점은 어떤것이 있나요?!'라는 글에 좀 강경한 어조로 답변을 달았습니다. 제가 이렇게 얘기..

모든 디자이너가 해야할 9가지 CSS 원칙 이라는 나름 재미있는 포스팅이 올라와 번역하여 소개한다. 이미 웹개발 UI가이드는 국내에도 많이 소개되어있고 웹표준 강의시에도 항상 나오는 이야기이다. 또한 네이버UI가이드(http://html.nhndesign.com/)가 공개됨으로써 많은 분들이 이곳을 참고하고 있기도하다...

A:hover {font-family:돋움;font-size:9pt;color:#04B6C6;text-decoration:none; position:relative; top:1; left:1;}

현재 대부분의 인터넷유저가 IE6이상, 파이어폭스, 사파리, 오페라 등을 사용한다고 보아도 무방하기때문에 IE5.x 에 적용되는 CSS 핵은 제외하였습니다. 즉, 버그많은 IE6의 버그들을 집중적으로 잡아낼수있는, IE6 용 CSS핵만 소개할까 합니다. :) 급하게 정리해서, 오류가 있을 수 있으니 브라우져버전이 ..

브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특..

ul{ list-style:none; } ul li{ float:left; width: 300px; line-height:15px; font-size:14px; font-family:dotum; font-size:11px; font-weight:bold; }

<meta http-equiv=content="text/html; charset=UTF-8"> <link rel="stylesheet" href="/common/sub.css" type="text/css"> <style> #top { margin-top:20px; font-family:dotum; font-size:12px; color:#0f0f0f; } #middle { margin-top:20px; font-family:gulim; font-size:12px; color:#0f0f0f; } #bottom { margin-top:20px; font-family:dotum; font-size:12px; color:#0f0f0f; } </style> <di..

<link rel="stylesheet" href="common/css/body.css" type="text/css" media="screen"> <div> <? php include $_SERVER[DOCUMENt_ROOT]."/common/include/topmenu.php"; ?> </div> <div style='width:1000px;'> <div style='float:left;'> <? php include $_SERVER[DOCUMENT_ROOT]."/common/include/leftmenu1.php"; ?> </div> <div style='float:right;'> </div>..