[CSS] Multiline underline hover effect
·
개발일지/2019
See the Pen [CSS] Multiline hover underline effect by zinee (@zineeworld) on CodePen. 피그마(https://www.designsystems.com/) 사이트 들어갔다가 대문글 효과가 인상적이어서 바로 가져왔다. background-image: linear-gradient()로 만든 효과였다. 먼저 투명하게 깔고 밑줄로 표현하고 싶은 부분에만 색상을 넣어주면 이렇게 만들 수 있다! background-image: linear-gradient(transparent 60%, #F8CD07 40%) 간단한 개념이지만 이걸 처음 생각해낸 사람들이 진짜 멋지다. 얼마나 창의적으로 CSS를 활용하는가는 정말 쓰는 사람에게 달려있는 것 같다. 오늘도 ..
[20190406] 봄 밤, 반짝이는 헤이조이스 파티
·
지니월드/경험
헤이조이스 오픈 할 때부터 알고 있었는데 이래저래 시간이 안맞아서 못 가보다가 비회원도 함께 할 수 있는 파티가 있다고 해서, 지인과 함께 다녀왔다. 노란색 참 좋아하는데 온통 노란색 천지여서 진짜 신났었다. 여자들만의 프라이빗 소셜 라운지! 다양한 분야에서 일하고 있는 여성들과 자유롭게 이야기 나눌 수 있는 분위기가 참 좋았다. 무엇보다 회원제로 운영되고 있기 때문에 프라이빗한 느낌이 참 좋았다. 집이랑 멀어서 공간 활용이 어려울 것 같아 멤버십 가입은 하지 못했지만 프리랜서라면 개인작업하기 참 좋을 것 같아보였다.
[Git] MacOS Mojave 업데이트 후 Error updating changes: Cannot identify version of git executable /usr/bin/git
·
개발일지/2019
모하비 업데이트 하고 나서 웹스톰 켰더니 에러가 두둥 which git 해서 git 경로 확인 후 cmd + , (콤마) 눌러서 Preference > Version Control > Git > Path to Git executable 주소 변경 이렇게 하니까 해결됐다!
[HTML] rel="noopener noreferrer"로 새 창으로 열기 보안 취약점 보완하기
·
개발일지/2019
rel="noopner" or rel="noreferrer" 새 창으로 띄우는 경우가 정말 많은데 보안에 취약할 수 있다는 것을 알았다. 거래소는 피싱 사이트의 위험이 늘 있기 때문에 유념해야할 것 같다. 좋은 정보 공유해주신 찬명님 늘 감사합니다! 웹에서 새 탭으로 외부 링크를 띄우는 경우 보안 취약점과 대안들. target=_blank, https://t.co/2ktQi5jVUj()을 사용하여 외부 링크를 연결하는 경우 피싱 공격에 노출. https://t.co/wAke6M10tGhttps://t.co/ueCaIamaRthttps://t.co/tsoDoKrZkX — 정찬명 (@naradesign) April 12, 2019 MDN 문서에도 아래와 같은 문구가 적혀있다. https://developer..
[Angular] -webkit-line-clamp is not working (v.7.1.2)
·
개발일지/2019
앵귤러6에서 이미 리포트 된 내용이라고 한다. 현재 앵귤러 v.7.1.2에서도 같은 문제가 발생해서 찾아보게 됐다. https://github.com/angular/angular/issues/24183 -Webkit-Line-Clamp Not Working in Angular 6 · Issue #24183 · angular/angular I'm submitting a... [ X ] Regression (a behavior that used to work and stopped working in a new release) [ ] Bug report [ ] Performance issue [ ] Feature request [ ] Documentation issue or requ... github.com ..
[SVG] background-image에 SVG를 넣어 사용하기 (업데이트 21.04.15)
·
개발일지/2019
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..
[Sass] CSS로 아이콘(chevron, >) 그리기
·
개발일지/2019
'>' 모양이 단순하니 CSS로 그릴 수 있지 않을까 하고 생각했습니다. 사각형의 테두리를 2면에만 그리고 -45도로 회전시키면 '>'와 같은 모양이 그려집니다. 1px로 그려지는 '>'을 나타내기엔 쉽고 빠른 방법입니다. See the Pen [CSS] link hover style by zinee (@zineeworld) on CodePen.
[20190329] Women in Developer Circles Seoul <We're just ordinary IT people>
·
지니월드/경험
2019년 3월 29일 금요일 오후 7시 스파크플러스 선릉역점에서 열린 DevC 행사에 다녀왔습니다. 개인의 배경(소속)을 뒤로하고 신청서를 바탕으로 추첨을 통해 함께 할 수 있는 자리였습니다. #진행-유림님 #네명의연사들 #가장좋았던것 (
알파벳으로 파비콘 만들기
·
개발일지/2019
지니월드를 나타낼 수 있는 'Z' 로 간단하게 파비콘을 만들려고 알아보다가 발견한 사이트입니다. 간단하게 포토샵이나 디자인 툴 없이 웹에서 파비콘을 만들 수 있습니다. https://favicon.io/favicon-generator/ 다운로드하면 이렇게 세트로 받을 수 있습니다.