텍스트 링크에 밑줄 없애는 법 CSS 2022. 8. 6. 텍스트 링크 티스토리 TIP : 간단하게 링크가 걸린 글에 밑줄을 없애는 방법입니다. 기본적으로 링크가 걸리면 밑줄이 생기지만, 요즘은 디자인적으로도 밑줄을 없애는 추세입니다. 링크의 경우 별도 컬러와 볼드 처리를 통해서 강조합니다. 1. 적용방법 링크를 없애는 방법은 CSS 편집을 열어서 코드를 추가해주면 됩니다. none : 선이 없음 line-through : 취소선 overline : 글자 위에 선 underline : 글자 아래에 선 initial : 기본값으로 inherit : 부모 요소의 속성값을 상속 받음 a { text-decoration: none; } 한 줄을 입력하면 텍스트에 걸린 링크를 없앨 수 있습니다. 복잡한 코드로 적용이 안될 경우에 important를 추가해주면 됩니다. a..

움직이는 마우스 버튼 CSS 2022. 8. 6. 마우스 버튼 아이콘 해당 소스는 Dribbble에서 확인하실 수 있습니다. Micro animation for site scroll icons Also check little different version in attachment. Thanks. Here are code versions too Created by Awesome guys from codepen. SVG version by Mishka Pankvelashvili and CSS version by Ryan Mulligan Full presentation on Behance dribbble.com Also check little different version in attachment. Thanks. Here are code versions ..

CSS3 filter 속성과 함수 및 예제 2022. 8. 5. HTML5이나 CSS3를 처음 시작했을 때 너무 어려워서 어떻게 공부를 시작해야 하는지 감이 안 왔던 적이 있습니다. 그렇다고 시간이 지나서 어떤지를 묻는다면 여전히 너무 어려워서 미칠 것 같다.라고 말할 수밖에 없을 것 같습니다. CSS는 CSS1부터 CSS2.1 그리고 현재 CSS3으로 꾸준히 개발되었습니다. 웹 개발을 할 때 화면을 아름답게 꾸며주는 스타일 시트 언어인 CSS3를 공부하는 것은 필수라고 할 수 있겠죠. 그만큼 이전 버전에서 어렵게 구현할 수밖에 없었던 부분들이 순차적으로 새로운 것들이 개발되면서 이제는 매우 쉽게 화면을 꾸밀 수 있는 방법들이 많아졌습니다. 그러한 것들 중 하나가 바로 filter 속성입니다. 이미지를 매우 쉽게 다룰 수 있습니다. /* SVG 필터를 가리키는 URL..

스크롤바 없애는 CSS 2021. 10. 7. 스크롤 기능은 존재하지만, 스크롤바가 보이지 않는 CSS 부분적으로 적용할 경우, 특정 섹션에는 클래스로 선택자를 잡고 적용하면 된다. 한 웹사이트의 전체에 적용할 경우, 아래의 스타일을 그대로 적용하면 된다. body{ -ms-overflow-style: none; } ::-webkit-scrollbar { display: none; }

이미지 클릭 되지 않게 하는 방법 - pointer-events 2021. 7. 24. 이 방법은 CSS 속성을 활용하는 방법으로 이미지를 포함한 그래픽 요소가 포인트 이벤트의 대상이 될 수 있는 상황에 따라 설정할 수 있다. 사용 방법은 간단하며, 아래에 예제가 준비되어 있다. Pointer-events pointer-events: auto; pointer-events: none; pointer-events: stroke; /* SVG-only */ pointer-events: fill; /* SVG-only */ 위와 같이 일반적으로 사용되는 속성 값으로 만약, 이미지에 대해 어떤 이벤트도 발생하지 않게 하려면 pointer-events: none;를 적용해주면 된다. Syntax /* Keyword values */ pointer-events: auto; pointer-events: ..

-webkit-이란 무엇인가? 2021. 7. 17. -webkit- 웹페이지에 적용된 속성을 살펴볼 때 -webkit-이라는 prefix가 붙은 속성을 볼 수 있다. 이는 표준화가 되지 않은 새로운 기능들의 속성일 경우 -webkit-이라는 prefix를 달고 등장한다는 것이다. 많은 브라우저가 있지만, 대표적으로 Chrome이나 Safari 등의 브라우저에 탑재된 엔진으로 해당 브라우저에서만 작동한다. 따라서, 이러한 기능들을 활용해서 웹페이지를 구성하면 구형 IE에서는 작동하지 않아 제대로 오브젝트가 표현되지 않는다. Webkit CSS properties -webkit-animation -webkit-animation-delay -webkit-animation-direction -webkit-animation-duration -webkit-anima..