CSS note on redgoose note

CSS note

Nest: Development Category: html/css 2019-06-30

CSS관한자료(선택자 지원에 관한 도표와 css3에 관한 설명)

http://www.clearboth.org/css3_1_by_isdn386/

브라우저별 CSS지원여부에 관한 도표(예제도 마련되어있음)

http://kimblim.dk/css-tests/selectors/

IE7에서 display:inline-block 속성이 안먹힐때 해결방법

div {
  display:inline-block;
  *zoom:1;
  *display:inline;
}

input태그 type="number" 속성에서 우측 컨트롤 버튼 삭제하기 (webkit 브라우저)

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

익스플로러에서 이미지가 확대축소되었을때 이미지 깨짐방지하기

img {
  -ms-interpolation-mode: bicubic !important;
}

clearfix(float속성을 사용하는 엘리먼트에서 height가 없어지는 현상 해결)

.clearfix{
  zoom:1;
}
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden
}

ios에서 부드러운 overflow:scroll가능하게하기

overflow: scroll;
-webkit-overflow-scrolling: touch;

가로세로 비율을 유지하는 반응형 박스

http://hyeonseok.com/soojung/css/2012/08/22/712.html

스프라이트 이미지셋을 불러올 준비 (scss)

// image sprite
%sp-ico {
  background-image: url("../images/sp-icons@1x.png");
  background-repeat: no-repeat;
  background-color: transparent;
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 1.33dppx) {
    background-image: url("../images/sp-icons@1x.png");
    background-size: 100px 200px;
  }
}
div {@extend %sp-ico;}

배경으로 그리드 라인 깔기

css만 사용하여 배경에 격자선넣기

http://codepen.io/redgoose/pen/MYrEvM

CSS3로 구현된 페이지의 IE7~9 대응 이야기

CSS3를 활용한 모바일 페이지를 최대한 HTML 수정없이 IE 하위 버전에서도 정상노출하기 위한 테스트를 진행하였었습니다.
이를 위해 조사해보니 다양한 방법이 있어, 그 중 몇가지 적용 사례를 소개합니다.

http://wit.nts-corp.com/2015/01/28/3032

iOS에서 레이어 팝업을 띄었을때 아래족에 있는 body가 스크롤되는 현상에 대한 이슈

html,
body {
  position: fixed;
  overflow: hidden;
}

속성을 주면 아래쪽 스크롤이 되지 않는것을 확인했음.
하지만 스크롤이 되어야 하는 상황인데 간혹 안되기도 하기 때문에 추천하는 방식은 아니다.

A Complete Guide to Flexbox

display: flex 속성에 대해서 알 수 있는 포스트

https://css-tricks.com/snippets/css/a-guide-to-flexbox/