본문 바로가기

웹 관련 기록/HTML,CSS19

css에서 사용하는 단위 "em" em 단위는 부모 엘리먼트의 폰트 크기에 영향을 받는 단위. 해당 단위를 사용하면 부모 엘리먼트의 폰트 크기에 비례하는 크기가 적용됨. M을 뜻하며,이는 인쇄 타이포그래피에서 사용하던 단위 M을 단위명으로 사용한 것이라합니다.인쇄쪽에서 대문자 M의 크기를 기준으로 문자 크기 단위를 정했던 것이라고 하네요. 현재 모든 브라우저에서 지원 2017. 1. 11.
CSS3, box-sizing 속성과 calc() 함수 box-sizingcss로 크기를 지정하는 width, height 속성들은 기본적으로 padding, border 값을 포함하지 않습니다.아래 값을 사용하게되면 padding, border의 값들이 width, height 값을 참조하게 됩니다.box-sizing: border-box;사용할 수 있는 값 content-box 기본값, border, padding의 크기가 각자 적용 된다. border-box width, height 값 안에서 padding, border 값이 적용 된다. margin 값은 여전히 별개로 적용 된다. initial - inherit 부모 값과 동일하게 적용한다. 브라우저별 지원하는 최소 버전 지원하는최소 버전 26.019.0 -webkit- 12.0 9.0 16.04.0.. 2016. 4. 2.
ID나 Class의 값에서 대소문자 문제. 일부 브라우저에서 문서형식(DOCTYPE)이 선언되지 않았을 경우,대소문자를 구분하지 않고, 동일한 선택자로 인식하는 문제가 있다고 함. IE 5, Opera7 에서 구분하지 않는다고 들었음. 특이한 것은 css1 부터 첫글자가 숫자여도 인식한다는것 -_-;다만 브라우저따라 다를 수도 있겠다 싶습니다. 2014. 4. 23.
CSS에서 대소문자 구분여부, IE8,9,크롬 확인 테스트에 사용한 코드1234567.control:after {content:"111"; background:#eee}.Control:after {content:"222";} ​cs 구분이 안되었더라면 Control 에서 배경 색상이 나타나야 했는데, 아주 잘 됨. 테스트 : IE8, IE9, 크롬 2014. 4. 2.
CSS3 image-rendering 12345678910111213141516image-rendering: auto image-rendering: crisp-edges-webkit-optimize-contrast; image-rendering: pixelated-webkit-backface-visibility image-rendering: inherit /* 부모에게 상속받음 */ /* EX */image-rendering: -moz-crisp-edges; /* Firefox */image-rendering: -o-crisp-edges; /* Opera */image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */image-rendering: crisp-edg.. 2013. 11. 7.
HTML 다중 클래스를 IE6 이하 버전에서 지원하지 않는다. 혹시나 기록. IE6 이하 버전에서 지원하지 않는다. 2013. 9. 30.
320x100