프로그래밍
-
css3 스케일 알아보기 - transform: scale()프로그래밍/css 2021. 3. 18. 16:10
오늘은 간단하게 css3의 스케일을 활용해서 마우스를 갖다 댔을 때 해당 요소가 확대되는 scale() 기능에 대해서 알아보도록 하겠습니다. 오늘 알아볼 기능은 저의 블로그 메인화면에도 적용되어 있는 기능이기도 한데요 css3를 활용하면 기존에 script를 활용해야 했던 애니메이션 기능들을 매우 간단하게 구현할 수 있습니다. 이 트랜스폼 트랜지션 속성은 처음 사용할 때에는 이해하는데 어려움이 있지만, 작동하는 최소한의 구조만 이해한다면 이후에는 어려운 부분 없이 더 많은 기능들을 사용해 볼 수 있습니다. transform이란? 스케일은 css3에서 transform 속성 중에 하나입니다. transform을 적용하면 해당 요소를 화면에서 다른 형태로 보여지게 만들 수 있습니다. transition란? ..
-
포커스 파란색 보더 없애기 focus outline 제거 CSS프로그래밍/css 2020. 4. 24. 01:08
html 태그를 사용하다 보면 파란색 외곽선이 생기는 것을 볼 수 있다. 이는 button, a, select 등 form 요소 태그가 가지는 기본 속성이지만 경우에 따라서 이 파란색 보더를 없애고 싶을 때가 있다. 바로 없애보자. button { outline: 0; } a { outline: 0; } select { outline: 0; } /*한번에 처리*/ button, a, select { outline: 0; } 참 쉽죠? 앞으로 CSS 꿀팁은 계속됩니다.
-
제이쿼리 동적 요소 이벤트 바인딩프로그래밍/jQuery 2019. 12. 20. 21:57
jQuery 를 사용하면 상당히 편한 부분이 많습니다. 오늘은 동적인 element에 이벤트를 바인딩하는 방법에 대해서 알아보겠습니다. 사실 jQuery에서 동적 요소에 이벤트를 주는 것은 어렵지 않습니다. javascript를 예로 들면, 이벤트가 바인딩 되어있던 요소가 화면이 로딩 된 이후에 동적으로 추가 생성된다고 하면, elements를 추가하는 기능 이후에 또 이벤트를 바인딩해주어야 하는 번거로움이 있었습니다. 그러나 jQuery는 이러한 반복적인 코드처리를 해주지 않아도 알아서 이벤트를 붙여줍니다. 직접 코드로 보겠습니다. jquery 로 이벤트 바인딩하는게 뭐가 어렵다고 이런 포스팅을 하나 싶은 분들도 계실텐데요. 넘기지 마시고 잘 보셔야 합니다~! $('li').on('click', fun..
-
css선택자 [class*="name"] class다중선택프로그래밍/css 2019. 12. 20. 21:57
무려 4개월 만에 돌아온 css 강좌입니다. 날마다 오는 클라스가 아니여~ 오늘은 css 선택자 중 하나인 class 선택자에 대해서 알아보겠습니다. 이 class 선택자는 내가 지정한 class중에서 동일한 문자를 포함하고 있는 클래스들을 모두 선택해줍니다. 기본적으로 아래와 같이 요소를 선택해서 스타일을 주는데요 .name{height:100px;} 아래와 같이 중복되는 스타일을 가진 요소들이 있을 때 단순하게 아래와 같이 작업을 하는 경우가 있었을 겁니다. 1 2 3 4 5 .name1,2,3,4,5라는 요소에 height라는 공통적인 스타일이 있습니다. 저렇게 사용해도 상관은 없지만, 나중에 유지보수할 경우 똑같은 일을 5번 반복해야하는 상황도 생기고 코드가 불필요하게 길어지면서 지저분해보이기까지..
-
css inline과 block - 웹퍼블리싱 기초프로그래밍/css 2019. 8. 29. 00:39
요즘 웹퍼블리싱을 배우려는 사람이 많이 있는데욥. 많은 학원들이 있지만, 과연 실무에서 바로 써먹을만큼 제대로 가르쳐주는 곳이 있을까? 제 경험상 없습니다. 실제로 저도 고용노동부의 내일배움카드를 발급받아 웹퍼블리싱 교육과정을 들었지만 ,실무에 투입되었을 때 당장 써먹기는 매우 어려웠던 기억이 있습니다. 그리하여 저는 이제부터 실전 압축 퍼블리싱 방법을 속성으로 포스팅해보려고 합니다. 실전에 중점을 두고 정말 실전에서 사용할 포인트 위주로 정리할건데요, 속성인 관계로 기초적인 태그의 설명은 생략하도록 하겠습니다.(귀찮아서 생략하는거 정말로 아님..) 퍼블리싱을 할 때 많은 요소들 중 어느 것이 더 중요한가의 우선순위는 없기에 두서 없이 진행되겠지만, 최대한 많이 활용되는 순서대로 정리를 해보도록하겠습니다..
최근댓글