무아지경

jQuery UI와 다른 플러그인이나 부트스트랩을 함께 사용 할 때 충돌이 일어나는 현상이 생기게 됩니다. 저 같은 경우에는 퍼블리싱 과정에서는 문제가 없었는데 개발 과정에서 개발자가 필요한 플러그인을 추가하면서 문제가 생겼습니다. HTMl 소스 하단에 위와 같은 알수 없는 소스가 붙어서 불필요한 공간이 생기게 되었습니다. 해결 방법은 필요한 스크립트 파일을 import 시킬 경우 jQuery UI를 상단에 import 시킨 후 나머지 플러그인이나 필요한 스크립트들을 아래에 import 시켜 문제를 해결 하였습니다. 이전에도 비슷한 문제로 글을 작성한 적이 있는데 스크립트 파일 import 시킬 때 순서에 따라 에러가 날 경우가 있거나 원하는 기능이 작동하지 않을 수 있으니 비슷한 문제가 생긴다면 스크립..

position:relative / position:absolute 를 이용하여 마크업을 하는 경우가 많이 있습니다. absolute 마크업을 하고 콘텐츠를 가운데 정렬을 하는 방법에 대해 간단히 적어 보겠습니다. 첫번째, margin값을 이용하는 방법 left or top 값을 50%를 주고 콘텐츠의 width or height 값의 절반을 margin 값으로 빼는 방법입니다. 말로는 이해하기 힘들수 있으니 간단히 보여드리겠습니다. See the Pen translate 를 이용한 가운데 정렬2 by yeoninim00 (@blisher-tool) on CodePen. 두번째, transform을 이용하는 방법 좌표 공간(X축, Y축)을 변형하여 콘텐츠의 위치를 바꾸는 방법입니다. 역시 간단히 보여드리..

* 전문적인 지식을 바탕으로 작성한 글이 아닙니다. 단순히 제가 사용해보고 느낀점을 생각나는데로 간단하게 작성한 포스팅입니다. 그냥 참고용으로만 읽어주세요 퍼블리싱을 시작할때 가장 기본적인것이 에디터입니다. 그냥 메모장 열어놓고 해도 되지만...많이 불편하죠.. 에디터는 종류도 다양하고 기능도 다양합니다. 자신에게 맞는 좋은 에디터를 선택하게 되면 그만큼 작업하는 재미도 있고 편리하기 때문에 신중하게 선택 하는것이 좋습니다. 간단하게 제가 사용해본 에디터들을 말씀드리면... 1. 서브라임 텍스트(sublime text) 퍼블리싱 공부 시작할때 처음으로 사용했던 프로그램입니다. 학원에서 추천해서 sublime text를 사용했고 지금은 sublime text4까지 나온걸로 알고 있습니다. 개인은 무료인데 ..

구글 차트를 사용해 통계를 보여주고 나면 문제가 되는게 있습니다. 다른 차트는 잘 모르겠는데...파이차트(Pie chart )에서 툴팁이 깜박이는 현상이 있습니다. 이처럼 깜박임은 영역이 작은 부분일 수록 더욱 심하게 빠르게 깜박이더라구요.. 열심히 검색하다가 저랑 같은 내용으로 검색하셔서 방법을 찾으신 분이 계시네요. 전 영어가 짧아 StackOverflow에서 관련 내용 찾다가 포기 했는데..ㅠㅠ 이분은 해결방법을 찾으셨네요. Mike Kim님..감사합니다... 아무튼... 해결 방법은 간단합니다. css 아래 내용을 추가 해주면 됩니다. svg > g > g:last-child { pointer-events: none } 자세한 설명은 아래 Mike Kim이 자세히 설명 하셨네요.. 출처 : kys..

그동안 별 생각없이 즐겨 사용하던 ::after, ::before (가상요소)에 대해 다시 생각하게 되었습니다. 다시 생각하게 된 계기는 아래 글에 포스팅 되어 있습니다. https://yeoninim.tistory.com/54 [CSS] float 속성 해제 방법(overflow:hidden, ::after) 마크업을 하다 보면 float를 사용 하는 경우가 많이 있습니다. 비슷한 기능으로 Flex(Flexible Box) 가 있으나...저는 IE9버전까지 항상 생각해야 하기 때문에 사용 할 수가 없어서 float만 열심히 사용 하 yeoninim.tistory.com 어쨋든...이번 계기로 가상요소에 대해 자세히 공부하게 되었네요.. 덕분에 몰랐던 선택자도 발견 하게되었습니다. 가상 요소 종류 예시 ..

마크업을 하다 보면 float를 사용 하는 경우가 많이 있습니다. 비슷한 기능으로 Flex(Flexible Box) 가 있으나...저는 IE9버전까지 항상 생각해야 하기 때문에 사용 할 수가 없어서 float만 열심히 사용 하고 있습니다. 메뉴바를 만들 경우에도 사용하고 div 요소를 가로로 정렬할때도 대부분 사용하고 있습니다. block 요소를 가로로 정렬 하는 방법은 여려가지 방법이 있으나..다음에 포스팅 해보도록 하겠습니다. float:left, float:right 를 사용 하고 나면 항상 부모요소의 높이값이 제대로 적용 되지 않아 UI를 침범한다거나 주변 텍스트나 인라인 요소들이 주위를 감싸게 됩니다. 이미지로 예시를 들면 좋겠으나..귀차니즘으로 인해.... 음....그냥 UI가 이상해 진다고 ..

onclick로 페이지 이동시키기 예전에 비슷한 onclick을 이용하여 페이지 이동 시키는 글을 작성한 적이 있다. 이때 사용 목적은 메인 페이지와 서브페이지 3~4 페이지를 만들어 놓고 실제 페이지 메뉴 클릭하면 실제 서비스중인 페이지처럼 보이게 하려는 목적이었고.. 지금도 시안을 보여주기 위해 사용중인 방법이다. 실제로 a링크가 아닌 버튼을 이용해 페이지를 이동시켜야 할일이 생겨서 다시 한번 찾아봤다. 우선 첫번째 일반적인 onclick를 이용한 방법 네이버 이동 cs 두번째 새창으로 페이지 열기 : target="_blank" 와 같은 역할** 다음 새창 이동 cs 세번째 팝업으로 새창 열기 네이버 새창 열기 cs 꼭 버튼이 아니더라도 li, div, span 등에도 사용 가능한 것 같다.

팝업창 크기 동일하게 맞추기 서브페이지 작업을 하다보면 팝업창을 띄워야 할 경우가 생깁니다. 레이어팝업으로 하면 깔끔하고 이쁘게 할 수 있겠지만... 개발자의 의견으로 레이어팝업으로 할 수 없고 꼭 새창으로 팝업을 띄워야 할 경우가 생기네요. 팝업창을 띄워는 방법은 window.open을 사용 하여 띄우는 방법을 사용 하고 있습니다. (다른 방법이 있나 알아보지 않아서 모르겠네요..;;) window.open 팝업창 띄우는 방법은 https://yeoninim.tistory.com/14 요기에 설명 되어 있습니다. window.open() 팝업창 띄우기 두가지 방법 첫번째 방법 - 기본형식 : window.open([URL],[name],[option],[replace]) - [URL] : 새 창의 ur..