[참고] https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type :nth-of-type() The :nth-of-type() CSS pseudo-class matches elements of a given type (tag name), based on their position among a group of siblings. developer.mozilla.org 첫번째 div.content-area에 특정 스타일을 주고 싶었는데, 왜 안되지 하고 한참 헤맸는데 생각해보니까 이 속성은 엘리먼트를 타깃으로 해야지 제대로 동작한다. 클래스명으로 되는 게 아니었다! 감 떨어져쓰 ㅠ_ㅠ See the Pen [CSS] :nth-of-type() by zin..
개발일지/CSS
[참고]https://stackoverflow.com/questions/34667409/why-is-the-css-border-color-inheriting-the-the-color-propertyhttps://developer.mozilla.org/en-US/docs/Web/CSS/border-color See the Pen [CSS] border-color inherits from color property by zinee (@zineeworld) on CodePen.
letter-spacing 을 쓰다가 이상한 글자를 발견했다. fi 가 떨어지지 않고 계속 붙어있는 것이다. Sketch에서도 이와 같은 이슈가 있었다는 걸 알았는데, CSS에서도 동일한 현상이 발견되었다. 근본적인 원인은 fi 은 ligature(합자)여서 한글의 ㅃ과 같이 한 글자로 인식하는 것이었다. 모든 폰트에서는 발생하는 것은 아니고 'Roboto Condensed'를 사용했을 때 발생했다. ligature(합자)① 두 글자 또는 세 글자를 합하여 한 글자로 만드는 것. 현대 한글 활자꼴의 ‘ㅃ ’의 경우 세로줄기 하나가 생략되어 사용되는 경우가 있는데 이런 경우를 이음자라 한다. 로마글의 리가츄어(ligature).② 둘 이상의 글자를 합하여 하나로 주조한 활자를 말하며, 구문 활자에는 fi,..
https://ux.stackexchange.com/questions/83184/is-user-select-none-bad-ux/83249https://www.webpagefx.com/blog/web-design/disable-text-selection/https://blogs.msdn.microsoft.com/ie_ko/2012/01/18/css-user-select/https://css-tricks.com/almanac/properties/u/user-select/http://caniuse.com/#search=user-select
--> https://github.com/filamentgroup/tablesaw/issues/58 table { table-layout: fixed; min-width: 100%; max-width: none; width: auto; }
이런 디자인의 버튼이 있을 때, 폰트에 그라디언트만 적용할 수 있다면 굳이 이미지 에셋으로 뽑지 않아도 된다. [참고]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.
"보더에는 그라디언트 못 넣어요?" 디자이너님의 말 한마디에서 시작되었다. 그라디언트는 당연히 배경색에나 넣는 건 줄 알았던 나는 (!!!) 부랴부랴 방법이 있는지 찾아봤다. 역.시.있.었.다 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 Tip] Text hover effect by zinee (@zineeworld) on CodePen.
인풋에 포커스 되었을 때 플레이스 홀더가 바로 사라지게 하려면 아래와 같이 CSS를 작성해줍니다. /* lastest version */ input::placeholder { /* Chrome, Safari, Firefox */ color: #222; opacity: 1; } input:-ms-input-placeholder { /* IE, Edge */ color: #222; opacity: 1; } /* old version */ input:focus::-webkit-input-placeholder { color: transparent; } input:focus::-moz-placeholder { color: transparent; } input:focus:-ms-input-placeholder { ..
See the Pen border-radius learning tool by Lavi Perchik (@laviperchik) on CodePen. border-radius는 꽤 자주 쓰는 속성인데 정확한 원리는 알지 못했었다.border-radius: n 으로는 자주 썼었지만, border-radius: n n n n / n n n n 은 CSS 드로잉을 하게 되면서 알게 되었다.그러다가 정확한 원리를 잘 설명해 준 코드가 있어서 공유해본다.
