본문 바로가기

WWWEB/CSS28

[css] placeholder color 변경 ::-webkit-input-placeholder{font-size:17px;color:#666}::-moz-placeholder{font-size:17px;color:#666;opacity:1}::-ms-input-placeholder{font-size:17px;color:#666} 2017. 7. 21.
dl을 테이블 디자인 + 미디어쿼리를 이용한 반응형으로 만들어보기 만들긴 만들었는.. -_-;; ie7 이하는 고려하지 않아도 되서 display table을 사용... span 두 번 쓴게 마음에 걸리는.. ㄷㄷ;; 타이틀 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 타이틀 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 타이틀 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 텍스트 2015. 11. 17.
인쇄 영역 여러장으로 나누기 css page-break-before / page-break-afteralways(페이지를 분할) / avoid(분할하지 않음) 예) 아래와 같이 css 작성^^selector{page-break-before:always} [예시] (Q.요구사항) 인쇄 할 때 2장으로 나눠서 프린트를 하고싶어요~ (A.방법) 아래와 같이 css를 이용해 적용 가능~ - css @media print{ /* print 시 적용 css */ div{page-break-before:always} } - html ...인쇄1... ...인쇄2... ... 2015. 4. 2.
디바이스별 해상도 모바일 기기 모델명 해상도(세로x가로) iPhone 3GS 480 X 320 iPhone 4, iPhone 4S 960 X 640 iPhone 5 1136 X 640 iPad, iPad 2 1024 X 768 New iPad 2048 X 1536 갤럭시S, 갤럭시U, 갤럭시K, 갤럭시A, 갤럭시S2 800 X 480 갤럭시S3 1280 X 720 갤럭시탭 1280 X 720 갤럭시 노트, 갤럭시탭2 1280 X 800 옵티머스, 옵티머스Z, 옵티머스Q, 800 X 480 옵티머스 마하, 베가, 시리우스, 미라크, 이자르 800 X 480 옵티머스 뷰 1024 X 768 옵티머스G (LG-F180S) 1024 X 768 엑스페리아 X10 854 X 480 옵티머스원, 안드로-1, 스마트볼 480 X 320.. 2014. 2. 13.
메일링 코딩 CSS Support 가이드 테이블 코딩으로 "인라인스타일"로 줘서 메일작업을 넘겼으나, 개발 붙이고 아웃룩 테스트를 해봤을 때 다음과 같은 이슈사항이 생겨서 다시 재작업. -ㅁ-; 1. 모든 인라인 스타일 및 width 같은 속성 삭제됨.2. 안에는 자동으로 가 붙음.3. colspan 등이 먹지 않음.4. 닫는 태그들 모두 삭제되어 있음. -ㅁ-;5. 는 잘 나옴.6. 외부 스타일을 써보면 어떻냐는 개발자의 의견이 있었지만, 클래스 등 css 충돌 가능성이 아주아주 크기때문에 반려.ㅋㄷ7. 구글, 네이버, 네이트 등 메일에선 인라인스타일을 차단한다는 글도 있었지만, 테스트 결과 그건 사실이 아님. 문제는 이것이 아웃룩 문제인지, 아님 메일을 발송하는 에디터 문제인지 명확히 테스트할 수 없는 환경.;;; 도리도리....그래도 다시.. 2012. 11. 26.
ie9 핵 사용법 (+추가 : ie10 핵) ie9에서 돋움 등의 font가 1px 올라가는 현상은 현재까지 별다른 방법이 없기에 핵, 혹은 css 분기 방법을 이용. [ie9 css핵] - ie9 핵은 아래 예시처럼 선택자 앞에 :root 를 붙이고, 적용 스타일 뒤에 \9를 작성 (ie9 핵 예시) :root div{line-height:1.2\9;} [ie10 css핵] - @cc_on 감지법, @media -ms-high-contrast 핵, @media Zero 핵 등 IE10 CSS HacksBy Louis Lazaris on November 21st, 2012 | 28 CommentsLast year, Microsoft announced that IE10 will not be supporting conditional comments. .. 2012. 9. 28.
나눔고딕 다운(eot, woff, ttf) 및 적용방법 예 [웹폰트 적용방법 예] @font-face{ font-family:ng; src:url(NanumGothic.eot); src:local(※), url(NanumGothic.woff) format(‘woff’) } body,table/*,input,textarea,select,button*/{font-family:NanumGothic,'나눔고딕',ng,sans-serif} [웹폰트 지원 브라우저] ie6~9, FireFox, Chrome, Opera, Safari [나눔고딕다운] (작은용량:동작확인 필요) (작은용량:동작확인 필요) [구글 code] http://code.google.com/p/nanum-web-font/downloads/list [구글 웹폰트 CDN] 나눔폰트는 구글에서도 웹폰트 CDN.. 2012. 8. 23.
프린트용 CSS (배경 강제출력 등) 배경 강제 출력하기 프린트를 하는 경우 background-image나 background-color는 출력이 되지 않아 간혹 프린트한 내용물이 깨져보이는 경우가 발생함. 이때 아래 코드와 같이 css에서 강제로 배경을 출력하도록 설정할 수 있음.@media print { * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }}   페이지 속성 지정 인쇄 결과물이 예를 들어 A4용지에 딱 맞게 나오게 하고 싶은 경우 아래 코드를 이용하면 됨.size 속성에 A4, A5, B5 등의 값을 줄 수도 있고, 기타 여백을 주거나 절단면을 만들 수도 있음.@page { size: A4; margin: 1cm;}​  이외에 .. 2012. 8. 6.
float 해제 1. 가상엘리먼트 이용 (좋은방법) #id / .class { zoom:1;} #id:after / .class:after { content:""; display:block; clear:both; height:0; visibility:hidden;} 2. overflow (자주쓰이지만..) .class { overflow:auto;}, 또는 .class { overflow:hidden;} 3. float:left; 4. clear:both; 5. inline-block .class:after { content:""; display:block; clear:both; height:0; visibility:hidden;} .class { display:inline-block;} 6. 빈 엘리먼트로 처리 : f.. 2010. 6. 15.
728x90
반응형

티스토리툴바