듀비 라이프

지난 번에 글 작성했던 구글 머티리얼 아이콘처럼 XEIcon도 아이콘을 이미지 다운로드 없이 소스 상에서 사용가능한 아이콘 폰트이다. 개발할 때 구글 머티리얼 아이콘보다 더 자주 사용했던 것 같다. 실제로도 많은 개발자들이 프로젝트 진행 중 사용하고 있고, 구글 머티리얼 아이콘과 같이 사용하기도 한다. 두 아이콘 다 단순한 형태를 취하고 있기 때문에 잘 어울린다. XEIcon 소개 여러 icon을 폰트의 형태로 무료 사용이 가능하며, 영리적 이용도 가능하다. 아이콘의 색상과 크기 등을 CSS로 자유롭게 수정이 가능하다는 것도 큰 장점이다. XEIcon 사용 준비 XEIcon은 다른 웹폰트처럼 직접 파일을 다운로드 받아서 사용하거나, CDN의 형태로 사용할 수 있다. 아이콘을 적용할 개발 환경에 따라서 알..

input text의 placeholder에 css를 적용해야할 때가 있다. 아래와 같이 적용한다. 1 2 3 4 5 6 input:focus {outline:none} input::placeholder{padding-left:20px;color:#838383;font-size:14px;letter-spacing:-1.2px} input::-webkit-input-placeholder {padding-left:20px;color:#838383;font-size:14px;letter-spacing:-1.2px} input:-ms-input-placeholder {padding-left:20px;color:#838383;font-size:14px;letter-spacing:-1.2px} Colored by ..

1 .my_div{background:#404040 url('./search_icon.png') no-repeat;background-position:center center} cs 이미지 아이콘 백그라운드 색상 적용되도록 png 이미지 사용하는거 잊지 말기.

폰트 변환 폰트 변환이 필요하다. 만약, ttf 파일만 갖고있다면 해당 파일을 아래 사이트에 업로드 후 eot, woff2, woff 등으로 변환한다. https://convertio.co/kr/otf-ttf/ OTF TTF 변환 (온라인 무료) — Convertio otf 파일(들) 업로드 컴퓨터, Google Drive, Dropbox, URL에서 선택하거나 이 페이지에서 드래그하여 선택해 주세요. convertio.co 변환 후 다운로드 시 파일명에 prefix가 붙으므로 파일이름 변경하는거 잊지말기 변환 후 홈페이지 서버에 변환한 파일들을 적절한 경로에 업로드 후 아래 css 작성 css 작업 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2..

여러줄일때 여러 옵션이 더 들어간다. 1 2 3 4 5 6 /* 한 줄 */ .ellip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} /* 여러 줄 */ .ellipsis{ overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; line-height:1.2em; height:2.4em } Colored by Color Scripter cs 여러 줄일때, webkit-line-clamp 옵션, height 옵션을 변경한다. ex) 네줄까지 표기하려면 1 2 3 ..

* 가로 중앙정렬 1 2 3 4 5 6 7 8 9 10 .div1{position:relative;} .my_div {position:absolute;left:50%;transform:translateX(-50%);} Colored by Color Scripter cs * 세로 중앙정렬 1 2 3 4 5 6 7 8 .div1{position:relative;} .my_div {position:absolute;top:50%;transform:translateY(-50%);} Colored by Color Scripter cs

head에 아래 meta 선언 meta 선언 안하면 모바일에서 media query 내용이 모바일 화면에 맞춰서 보이지 않으므로 반드시 선언해야함 1 2 Colored by Color Scripter cs css에서 화면 사이즈에 따라 아래 코드 사용 1 2 3 4 5 6 7 8 9 .my_div{width:50%;} /*기본은 가로길이 50%*/ @media screen and (max-width:1500px){ .my_div{width:70%;} /*브라우저 길이가 1500px 이하일때 가로길이 70%*/ } @media screen and (max-width:768px){ .my_div{width:100%;} /*브라우저 길이가 768px 이하일때 가로길이 100%*/ } Colored by Col..

내가 자주 사용하는 스크롤 css 스타일 1 2 3 4 .scroll_style::-webkit-scrollbar {width:5px} .scroll_style::-webkit-scrollbar-track {background-color: transparent} .scroll_style::-webkit-scrollbar-thumb {border-radius: 5px;background-color: #aaa} .scroll_style::-webkit-scrollbar-button {width: 0;height: 0;} cs