CSS

여태까지 고쳐온 오류들 : 사파리 table 반응형 시 th/td 100% 안되는 문제

사파리 table 반응형 시 th/td 100% 안되는 문제 이 이슈는 세계 각국의 개발자들이 겪었는지 stack overflow에 다양한 해결방안이 나와있었다. 순서대로 시도해보자. 1. th,td에 float: left;를 줘보자. th, td {float: left;} 2.혹시.. 이 빠졌는지? (바보같지만 이랬던 적이 있었다) 3. 이래도 안되면 tr에 display: table-cell;을 줘보자 (안해봤지만 아무리해도 안되는 경우 이 방법으로 해결한 사람이 있다고 한다.) tr {display: table-cell;}

여태까지 고쳐온 오류들 : 사파리 텍스트 커지는 문제

사파리 텍스트 커지는 문제 사파리는 특정 태그 폰트사이즈를 씹는 이슈가 있다. 보통은 reset에서 지정하지만 혹시 빠져있는지 확인하자. html, body{ -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ } 호환성 : 보다시피 비표준 속성이므로 벤더 프리픽스를 이용해야 한다.

뒤늦게 알아서 뼈아픈 유용한 CSS : background-blend-mode

background-blend-mode background-blend-mode는 포토샵에 있는 레이어 블랜드 모드를 html에서도 구현할 수 있도록 도와준다. 백그라운드 img url을 두개를 적으면 앞 이미지가 뒷 이미지에 블랜드된다. (자식 div 백그라운드를 부모 백그라운드에 블랜드하는 식은 안 된다. : 혹시 되는 형태를 발견하면 수정할 것) div { background: url(../images/blend.png) center 40% no-repeat, url(../images/bg.png) center no-repeat; background-size: 276px 46px, cover; background-blend-mode: hard-light; } 위 코드는 내가 실사용했던 코드를 수정한 ..

뒤늦게 알아서 뼈아픈 유용한 CSS : aspect-ratio

뒤늦게 알아서 뼈아픈 유용한 css 시리즈는 내가 2년넘게 스스로 홈페이지 구축을 해오다 늦게 알아버린 css 모음이다. 또 까먹어서 어마어마한 시간을 들여 이 작은 css 한개를 구현하는 것을 막고자 블로그에 담는다. aspect-ratio aspect-ratio는 이미지나 객체의 비율을 지정해 반응형 등을 직관적으로 다룰 수 있게 도와준다. div { width: 100px; aspect-ratio: 4 / 3; /* 4:3 비율*/ } img, input[type="image"], video, embed, iframe, marquee, object, table { aspect-ratio: attr(width) / attr(height); } 호환성 : IE 빼고 전부 가능