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

CSS 움직이는 마우스 버튼 CSS 3년 전 마우스 버튼 아이콘 해당 소스는 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 ..

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

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

CSS 이미지 클릭 되지 않게 하는 방법 - pointer-events 4년 전 이 방법은 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: ..

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

CSS 간단한 웹배너 만드는 방법 4년 전 간단한 웹 배너 만드는 방법 쉽고 간단하게 웹 배너로 활용할 수 있는 요소입니다. 닫기 버튼이 지원됩니다. 닫기 HTML으로 적용하고, 별도의 노드 클릭 이벤트로 닫을 수 있습니다. 클래스를 지정해서 스타일을 적용한다면 더 멋진 웹 배너로 활용할 수 있을 것입니다.

CSS CSS 다중 선택자 참조 4년 전 CSS 선택자 CSS에서 선택자는 스타일을 설정할 요소를 선택하는 데 사용되는 패턴이다. 대부분의 선택자 요소에 대한 사용법과 설명을 번역 및 이해하기 쉽도록 구분해놓았으므로, 이를 통해 선택자 활용 능력을 발전시킬 수 있을 것이다. 선택자 예시 예제 설명 .class .intro class="intro"의 모든 요소를 선택합니다. .class1.class2 .name1.name2 name1과 name2가 모두 설정된 모든 요소를 선택합니다. .class1 .class2 .name1 .name2 name1 요소와 함께 name2의 하위 항목인 모든 요소를 선택합니다. #id #firstname ID="#firstname"인 요소를 선택합니다. * * 모든 요소를 선택합니다. element p 모든 p 요..

CSS 웹 디자인을 위한 디바이스 별 스크린 사이즈 4년 전 디바이스 별 스크린 사이즈 스마트폰, 태블릿뿐만 아니라 노트북 화면의 스크린 사이즈 정보를 찾아볼 수 있습니다. 각 구분은 모델명, 운영체제, 물리적 크기, 폭, 높이, 밀도, 비율, 인기도에 따라 구분되었습니다. 맨 하단의 원본 데이터 제공 사이트에서 우측 상단의 필터 기능을 활용하여 각 분류표에 맞게 원하는 내용만 분류할 수 있습니다. 모델(디바이스) 운영체제 물리적크기 물리적크기(CM) 폭(px) 높이(px) 장치 폭 PX PER INCH PX 밀도 가로 세로 비율 인기 Apple iPhone 8 Plus iOS 5.5 13.9 1080 1920 1080 401 100% MDPI 16 : 9 100 Apple iPhone 7 Plus iOS 5.5 14.0 1080 1920 1080 401 100%..

CSS [CSS] 텍스트 커서(caret) 색상 변경 4년 전 텍스트 커서(caret) 정의 웹페이지의 텍스트 커서 색상을 변경하기 위해서는 CSS의 caret-color 속성을 적용할 수 있습니다. 다소 생소한 속성인 caret-color을 이용하면 텍스트를 작성할 때 깜빡이는 커서의 색상을 변경할 수 있습니다. 원래는 별도로 설정하지 않아도 텍스트 색상의 색깔을 그대로 따라가지만, 텍스트 색상과 무관하게 별도로 색상을 지정해주고 싶은 경우에 적용이 가능합니다. 적용 예시 /* Keyword values */ caret-color: auto; caret-color: transparent; caret-color: currentcolor; /* values */ caret-color: red; caret-color: #5729e9; caret-color: rgb(0,..

CSS CSS3 텍스트 그림자 효과(Text Shadow Effects) 4년 전 CSS3 텍스트 그림자 효과(Text Shadow Effects) 4가지 Elegant Shadow Deep Shadow Inset Shadow Retro Shadow 해당 기술은 텍스트에 그림자 효과를 입히는 방법으로 총 4가지 스타일이 있다. 어떤 스타일을 선택하든지 그것은 취향 차이다. 개인적으로 Deep Shadow와 Inset Shadow가 가장 깔끔해보인다. 해당 스타일은 필요한 부분만 가져와서 활용할 수 있을 것이다. %h1.elegantshadow Elegant Shadow %h1.deepshadow Deep Shadow %h1.insetshadow Inset Shadow %h1.retroshadow Retro Shadow h1 { font-family: "Avant Garde", Avan..

CSS 유니코드(Unicode) 한글 범위 4년 전 한글 범위 U+1100 ~ U+11FF 한글 자모 ㄱ ~ ᇿ 256 U+3000 ~ U+303F 한중일 문장부호 ・ ~ ー 2 U+3130 ~ U+318F 한글 호환 자모 ㄱ ~ ㆎ 94 U+A960 ~ U+A97F 한글 확장 자모A ꥠ ~ ꥼ 29 U+AC00 ~ U+D7AF 한글 글자 마디 가 ~ 힣 11,172 U+D7B0 ~ U+D7FF 한글 확장 자모B ힰ ~ ퟻ 72 U+FF00 ~ U+FFEF 반각 자모 ﾡ ~ ￜ 52 U+3400 ~ U+4DBF CJK Unified Ideographs Extension A (한중일 통합 한자 확장 A) 6,592 6,582 한자 U+4DC0 ~ U+4DFF Yijing Hexagram Symbols 64 64 일반 U+4E00 ~ U+9FFF CJK Un..

CSS CSS 이미지 스프라이트란 무엇일까? 4년 전 이미지 스프라이트(image sprite) 웹사이트를 구경하다가 마음에 드는 이미지를 발견해서 살펴보면, 하나의 이미지에 여러 개 이미지들이 포함되어 있는 것을 이미지 스프라이트라고 합니다. 하나의 이미지에 여러 개의 이미지를 찾고 CSS로 해당 부분의 이미지만을 사용하는 것이죠. 이런 방식을 사용하는 이유는 웹 사이트의 로딩 시간을 줄이기 위해서입니다. 일반적인 블로그나 개인이 운영하는 블로그는 굳이 이미지 스프라이트를 할 필요는 없지만, 트래픽이 매우 많거나 많은 사람이 이용하는 검색포털과 같은 사이트에서는 이렇게 아이콘 형식의 이미지들은 이미지 스프라이트를 사용하여 서버 요청을 줄이고 웹 페이지의 로딩 시간을 단축시켜줍니다. 이렇게 하면 로딩시간이 작아지면서 사이트의 품질이 높아지는 결과를 가져올 ..

CSS 라이트 모드 다크 모드 토글스위치 CSS(Dark Mode toggle switch) 디자인 4년 전 1) Switch Button See the Pen Switch Button by Hugo (@kapz) on CodePen. 2) Switch ButtonPure CSS Toggle Buttons | ON-OFF Switches See the Pen Pure CSS Toggle Buttons | ON-OFF Switches by Himalaya Singh (@himalayasingh) on CodePen. 3)CodePen Home Pure CSS toggle buttons See the Pen Pure CSS toggle buttons by Mauricio Allende (@mallendeo) on CodePen. 4) Switch See the Pen Switch by Fabrice Lejeune ..

CSS 맥 OS Dock 구성(Mac OS Dock) 4년 전 맥 OS Dock 구성(Mac OS Dock) 순수 CSS3와 HTML이 있는 MacOS Dock 메뉴가 가능할까요? 우리는 웹 애플리케이션에서 다양한 종류의 메뉴를 봐왔습니다. 메뉴에는 다양한 스타일, 다양한 애니메이션, 다양한 색상 등이 사용됩니다. MacOS에 익숙하다면 도커 메뉴가 어떤지 잘 알고 있을 것입니다. 도커는 화면 하단에 있는 아이콘 모음입니다. Mac에 있는 일부 Apple 애플리케이션에 쉽게 액세스 할 수 있습니다. 오늘은 CSS3로 Mac 스타일의 Dock Menu를 만드는 방법을 알아보겠습니다. MacOS Docker 메뉴와 비슷하게 생긴 메뉴는 CSS3와 HTML만 사용하는 메뉴입니다. 아시다시피 CSS3 속성은 아이콘에 애니메이션 효과와 반사 효과를 추가하는 데 도움이 될 것..