본문 바로가기
728x90
300x250
SMALL

Front-end/HTML80

Tooltip 툴팁 css 디자인 바꾸기 툴팁 만드는 법은 매우 간단하다. 그냥 title만 넣어주면 된다. 툴팁 툴팁 디자인을 바꾸기 위해 css로 만들어서 모양을 예쁘게 꾸며서 만들 수도 있다. 기능이 그냥 hover 했을 때 옆에 뜨면 그만이니 간단하게 만들어 줄 수 있다. See the Pen by kim oya (@ttuttu) on CodePen. 2021. 7. 20.
SVG 아이콘 만들고 색상 변경하기 SVG 아이콘 만들기 1. 일러스트레이터에서 SVG로 만들어줄 아이콘을 선택하고 마우스 오른쪽을 눌러서 Export Selection...을 클릭합니다. 2. Export for Screens 화면이 나오면 오른족에 Export to:에 저장할 폴더위치를 넣고 Formats:을 SVG로 변경하고 Export Asset을 클릭합니다. 3. 그러면 이렇게 저장된 svg를 확인할 수 있습니다. SVG 아이콘 사용하기 html에 바로 넣기 css로 background로 사용 .icon { background: #fff url(../image/CallX.svg); background-repeat: no-repeat; background-size: 40px; background-position: 60% 50%; }.. 2021. 7. 19.
버튼에 텍스트 bg 이미지 넣고 글자 안보이게 하기 1번 방법 .plan_choice ul li.italy_area .info button { background: url(../image/contents/sub_sprite.png) -347px 0px no-repeat; width: 53px; height: 14px; border: 0; display: table-cell; vertical-align: middle; white-space: nowrap; text-align: center; text-indent: 100%; } .favorite-wrap .sect-favorite > button[type='button'] 2번 방법 .paging .btn { background: url(../images/button/paging.png) no-repeat;.. 2021. 7. 10.
font-smoothing 폰트 부드럽게 만들기 부드러운 폰트를 만들기 위해서 css의 -webkit-font-smoothing를 사용할수 있습니다. -webkit-font-smoothing: antialiased; 이 기능은 비표준이라서 모든환경과 브라우저에서 적용되는 것은 아닙니다. 구문(Systax) /* Keyword values */ font-smooth: auto; font-smooth: never; font-smooth: always; /* value */ font-smooth: 2em; /* Global values */ font-smooth: inherit; font-smooth: initial; font-smooth: revert; font-smooth: unset; 속성 auto - 브라우저가 자동으로 결정하도록 합니다. 하위 픽셀.. 2021. 7. 7.
728x90
반응형
LIST