[CSS][TIP] 드래그 방지

user-select: none; /* 브라우저 의존성 명시 */ -ms-user-select: none; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none;

[CSS] [TIP] DO background-size: cover; ( NOT auto 100% )

뒷 배경을 꽉 채우기 위해서 background-size: auto 100%; /* width height */ 혹은 background-size: cover; 를 사용하는데. auto 100%; 를 사용하게 될 때, 큰화면에서 border-radius 부분을 처리 못하는 오류가 있어서 cover를 사용하는 것이 더 좋다.

Canvas Dojo - HTML5 Canvas를 공부하는 가장 쉬운방법

HTML5의 Canvas기능을 이용하면, CSS만으로는 구현하기 힘든 다양한 창작물을 구현할 수 있습니다. 하지만 구현은 생각보다 귀찮고, 쉽지 않죠.. See the Pen 30,000 Particles by Justin Windle (@soulwire) on CodePen. - 30,000 Particles by Justin Windle Vscode에서 Canvas를 공부하는데 좋은 툴을 소개합니다. Canvas Dojo - Arthur Kim Canvas Dojo - Visual Studio Marketplace Extension for Visual Studio Code - snippets and plugins for html5 canvas development marketplace.visualst..

[CSS] 밑줄긋기

See the Pen abJvKRZ by YoungSoo Kim (@znxkznxk1030) on CodePen. 가상 요소(pseudo-element)인 ::after 를 이용해서 밑줄을 그어봅시다. 가상요소(pseudo-element)란? 선택자에 추가하는 키워드로, 선택자의 특정 부분만 스타일 하기위해 사용합니다. 비슷한 요소로 가상클래스(pseudo-classes)는 선택자의 특정 상태에 스타일 하기위해 사용합니다. CSS3부터는 가상클래스는 :로(:hover, :active, 등) 시작하고, 가상요소는 ::로(::after, ::before, 등) 구분해요. * CSS2까지는 :after로 사용했지만 CSS3부터는 ::after로 사용하길 권장합니다. 1. 밑줄 생성 ::before와 ::aft..

[CSS] 삼각형 만들기

See the Pen JjEgdoB by YoungSoo Kim (@znxkznxk1030) on CodePen. 웹 브라우저에 표현하기 위한 언어인 HTML와 CSS은 Box Model 기반으로 구성되어 있습니다. 그렇기 때문에, HTML/CSS에서 네모난 박스를 구하는건 쉽고 자연스러운 일입니다. width, height의 값을 설정하여 박스의 크기를 지정하고, background에는 원하는 색을 넣으면 간단한 형태의 박스가 만들어 집니다. .square { height: 100px; width: 100px; background: #6592CF; } 그리고 원은 각 모서리의 굴곡(border-radius)의 정도를 조절하여 타원부터 정원의 형태까지 구현가능합니다. .circle { height: 10..

[CSS] 버튼 treflip하기

Treflip Button(완성된 버튼) Rotating Button l6y4o.csb.app 저는 여가 시간이 되면 스케이트 보드를 종종 타곤 하는데요. 스케이트 보드 탈 때 가장 신나는 순간은 새로운 트릭을 배우는 것이 아닐까 합니다. 트릭들은 기본적으로 띄우고 돌리는 두가지 특징을 가지고 생성됩니다. 이 두 특징을 이용해서 바닥과 평행하게 보드만 반 돌리면 Shuv-it (셔빗) 몸과 같이 반 돌면 방향에 따라 fs180, bs180 (프론트사이드 원-에이티, 백사이드 원-에이티) 보드 정면 방향에서 90도 방향으로 한바퀴 돌리면 kickflip( 킥플릭 ) 또는 heelflip ( 힐플립 ) 라고 불리게 됩니다. 토니 호크의 21가지 스케이트 트릭 그리고, 두 개 이상의 트릭이 섞여서 새로운 트릭..