css 프로퍼티인 pointer-events에 대하여 알아봅니다. 어떻게 사용하고 언제 사용할까요?# CSS Property pointer-eventscss를 사용하여 클릭이벤트를 제어할 수 있을까요? 그 방법 중 하나가 바로 CSS 프로퍼티인 pointer-events입니다. 이 프로퍼티를 사용하면 특정 요소에서의 클릭 이벤트를 동작하지 않도록 제어할 수 있습니다. 아래는 간단한 사용 방법입니다..prevent-click { pointer-events: none; }이 속성은 CSS3의 프로퍼티로 선택 가능한 옵션은 아래와 같이 세 가지가 있습니다.none // 클릭 이벤트를 적용하지 않음auto // 브라우저 자동으로 선택함inherit // 상속 되어짐참고로 만약 none의 값을 사용할 경우 클릭 이벤트가 동작하지 않으며 마우스 클릭과 관련된 효과 역시 동작하지 않습니다. 예를들어 :hover를 사용하는 경우에도 적용되지 않으니 참고하세요.그럼 아래에서는 예제를
2019-03-14 00:32:47css를 사용하여 웹브라우저의 텍스트를 드래그하거나 더블 클릭하여 선택할 수 있습니다. 만약 텍스트 선택을 막거나 더블 클릭 등을 바꾸려면 어떻게 할 수 있는지 알아봅니다.# CSS user-select 프로퍼티 알아보기브라우저에서 드래그나 더블 클릭을 사용한 텍스트 선택 등을 막으려면 몇 가지 방법이 있습니다. 자바스크립트를 사용 할 수 있고 CSS에서도 제공하는 user-select를 사용할 수 있습니다. user-select 사용방법은 아래와 같습니다.user-select: auto | all | none | text;user-select는 이처럼 몇 가지 값을 선택할 수 있으며 기본값은 auto입니다. 각각의 옵션 기능을 알아보겠습니다.auto : Default값으로 브라우저 허용시 텍스트 선택 가능all : 더블클릭이 아닌 클릭 만으로도 선택이 가능none : 텍스트 선택 안됨text : 텍스트 선택이 가능그럼 어떻게 동작하는지 간단한 예제와 함께 아래에서 알아보세요.# C
2018-10-31 08:58:39CSS를 사용하는 애니메이션이 가능합니다. 이때 animation 프로퍼티를 사용할 수 있는데 계속해서 반복하는 것이 아니라 만약 마지막에 해당하는 상태를 계속 유지하려면 어떻게 하는지 알아봅니다. CSS에서 애니메이션을 구현할 때 매우 자주 사용됩니다.# CSS animation 마지막 상태 유지하기기본값으로 css의 animation은 같은 동작을 계속 반복합니다. 하지만 설정에 따라 마지막 상태를 유지할 수 있는데 이때 사용하는 설정으로 animation-fill-mode를 사용할 수 있습니다.animation-fill-mode: forwards;animation-fill-mode에 이처럼 forwards를 적용하면 마지막에 사용된 css의 상태가 유지되게됩니다. 그렇다면 간단한 예제를 하나 만들어보겠습니다.! CSS animation 예제보기 아래의 예제는 body에 적용하여 전체 웹페이지가 서서히 나타나는 이벤트를 구현한 코드입니다. 처음에 css를 opacity: 0을 주
2018-09-19 16:47:25CSS3에서 추가된 가상선택자 :target의 사용방법을 알아봅니다.가상선택자 :target은 활성화된 링크 태그에 사용하며 선택된 영역에만 스타일을 부여할 수 있습니다. 간단한 사용방법은 아래처럼 사용됩니다. 그럼 아래 예제소스에서 더 자세하게 알아봅니다.div:target { color: red; }# CSS3 :target 예제보기아래는 예제에 사용된 html, css 코드입니다. 먼저 html 코드를 봐주세요. href 속성의 link를 클릭하면 해당 위치로 이동하면서 css :target에 적용된 스타일이 반영됩니다.<div class="view"> <div id="no1" class="no">div 01</div> <div id="no2" class="no">div 02</div> <div id="no3" class="no">div 03</div></div><nav> <a href="#no1"><button>1</button></a> <a href="#no2"><
2017-08-28 02:30:48LESS에서 pre-processor는 요즘 많이 사용됩니다. CSS를 사용하는데 매우 편리한 기능들을 제공하며 뛰어난 언어처럼 다양한 기능을 제공하죠.아래는 LESS 사용시 가상클래스(pseudo-class) 선택자인 ::before, ::after, ::hover 등을 적용하는 방법에 대하여 알아봅니다. LESS에서 가상선택자 클래스를 적용할 경우 어떻게 할까요?# LESS에서 가상클래스 선택자 적용하기아래는 div 태그 내에 위치한 span 태그에 대하여 가상클래스 선택자를 적용한 예제코드입니다. 보시는 것처럼 앞에 & 기호를 사용하면 간단하게 적용할 수 있습니다. 만약 div 태그 다음에 ::before, ::after를 선언하면 아래처럼 사용합니다.div { width: 100px; height: 100px; border 1px solid; &:before { content: "before"; } &:after { content: 'after'; }}
2017-08-21 09:45:00CSS3의 animation 속성을 사용하여 Carousel 인터페이스를 구현하는 방법을 알아봅니다. 홈페이지에서 Carousel을 사용하는 이유는 주요 콘텐츠를 순서에따라 좌우로 이동하며 보여줄 수 있습니다. 아무래도 제한된 공간에서 강조할 콘텐츠를 가장 효과적으로 보여줄 수 있죠. 사용자 경험 측면에서도 효과적입니다.먼저 Carousel을 구현하기 위하여 생각할 부분은 아래와 같습니다.i. 애니메이션은 어떻게 구현할 것인가?ii. 자동으로 다음으로 넘어가는 코드는?애니메이션을 구현하기의 경우 스크립트를 사용할 수 있으나 여기서는 가급적 스크립트 사용을 최소화 해보려고합니다. 그래서 필수적인 부분만 스크립트를 쓰고 나머지는 모두 CSS를 쓰되 특히 CSS3의 animation과 @keyframes 쿼리를 사용합니다.사실 이 방법이 스크립트 방식보다 효과적이다 말하기는 어렵습니다. 자바스크립트 DOM을 효과적으로 사용하는것도 좋은 방법이므로 학습! 이런 방식으로 구현 할 수도 있다는
2017-08-18 00:59:25CSS를 사용하여 애니메이션 효과를 만드는 방법에 대하여 알아봅니다. 어떻게하면 애니메이션을 만들 수 있을까요?CSS3에서는 Animation을 구현할 수 있도록 animation을 속성을 제공합니다. 이 CSS 속성은 웹프론트에서 animation을 구현할 때 transition과 함께 가장 많이 사용되는 애니메이션 방법입니다. 이 방법을 사용하면 매우 쉽게 애니메이션을 만들 수 있으므로 꼭 알아두어야 합니다. 그럼 아래에서 animation 속성을 어떻게 사용하는지 자세히 알아봅니다.# CSS3 Animation 구현, animation 프로퍼티 알아보기먼저 animation 프로퍼티를 사용하는 방법입니다.animation: name delay times direction; 위 코드는 아래처럼 사용됩니다.animation: fly 0.5s 10;animation은 아래의 속성들을 한 번에 적용할 수 있는 css 속성입니다.animation-delayanimation-dire
2017-08-07 05:49:49CSS를 사용하면서 가장 많이 나타나는 이슈 중 하나라고 개인적으로 생각합니다. 바로 overflow: hidden 적용에 따른 layer가 보이지 않는 버그 또는 이슈사항입니다.만약 부모 요소가 overflow: hidden 속성이 적용된 경우 자식 요소의 레이어는 부모 요소의 내부로 제안됩니다. 하지만 다양한 디바이스 환경에서 다이나믹환 레이어를 적용해야되는 경우 이는 큰 제약사항이 될 수 있습니다. 이를 해결하는 방법은 무엇이 있을까요?# 부모 요소의 overflow: hidden을 제거하는 방법가장 간단한 방법입니다. 하지만 overflow를 부모 요소에 적용한 경우 그 이유가 있을 것이라 생각할 수 있습니다. 일반적으로 overflow 속성은 자식 속성의 영역을 부모가 가지지 않는 경우 적용하기 위한 약간의 트릭으로 많이 사용됩니다. 이런 경우가 아니라면 overflow 속성을 제거하는 것이 좋을 것입니다.# 해당 요소를 부모 밖으로 이동하는 방법만약 부모 요소 밖으로 이동
2017-07-04 13:39:04웹사이트를 개발하는 과정이 반복되고 길어지면 CSS의 코드의 양이 늘어나게됩니다. 이때 꼭 필요한 CSS가 아닌 실제 사용되지 않음에도 불구하고 계속 남아있는 CSS 코드가 발생할 수도 있는데 이를 효과적으로 제거, 삭제하는 방법은 어떤게 있을까요?# purifycss찾아보니 purifycss 등의 어플리케이션이 존재하더군요 ~ npm을 사용해 간단하게 인스톨하고 실행하는 것이 장점같습니다. 아쉬운 점은 다들 그렇듯 이것 역시 수정을 해준다기 보다는 현재 실제로 사용되는 것이 어떤 것인지 알려주는 역할을 합니다. 자동으로 모두 제거해주고 기존 CSS를 수정해주거나 바로 사용할 수 있는 뭔가를 만들어 주면 정말 편할 것 같습니다.# 브라우저의 Audits를 활용하기Audits 메뉴는 브라우저 개발자 도구에 존재합니다. Chrome, Safari 등등의 브라우저에서 존재하는 메뉴로 클릭하면 실행하기 버튼이 있습니다. 여기에 실제로 사용되는 CSS가 얼마나 되는지 등의 유용한 정보를 제공
2017-04-30 19:07:44CSS preprocessor LESS의 자주 사용되는 문법 및 방법은 무엇이 있을까요?# 자식 요소에 간단하게 스타일 부여하기p { color: #fff; span { color: #f00; }}위와 같은 방법으로 짧은 코드로 자식 요소에 스타일 추가가 가능합니다.에 스타일 추가가 가능합니다.
2017-04-19 13:53:43CSS에서는 선택자로 ::를 기호를 사용해 pseudo 선택자를 지정합니다. 그런데 자바스크립트에서 ::after 또는 ::before와 같은 pseudo를 선택하려면 어떻게 할까요?
2017-03-21 17:21:05선택한 요소를 가로로 정렬하는 방법은 간단합니다. 하지만 만약 세로로 정렬하려면 어떻게 해야할까요?가로 정렬의 경우 text-align을 사용하는 방법이 있지만 모든 요소에 vertical-align: middle을 선언한다고 원하는 가로방향 정렬이 되지 않습니다.어떻게해야 가능할까요?
2017-03-20 19:25:45CSS의 미디어 쿼리(Media Query)는 IE 구버전에서 정상적으로 동작하지 않는다. 만약 IE 8 에서 미디어 쿼리를 사용하려면 어떻게 해야할까? 사실 가장 좋은 방법은 IE 8을 지원하지 않는 방법이다. 그 이유는 간단한데 더 이상 MS에서 Support하지 않기 때문에 보안 이슈가 발생할 수 있기 때문이다...어쨌든 이를 해결하기 위한 좋은 대안이 있는데 이는 바로 Google에서 제공하는 오픈소스를 활용하는 방법이다.이 방법을 사용하면 대부분의 미디어 쿼리가 잘 동작함을 알 수 있다. 물론 완벽을 보장할 수 없으나 개인적으로 기대 이상의 미디어 쿼리를 보여준다. 이를 적용할 경우 해당 소스를 cdn 또는 서버에 저장하여 사용할 수 있다. 해당 소스는 아래 링크에서 받을 수 있다.* Link URL 바로가기https://code.google.com/archive/p/css3-mediaqueries-js/참고로 해당코드는 @import 방식으로 동작하지 않는다. 이를 사용
2016-04-01 18:29:28텍스트가 만약 일정 길이 이상으로 길어지는 경우가 있다고 가정해보자. 생략 기호를 사용하여 표시하면 매우 효과적일 것이다. 생략기호를 사용하여 길이가 더 길다는 것을 클라이언트의 방문자에게 시각적으로 표시할 수 있고 공간 안에서 레이아웃을 효과적으로 꾸밀 수 있기 때문이다.하지만... 한 줄인 경우에만 생략 기호를 사용이 가능하나 만약에 폭(width)이 너무 좁아 두 줄 이상의 텍스트를 생략 기호를 사용해 보여주려면 가능할까??# 멀티라인... 두 줄의 이상의 텍스트에 생략기호를 적용하는 방법한 줄이 아닌 경우... 생략 기호를 적용하기 위한 해결 방법은 무엇이 있을까??일단 두 줄 이상의 멀티 라인에는 적용되지 않는다.... 구글링을 해보았으나 정상적인 방법으로 해결할 수는 없다는 결론이다. 그리하여 이런 경우 선택 할 수 있는 방법음 아래와 같이 세가지가 있을 수 있다.1. 각각의 라인마다 모두 생략 표시로 나타날수 있도록 개별 단어마다 css 적용각 라인마다 적용하는 방법입니
2016-03-09 07:51:54만약 네모난 영역의 요소가 존재하고 그 영역의 크기가 width 값이 300px 그리고 height 값이 300px 이라고 가정해보겠습니다. 이때 정해진 width 값과 height 값은 내부의 padding 또는 border에 영향을 받아 사용자가 설정한 위 값보다 더 커지는 경우가 생길 수 있습니다. 이 때 css의 box-sizing 속성은 박스 형태 레이어는 크기를 결정하는 방법을 결정하며 내부 영역의 padding, border 값을 전체 width 또는 height에 포함시킬지를 선택할 수 있게합니다.box-sizing 속성은 해당하는 영역의 크기를 어떻게 결정할 것인지 선택할 수 있습니다. 이때 선택 가능한 값은 아래와 같으며 이 CSS를 사용하면 다양한 형태의 레이아웃을 구성하는데 매우 도움이 됩니다.! box-sizing 속성 선택 가능 값box-sizing: content-box;// 기본 설정값으로 padding, border 영역을 제외한 크기를 width, h
2016-01-10 13:50:33간단하게 예를들어보겠습니다. 만약 크기가 100px, 30px인 버튼을 만든다고 가정합니다. 그런경우 버튼 안에 들어갈 텍스트를 중간에 위치시키기 위해 알맞은 line-height 속성을 적용합니다. height가 30px이므로 line-height: 30px이 적당할 것입니다.하지만 문제가 나타나는데... 영문의 경우 중간에 위치한 것으로 보이지만 한글의 경우 조금 내려가보입니다. 분명 height, line-height 모두 30px인데 말이죠... 이 이유는 무엇일까요??? 아래의 두 버튼 이미지를 보시죠.두 버튼의 크기는 동일하게 width: 100px, height: 30px, line-height: 30px;위에 보시면 한글로 적힌 라인하이트가 1px 위로 올라가면 더 좋지 않을까라는 생각을 하실겁니다. 사실 1px의 차이는 작을 수도 있으나 height 값이 작아질 수록 그 차이는 커질것입니다. 그 옆에 영문 텍스트를 보면 대략적으로 세로 중앙에 정렬된 것으로 보입니다
2016-01-07 09:31:49CSS를 사용하는 pseudo 선택자 속성으로 둘 다 CSS3에 해당합니다. 가장 많이 사용되는 선택자를 꼽으라면 nth-child, first-child, last-child가 있지 않을까 생각됩니다. 하지만 nth-of-type()을 제 경우 사용하는 일이 더 많은데요... 그 이유는 nth-of-type()의 경우 부모로부터 몇번째인가를 따지는 것이 아니라 선택된 요소에서 몇번째 해당하는가를 기준으로 하기 때문에 적용할 일이 더 많은 것 같습니다. 물론 모두 많이 사용되지만요 ~그럼 아래는 이 두 선택자에 대하여 좀 더 자세히 알아보도록 하겠습니다. 이 둘은 어떤 차이점이 있고 어떻게 사용해야 할까요?# :nth-of-type() 알아보기nth-of-type()은 아래와 같이 사용합니다.div:nth-of-type(3) { color: red; }매우 간단한 예를 들었구요... 설명하자면 div태그를 가진 3번째 요소의 텍스트 색을 red로 변경하는 것입니다. 간단하게 예를들어
2015-12-30 17:21:53CSS 선택자 중에서 nth-child와 nth-of-type 속성은 매우 자주 사용되는 속성이다. 이 두 속성은 해당하는 태그에서 원하는 순번에 해당하는 태그만 속성을 지정할 수 있다는 장점을 가지고 있다. 이 두 속성의 차이점은 무엇인지 알아보겠다.nth-child와 nth-of-type의 가장 큰 차이점은 바로 해당하는 태그의 순서를 말하는지 아니면 부모 속성에서 특정 태그를 가진 자식 속성에서 몇번째 해당하는지의 차이라고 보면된다. 말로하면 쉽게 이해하지 못할 수 있으므로 아래 예제를 살펴보자. 풀어서 얘기하면...nth-child : 모든 자식의 순서에서 찾음nth-of-type: 해당하는 자식 태그 요소에서의 순서를 찾음만약 자식 요소 중에서도 특정한 태그를 선택하고 스타일을 부여할 경우에는 nth-of-type을 사용해야 된다. 그럼 아래 예제를 확인해보자.# nth-child 그리고 nth-of-type 예제소스 보기<div> <p>test line 1</p>
2015-12-16 13:51:57제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg"> <div class="thumbImg"></div> </li></body>* 스크립트 코드// 이미지 배경으로 삽입하기thumbEles = $('li[data-imgname]');for (i=0; i < thumbEles.length ; i++) { thumbName = 'url(./images/' + thumbEles.eq(i).attr('d
2015-11-26 15:28:11넓리 사용되는 입력폼 중 하나인 input 태그는 다양한 속성을 가지고 있습니다. 그 중에서도 사용자가 아무것도 입력하지 않았을때 팁으로 텍스트를 보여주는 속성이 바로 placeholder 속성입니다.# input 태그 placeholder 색 바꾸기이 속성은 아래와 같이 사용됩니다. 아래를 보시면 여기에 입력하세요란 텍스트가 있죠.질문: 당신의 이름은 무엇입니까?이처럼 input 태그 안에는 브라우저 디폴트값으로 색깔이 보일 수 있습니다. 즉, 브라우저의 디펜던시로 기본 컬러값이 설정되어 있는거죠. 만약 이 색상을 바꾸기 위해서는 어떻게 해야할까요? 먼저 이를 바꾸기 위해서는 pseudo 선택자를 사용해 가능합니다. 예를들면...input::-webkit-input-placeholder { color: #f00; }위의 방법은 간단하게 표현한 코드 모습니다. 만약 실제 코드로 작성한다면 웹킷(webkit) 뿐 아니라 크로스브라우징을 위해 CSS에 선언할때 아래의 속성들처럼 선언해
2015-10-23 15:53:46
