CSS note

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/

브라우저 가로 스크롤과 100vw속성문제 해결하기

가로 사이즈를 풀로 채우기 위하여 width: 100vw;값을 사용하는데 데스크탑 브라우저에서는 나올 필요가 없는 가로스크롤이 생긴다.
이럴때 다음과같이 대처로 안나오게 할 수 있다.

.box {
  width: 100vw;
  max-width:100%; /* added */
}

출처: https://stackoverflow.com/a/23367686

투명을 상징하는 checker 패턴 소스

https://codepen.io/naradesign/pen/xxqVJEV

포토샵으로 보는 투명한 배경패턴을 css 로 표현하는 예제

다크모드로 적용

css로 아무리 다크모드를 적용한다고 해도 브라우저 UI 부분(스크롤, 날짜선택창.. 등등)들은 UI가 다크모드로 적용안된다.
그래서 다음과 같이 현재 상태가 다크모드라고 지정해줘야 한다.

:root {
  color-scheme: dark;
}

특정 비율대로 height 사이즈 사용하기

aspect-ratio 사용할 수 없는 환경이라면 이렇게 사용해봄직하다.

img {
  width: var(--width, 160px);
  height: calc(var(--width, 160px) * 95 / 160);
}

줄바꿈

p {
  word-break: keep-all;
  overflow-wrap: break-word; 
}

이정도로 처리해주면 단어 중간에서는 줄바꿈하지 않고, 공백없이 긴 알파벳은 줄바꿈 처리할 수 있도록 한다.
간혹 가로 공간을 뚫고 커지는 경우가 있는데 이것은 부모 영역에서 flex나 grid를 사용할 경우에 그런 현상이 일어나므로 min-width: 0속성을 넣어줘 대응해줘야 한다. (작동 자체는 문제 없다는 의미다!)

pre 엘리먼트는 위 예제가 안먹히기 때문에 다음과 같이 대응해줘야 한다.

pre {
  white-space: pre-wrap;
}

출처: https://twitter.com/naradesign/status/866552587864072192

Hand Drawn Border Effects

외곽선을 사용해서 표현. border-radius값을 이용하여 표현한다.

https://codepen.io/tmrDevelops/pen/NPXodB

유연하게 필드 사이즈 변경해주는 속성

input 같은 폼 엘리먼트 사이즈가 고정되어 있어서 언제나 불만이었는데 div 에서 필드로 바꿔서 사용하는 방법같이 쓸 수 있게 된듯하다.
이건 꼭 사용해보고 싶어지네..

input { field-sizing: content; }

참고 비디오: https://www.youtube.com/watch?v=ElELqkwzcYM
https://developer.mozilla.org/en-US/docs/Web/CSS/field-sizing

부드러운(Squircle) 라운드 만들기

iOS에서 먼저 등장했던 곡선 방식이었는데 웹에서는 엄청 오랫동안 지원이 안되어 왔는데 어느새 css가 등장했나보다.
Squircle(스퀘어클)이라는 이름이던데 곡선의 형태가 더 이쁘게 보인다.

아직 많은 브라우저에서 지원되는것은 아니지만 그래도 네이티브에서 사용할 수 있다는 점에서 좋아 보인다.

mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/corner-shape-value
프리뷰 링크: https://www.squircle.style