무아지경

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축)을 변형하여 콘텐츠의 위치를 바꾸는 방법입니다. 역시 간단히 보여드리..

구글 차트를 사용해 통계를 보여주고 나면 문제가 되는게 있습니다. 다른 차트는 잘 모르겠는데...파이차트(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 등에도 사용 가능한 것 같다.

HTML 태그(tag)들의 약자 정리 HTML을 공부하다 보면 태그들이 무슨뜻인지...무슨 단어의 약자인지...궁금한 적이 없으시나요?? 몰라도 되지만...그래도 궁금하니까....그래서 찾아봤습니다~ 우선..HTML과 CSS의 Full Name은 기본적으로 알아야 겠죠~!! HTML : Hypertext Markup Language 의 약자입니다. CSS : Cascading Style Sheets 의 약자입니다. HTML Tag Full Name a (href) Anchor (Hypertext Refernce) iframe Inline Frame div Division p Paragraph h1~h6 header1~header6 sub subscript sup superscript img (src) I..

반응형 작업을 위한 폰트 단위 em / rem 사용 css에서 사용 하는 단위는 여러가지가 있다. 가장 많이 사용하고 있는 px를 비롯해 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 요즘엔 사용하지 않는 것들도 있고 새롭게 떠오르는 단위도 있고..IE버전 지원 문제로 외면 받는 단위도 있다. 여기서도 IE지원 문제가 있다. IE구버전에서 지원 되지 않는 단위들이 있기 때문에 공공기관 사이트를 작업하는 일을 하게 된다면 과감히 포기해야한다. 이 중에서 대표적인 세가지만 알아보겠습니다. px 절대값으로 사용 되는 단위이다. 웹디자이너를 비롯한 디자이너들이 가장 많이 사용하고 디자인을 넘겨 받을때에도 px로 작업해서 넘겨주고 있어 정말 많이 사용 되는 단..

HTML 특수문자 변환(유니코드) 문서를 작성하다 보면 다양한 특수문자를 사용해야 할 경우가 있다. 웹 페이지를 만들 경우에도 단순 하드코딩 페이지에는 많은 특수문자를 사용하게 되는 경우가 많이 있다. ( 기관설명 / 연혁 / 조직도 / 사이트맵 / 기타 소개 페이지들... ) 대부분 따옴표, 대괄호, 당구장표시, 등등..("", [], , ※) 이런 특수문자를 그냥 사용하게 되면 서버에 제대로 보이지 않는 경우가 있다. 이런 이유 말고도 "" 경우에는 HTML에서 코드로 인식해버려서 제대로 쓸 수가 없다. 이러한 특수문자를 유니코드로 변환해서 사용하면 간단히 해결된다. 또 공백을 넣어야 할 경우 띄어쓰기로 스페이스바 한번은 인식하지만 여러번 띄어쓰기는 인식을 할 수 없다.. 이럴때 유니코드를 사용해서 ..