웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다. 원인 IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다. input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다. 해결방법 outline은 […]
이번에 ellipsis에 대해 정리해 보도록 하겠습니다. 보통 게시판 리스트의 제목부분이 길어질 경우 php나 jsp등의 프로그램단에서 일정 글자수 이상이 되는 것에 대해 ‘…’으로 마무리 하는 경우가 많은데요.. 이것을 프로그램이 아닌 CSS만 가지고도 처리할 수 가 있습니다. 한줄라인 글자수 제한 한줄 라인 글자수 를 제한하는 방법은 아래와 같습니다. <div class=”txt_line”>통영의 신흥보물 강구안의 동쪽벼랑인 동피랑의 벽화마을을 다녀왔다</div> .txt_line […]
소매치기로 부터 나의 핸드백을 지키는 확실한 제품이 나왔습니다. 아직 시제품이긴 하지만 상당히 아이디어가 좋습니다. 말레이시아의 업체인 Ash Be Nimble에서 개발을 하였고 제품명은 Handbag Dytonator이라고 합니다. 핸드백 엑세서리 형태로 판매가 된다고 하네요. 사용방법은 내 핸드백이 소매치기를 당했을 경우 핸드폰으로 Handbag Dytonator에게 폭발코드를 문자메시지를 보내면 Handbag Dytonator에 있는 SIM카드가 이것을 인식하여 약 5초 후에 폭발을 한다고 합니다. […]
처음에 미디어 쿼리를 디바이스별로 정리를 해볼까 하다가 새로운 디바이스가 나올때마다 해상도 파악하고 기록하고… 삽질할 것을 생각하니 엄두가 나지 않아서 범용적으로 사용할 수 있는 방법으로 정리를 해야할 것 같아 포스팅을 합니다. 그래도 먼저 디바이스별 해상도에 대해서 궁금한 사람이 있을 수 있으니 신상 디바이스까지 업데이트를 잘 해주고 있는 사이트를 2개 공유하고 넘어 갑니다. mydevice screensiz.es 기본 설정 […]
홈페이지를 보게되면 화면을 스크롤 할 때 배경의 이미지가 스크롤에 비해 더 조금씩 움직임으로써 역동적으로 보이게 하는 기술을 볼 수 있습니다. 이것을 Parallax(시차)라는 이름으로 많이 사용되고 있는데.. jQuery의 플러그인으로 구현된 것이 있어 소개합니다. **홈페이지 : ** [https://github.com/pederan/Parallax-ImageScroll](https://github.com/pederan/Parallax-ImageScroll) **DEMO : ** [http://codepen.io/pederan/full/Hheuy](http://codepen.io/pederan/full/Hheuy) **라이선스 : ** MIT Install bower로 설치할 경우 bower install Parallax-ImageScroll npm으로 설치할 경우 npm […]
저희 아파트는 지은지 벌써 15년이 넘고 있어서 그런지 주차공간이 매우 협소한 편입니다. 항상 문콕테러를 걱정하면서 주차를 하게 됩니다. 물론 빨리 법이 바뀌어서 주차영역이 코스트코 만큼이나 넓게 지정이 되어야 겠지만 그럴경우 발생하는 또다른 문제는 주차할 수 있는 차량의 수가 상대적으로 줄어든다는데 있습니다. 이번에 이런문제를 말끔히 해결해 줄 발렛파킹을 해주는 로봇이 나와서 소개를 할까 합니다. 스탠리 로보틱스(Stanley […]
요즘에는 자율주행이라는 것이 대세인가봅니다. 쇼핑카트까지 자율주행을 한다고 하니.. 뭐.. 몇년 전부터 상상은 해봤던 것이기는 한데.. 실제로 월마트에서 특허까지 취득을 했다고 하니 곧 마트에서 혼자 굴러다니는 쇼핑카트를 볼 날도 멀지 않은것 같습니다. 월마트에서는 위치파악센서, 비디오카메라, 무선네트워크기술을 활용한 기기를 쇼핑카트의 밑에 부탁을 하면 카트가 자유롭게 욺직여서 호출한 사용자 앞으로 오기도 하고 사용자가 원하는 상품의 위치로 안내까지 하는 […]
별도의 라이브러리를 사용하지 않고 순수하게 CSS3만을 활용하여 버튼의 효과를 줄 수 있습니다. 급하게 퍼블리싱할때 써먹을 수 있게 정리해 놓겠습니다. 미리보기 BUTTON 1 BUTTON 2 BUTTON 3 BUTTON 4 코드설명 HTML HTML은 기본 버튼을 사용하고 .btn으로 기본속성을 지정하고 .hover로 효과의 형태를 변경하겠습니다. <button class=”btn hover1″> BUTTON 1 </button> <button class=”btn hover2″> BUTTON 2 </button> <button class=”btn […]
보안을 위해서 세팅된 잠금을 해제하려면 Ctrl+Alt+Del을 누르세요 라는 메시지가 나오는 화면을 본적이 있을 것입니다. 한동안 컴퓨터를 사용하지 않다가 다시 컴퓨터를 건들게 되면 바로 로그인화면이 나오는 것이 아니라 잠금을 해제하려면 Ctrl+Alt+Del을 누르세요 라는 창이 먼저 나오는 것을 볼 수 있습니다. 보안을 위해 필요한 절차이기는 하지만 가정집이나 기타 보안이 크게 중요하지 않은경우는 귀찮은 것이 사실입니다. 이럴경우 해당 […]