Search Result for CSS 7
화면너비 vw 폰트 사이즈 구하기
CSS360 viewport 에서 18px 폰트 사이즈를 구할 때vw = (px / width) * 100; // 공식5vw = (18 / 360) * 100; // 결과http://publishing.kr/vw/https://codepen.io/lakshmiR/pen/YGWXoo VW 계산기 publishing.kr VW CalculatorPX to VW Calculator...codepen.io
IE css 투명도
CSS{ opacity: 0.5; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50);}
모바일 input password 숫자 키패드로 표시
CSS사파리에서 숫자 키패드 표시를 위해 pattern="[0-9]*" inputmode="numeric" 추가 input[type=number] {-webkit-text-security:disc;} /* 패스워드로 나타내기 위해 스타일시트에 -webkit-text-security:disc; 추가. */
아이폰 safari(사파리)에서 input 스타일 리셋
CSS아이폰, 아이패드의 기본 웹브라우저인 safari 에서는 input 이 기본으로 둥근모서리와 그림자를 가지고 있습니다.밑 코드를 삽입하면 기본적으로 가지고있던 스타일이 리셋이 됩니다.input[type=text], input[type=password]{ -webkit-border-radius:0; /* 둥근모서리 */ -webkit-appearance:none; /* 그림자 */ }
Clearfix
CSSClassic CSS Clearfix .clearfix:after{display:block;content:".";clear:both;visibility:hidden;line-height:0;height:0} .clearfix{display:inline-block} html[xmlns] .clearfix{display:block} * html .clearfix{height:1%} 2011 Updated Clearfix .clearfix:before, .container:after{display:table;content:""} .clearfix:after{clear:both} /* IE 6/7 */ .clearfix{zoom:1}
두줄이상 여러줄 멀티라인 말줄임 처리 (-webkit-line-clamp)
CSS웹킷엔진의 기본기 .ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:break-word; } 크로스브라우징을 위해 height 를 정해줘야 하는데 이때 line-height 와 자르려고 하는 라인수를 계산해서 넣어 줘야함 .ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; /* 라인수 */ -webkit-box-orient: vertical; word-wrap:brea..