CSS 썸네일형 리스트형 button 태그 초기화 button{ background: inherit ; border:none; box-shadow:none; border-radius:0; padding:0; overflow:visible; cursor:pointer} 더보기 ie 11 핵 _:-ms-fullscreen, :root .classname{} _:-ms-fullscreen, :root .sample{ margin-top:10px; margin-bottom:20px; } 더보기 input 중에 text 에 포커스 되면 border 색상을 변경 input[type=text]:focus {border:2px #FF0000 solid}[type=text] 속성 selectorfocus : 유사클래스focus : 포커싱 되었을 경우hovor : 마우스가 올라간 경우active : 활성화 된경우 더보기 css 선택자 자식 선택자 바로 하위에 있는 요소 선택시 사용 부모요소 > 직계자손요소 .title > p {font-weight:bold;} 형제 선택자 특정요소 다음에 나오는 형제 관계 요소를 선택 요소1 ~ 요소1의 형제요소 h1 ~ p {font-style:italic;} 인접형제선택자 특정요소의 바로 다음에 오는 형제 요소를 선택 ul li + li {float:left;} 더보기 미디어 쿼리 소스 @media all and (max-width:480px) { 해상도 480px이하 Size 의 css 적용 적용 }@media all and (min-width:481px) and (max-width:1024px) { 해상도 481px이상 1024px이하 Size의 css 적용 }@media all and (min-width:1025px){ 해상도 1025px 이상 Size의 css 적용 }@media all and (min-width:768px) { /* 768px 이상 해상도에서 실행할 CSS 코드를 여기에 작성 */ } @media all and (min-width:768px) and (max-width:1024px) { /* 768px 이상 1024px 이하 해상도에서 실행할 CSS 코드를 여기.. 더보기 [모바일]안드로이드에서 주황색 포커스를 없애줌 안드로이드에서 주황색 포커스를 없애줌 -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-text-size-adjust:none; iphone 글자크기 자동조정 방지 -webkit-text-size-adjust:auto; 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절 -webkit-text-size-adjust:120%; 폰트크기를 지정된사이즈로 변경한다. 더보기 css3 자주 쓰는 부분 /*둥근모서리 표현*/ .box_round { -moz-border-radius: 12px; /* FF1+ */ -webkit-border-radius: 12px; /* Saf3+, Chrome */ border-radius: 12px; /* Opera 10.5, IE 9 */ } /*박스음영*/ .box_shadow { -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */ -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */ box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */ filter: progid:DXImageTransform.Microsoft.dro.. 더보기 css 그라데이션 버튼 만들어주는 사이트 http://www.colorzilla.com/gradient-editor/ 더보기 이미지링크 클릭후 점선 없애기 a:focus CSS에서 css파일에 . a:focus { outline:none; } 더보기 css ime-mode 입력상자 한글/영어 설정하기 입력상자 한글/영문 설정하기[style="ime-mode:active"] style = "ime-mode:auto" (자동변경) (한/영 전환 가능) style = "ime-mode:active" (한글 모드) (한/영 전환 가능) style = "ime-mode:inactive" (영문 모드) (오직 영문) style = "ime-mode:disabled" (영문 모드) (한/영 전환 가능) style = "ime-mode:deactivated" (한글 모드) (한/영 전환 가능) 더보기 css3 도형 그리기 http://www.css3shapes.com/ 더보기 css3 로테이션 소스 생성 사이트 http://www.westciv.com/tools/transforms/index.html 더보기 IE6,7,8에서 지원되는 CSS3 Javascript Framework http://ecsstender.org/extensions ecsstender라는 프레임웤으로 eCSStender.CSS3-selectors.js eCSStender.CSS3-color.js eCSStender.font-face.js eCSStender.CSS3-backgrounds-and-borders.js eCSStender.CSS3-transforms.js eCSStender.CSS3-transitions.js등으로 CSS3의 기능을 제공하고 있습니다. 따로 분류해서 사용할 수 있기 때문에 굉장히 가볍게 상용할 수 있을 거라고 생각되네요. http://github.com/easy-designs/ 출처 : http://seye2.egloos.com/2611221 더보기 css3 쉽게 설명한 사이트 http://kr-css3.tistory.com/?page=9 css3 쉽게 설명했습 더보기 [펌]호환성보기 문제해결(스크립트 적용안되는현상) http://blog.daum.net/adido/5 사이트를 window7 IE9 환경에서 jsp를 이용해서 페이지를 구현했는데 다른 컴퓨터에서는 이페이지의 스크립트가 안먹는다거나 테이블의 위치나 tr,td 등의 것들이 안먹는 일이 일어났다 내컴퓨터같은 경우에도 보이는 페이지의 상태는 도구 --> 호환성보기 설정 --> 호환성보기에서 모든 웹이트표시 를 체크한다던가 아니면 인터넷 주소창에 호환성그림을 클릭해서 활성화를 시켜야지 깨지지 않는 상황이 연출되었다 즉 다른 사용자가 접속할때 IE 호환성보기설정을 설정해놓지 않으면은 깨지는게 다반사란 얘기였다. 이부분을 모든 사용자가 접속해서 일괄적으로 같은 페이지를 보도록 설정했다 여기서 유의할점은 꼭 head 바로 아래에 위문장을 집어넣으라는거다 ----> 원.. 더보기 한국어 번역 w3c http://validator.kldp.org/ 더보기 css 용량 줄여주는 사이트 http://www.cssdrive.com/index.php/main/csscompressor/ 더보기 Internet Explorer CSS bug fixes 출처 : http://urlless.com/internet-explorer-css-bug-fixes/ 구글, 유튜브 등이 2010년부터 인터넷익스플로어6를 더이상 지원하지 않는다고 발표했고, 심지어 IE6의 장례까지 치루었지만, 크로스 브라우저 테스트시 광란의 CSS 버그마저 그냥 지나치는 웹디자이너/개발자는 없을 것입니다. 이 포스트는 ie의 시각적인 버그들을 잘 정리하고 있는 positioniseverything.net를 토대로 간략히 정리하면서 일부 수정하고 추가한 것입니다. 하지만 개인적인 필요에 의해 정리해둔 거라서 내용이 친절하지 않으므로, 자세한 내용은 위 사이트를 참고하시길… IE 버그 원인과 해결책을 찾기위해 시간을 보내는 일은 매우 스트레스 받는 일이며, 궁극적인 해결이 아닌 버그 회피.. 더보기 ie6 dl dt 버그 dl dt dd를 이용해서 게시판을 만들때 dt와 dd에 float와 width값을 주고 text-overflow:ellipsis; white-space:nowrap; 값을 주고 ie6에 확인을 하면 글자에 간격이 발생하는 증상이 있다 이럴때는 dl에 width값을 주면 글자 간격이 사라진다.. 개발자분이 알려주셨다.. 매우 감사~! 더보기 white-space:nowrap text-overflow:ellipsis word-break:break-all overflow:hidden; 예).table_style02 table tbody td.fb {text-overflow:ellipsis;white-space:nowrap;word-break:break-all;overflow:hidden;} white-space:nowrap; 공백문자를 어떻게 할 것인지 설정. (띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등) white-space:normal; 기본값. 연속 공백과 줄바꿈 등을 통합해서 표현 (보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인것처럼 적용됨) white-space:pre; normal과 반대. 원문 그대로 출력 white-space:nowrap; 스페이스바를 막 눌러서 들어가는 연속공백은 통합되지만 (normal의 효과) 줄바꿈은 인정함 (pre.. 더보기 [IE6] PNG 투명배경 영역이 링크 잡히지 않는 문제 방법 1. a 태그에 영역을 잡고, 한번 더 태그로 감싼다. 클릭 방법2. CDK에서 공유되었던 꼼수. PNG 배경색을 #FFFFFF 흰색으로 주고 opacity값을 1을 준다. 그러면 그 영역만큼 링크 영역이 잡힌다. 더보기 원하는 영역만 프린트 하는 CSS 출처 : http://lgibm.tistory.com/27 print.css @charset "utf-8"; ============================================================================================================ ** 프린트시 div center 부분만 프린트 한다 print.jsp (예제) 주메뉴로 바로가기 왼쪽메뉴로 바로가기 컨텐츠로 바로가기 top 메뉴 프린트 left 메뉴 센터 내용 더보기 ie6 dottom 오류 디자인에서 도트 부분을 아주 작은 점으로 표시해서 디자인을 하는 경우가 많다. 그런데 ie6에서는 그 도트 표시 부분이 좀 크게 나온다. 그걸 해결 하기 위해 검색을 해봤는데..관련 자료가 있어 올려둔다.. .dottedBorders li { border-bottom: 2px dotted #000; zoom: 0.5; } .dottedBorders li a { zoom: 2; } 보는거와 같이 zoom을 두번 주는 경우다. 상위 계층에 zoom:0.5 를 줘서 작게 표시한 다음 하단 a링크에 따로 zoom:2를 줘서 정상적인 크기로 돌아오게 하면 폰트는 정상으로 보이고 dotted 만 작게 보이게 만들어지는듯 싶다.. 더보기 IE Conditional Comments 필터링 IE Conditional Comments 필터링 http://jsunnylab.tistory.com/9 더보기 [list-style-position] 목록 내에서 줄바꿈 될경우, 다음 줄의 시작점을 설정 합니다. N:6.0/IE:4.0/CSS1 RANGS Web Cafe CSS HTML JAVASCRIPT RANGS Web Cafe CSS HTML JAVASCRIPT RANGS Web Cafe CSS HTML JAVASCRIPT RANGS Web Cafe CSS HTML JAVASCRIPT 더보기 css 속성 중 !important 선언 [css] css 속성 중 !important 선언 * !important 선언에 대해서 !important(!중요도) 선언은 모든 style 규칙에 우선하며 inline style, id selector, class selector들로 같은 style 속성을 선언했더라도 그 값을 모두 무시하여 !important로 선언한 속성값을 적용시킵니다. 이러한 !important 선언을 하는 이유는 다양하겠지만 주로 인쇄 즉 프린트 적용을 위해 많이 사용된다고 합니다. 웹페이지를 모니터로 볼때는 글씨 색이 여러가지면 보기 좋을지 모르지만 프린터로 출력하게 되면 블루계통이나 그레이계통의 글씨들과 같이 흐린 색상의 글씨는 희미하게 출력되어 보기가 불편하게 됩니다. 이런 경우 글씨를 검정색으로 바꾸기 위해 selec.. 더보기 DIV와 TABLE의 차이점 출처 : http://blog.crows.kr/5048788 요약 : DIV는 일단 내용부터 다 긁어와서 CSS해석이 아직 다 안 되어 레이아웃이 완성이 다 안 되었더라도 일단 글을 읽어나가는건 가능하지요. 근데 테이블로 만들면 역시나 몽땅 다 로딩이 될 때까지 하염없이 기다리게 된다는 것 웹 디자인을 하는 사람들은 대부분 알겠지만 일반인들은 모르는 경우가 많아서 Table 태그만 쓰는 경우가 많은데요. 브라우저에서 렌더링된 후에는 별 차이를 못 느끼기 때문에 Table 태그가 많이 사용되는 것 같습니다. 일반적으로 DIV 태그는 CSS와 같이 사용되어야만 제대로 화면에 그려지는데요. CSS가 없거나 제대로 적용되는 브라우저가 없던 시절에는 화면의 영역을 나누기 위해서는 Table 태그를 이용해야만했고 .. 더보기 유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드 http://naradesign.net/open_content/lecture/wp/ 세세히 읽어볼만한 내용 더보기 em 단위 계산 http://riddle.pl/emcalc/ 더보기 css 기본세팅 css 기본세팅은 일단 사이트 규모나..대메뉴 카테고리 별로 작성 가능. base.css ==> 기본 html 태그 정의 layout.css ==> 사이트 전체 레이아웃 스탈일 정의 board.css == > 게시판 스타일 table.css ==> 일반 데이타 테이블 스타일 정의 common.css ==> 공통 스타일 ie.css == > hack pop.css==> 팝업창 공통 관리 스타일 main.css ==> 메인페이지 더보기 이전 1 2 다음
