css

Webpack autoprefixer 적용 안될 때 해결법

sass loader에 postcss loader를 사용하는 도중, autoprefixer가 적용안되는 문제점이 있었다. 구버전의 경우에는 default로 webkit prefix를 붙여주었다고 하는데, 내가 쓰는 10버전은 아예 작동조차 하지않았다. 이 경우, browserslist를 정의해주면 작동이 되는 것을 확인 할 수 있다. 참고로 공식문서에서도 autoprefixers 는 브라우저 리스트를 사용한다고 한다. (설정안하면 작동이 안됨..) 먼저 webpack 설정을 살펴보자. webpack.common.js const postcssLoader = { loader:'postcss-loader', options:{ postcssOptions:{ config: path.resolve(__dirname..

React-native background-position 사용법

의외로 간단하다. width:null (타입스크립트의 경우에는 null로 하면 빨간줄 생겨서 undefined로 함) 그리고 좌 우측 아래 위로 더 짜르고 싶은 경우에는 borderBottomWidth: -30 이런 식으로 음수를 주는 경우를 택하기도 한다. 물론 Width 값이 null이나 undefined와 같이 정확한 값을 가리키지 않는 것을 전제로 한다. css로 치면 background-position 을 사용하는 것과 거의 동일하다고 볼 수 있다.

HTML에서 이메일 유효성 체크하기 (HTML5)

이메일 유효성 체크는 자바스크립트로 많이 해왔다 ( 특히 정규표현식을 이용해서 ) 이건 다음 포스팅에서 다뤄보기로 하고, 이번 포스팅에서는 편하게 이메일 유효성 체크하는 법을 알아보기로 한다. 아래의 코드를 보도록 하자. 인터넷을 찾아봤는데 input 태그의 type속성에 email만 줘도 체크를 한다는데 내껀 안한다. HTML5 속성을 찾아보니 required가 있는데 이 속성을 줘야만 제대로 유효성 검증을 한다. 또한 required 속성은 어느 input 태그에서나 사용할 수 있다. 당연한 말이겠지만 submit과 함께 form에 속해있지 않으면 체크가 안된다. input type="email", required 속성을 주면 유효성 체크를 한다! 아래는 결과값이다.