CSS

시스템 기본 폰트를 사용한다면 같은 글자수여도 맥의 가로폭과 윈도우의 가로폭이 다르다. 이럴때 흔히 'IE만 자간 조정 가능한가요?' 라는 질문을 받게 되는데, 쉽게 생각하기엔 userAgent 체크를 해서 해당 브라우저가 IE인지 아닌지 판단하고 IE 일때 특정 클래스를 넣어서 블라블라~ 이런 식으로 의식의 흐름이 닿아서 '아... 굳이...?' 이런 생각이 들었다. 그러다 며칠전에 특정 브라우저일때를 미디어쿼리로 판단하는 핵을 봤던게 생각이 나서 IE도 있을 것 같아서 검색을 해봤다. 역시나 있었다. 나는 일을 시작한 이래로 쭉 글로벌 서비스 위주로만 일을 했어서 사실 IE 대응이 능숙하진 않다. 그래서 다들 이미 알고 있을 수도 있지만 이렇게 새롭게 알아가는 것들이 생긴다. @media all an..

예제) Flex를 활용한 푸터 위치잡기 Header Footer 흔히 flex를 사용할 때, 위의 예제 코드처럼 margin-top: auto; 를 사용하면 푸터가 바닥에 쉽게 붙일 수 있다. 문제) IE에서는 min-height 값만으로는 적용불가 그런데 ie에서 제대로 적용되지 않는 margin: auto; 값을 제대로 표현해주지 않을 때가 있다. 부모 요소의 높이를 min-height로 잡는 경우에는 적용되지 않는 것을 확인할 수 있다. 해결방법) min-height 보다 작은 값의 height 값을 지정해준다. Header Footer 제일 작은 사이즈의 핸드폰 해상도도 320x568 이기 때문에 height는 임의로 500px을 넣었다. (사실 코드 동작은 height: 0; 만 넣어도 된다.)..

1. SVG 코드를 활용할 순 없을까? See the Pen gyrqYe by zinee (@zineeworld) on CodePen. 2. SVG 코드를 Data URI로 변환하기 검정색 아이콘이 SVG의 Data URI 값을 넣은 것이고, 파란색이 SVG 코드를 그대로 넣은 것입니다. IE 에서는 background-image 에 코드를 넣으면 보이지 않는 다는 것을 확인했습니다. 아래 주소를 각 브라우저에 띄워 확인해 보실 수 있습니다. https://zineeworld.github.io/demo/svg_fonticon_test.html 을 주로 변환하는 단순한 작업이지만 아래 사이트를 이용하면 빠르고 쉽게 변환이 가능합니다. (2021/04/15 수정) 위 사이트를 통해 SVG 코드를 Data-U..

이런 디자인의 버튼이 있을 때, 폰트에 그라디언트만 적용할 수 있다면 굳이 이미지 에셋으로 뽑지 않아도 된다. [참고]https://css-tricks.com/snippets/css/gradient-text/http://caniuse.com/#search=-webkit-background-cliphttp://caniuse.com/#search=-webkit-text-fill-color See the Pen [CSS] font gradient by zinee (@zineeworld) on CodePen.

See the Pen [CSS Drawing] Single Element Profile (ZINEE) by zinee (@zineeworld) on CodePen. 정말 오랜만에 CSS 드로잉!단일 요소만 사용해서 모두 box-shadow로 그렸습니다 :-)

"보더에는 그라디언트 못 넣어요?" 디자이너님의 말 한마디에서 시작되었다. 그라디언트는 당연히 배경색에나 넣는 건 줄 알았던 나는 (!!!) 부랴부랴 방법이 있는지 찾아봤다. 역.시.있.었.다 https://developer.mozilla.org/ko/docs/Web/CSS/border-image-slicehttps://developer.mozilla.org/en-US/docs/Web/CSS/border-image-width See the Pen [CSS] gradient border by zinee (@zineeworld) on CodePen.

See the Pen CSS Drawing - 20. Santa by zinee (@zineeworld) on CodePen. 넘 귀여워서 안 그릴 수가 없었다 >.

See the Pen CSS Drawing - 19. Rudolph by zinee (@zineeworld) on CodePen. 마지막 루돌프까지 완성!뿔 그리는게 은근 고되군요....디자인 참고 : 이니스프리 마이쿠션

See the Pen [CSS Tip] Text hover effect by zinee (@zineeworld) on CodePen.

See the Pen CSS Drawing - 18. Santa Claus by zinee (@zineeworld) on CodePen. 산타클로즈! ^0^디자인 참고 : 이니스프리 마이쿠션