세줄코딩

tooltip( 말풍선 ) CSS HTML Element의 속성 값을 활용하여 별도의 js없이 HTML/CSS로만 tooltip( 말풍선 ) 만들기. - 이전 포스트의 "tooltip( 말풍선 ) CSS (1)" 보단 좀더 활용도가 있을 듯 싶다. HTML 댓글달기 CSS /* 툴팁 balloon */ .bt-tooltip { position: relative; display:inline-block; } .bt-tooltip:hover[data-title]:before, .bt-tooltip:hover[data-title]:after { visibility: visible; pointer-events: auto } .bt-tooltip[data-title]:before, .bt-tooltip[data-t..

말풍선 css ~ 캬 죽인닷~아래 URL에서 여러포지션으로 수정해 볼 수 있다. http://www.cssarrowplease.com/ .arrow_box { position: relative; background: #88b7d5; border: 4px solid #c2e1f5; } .arrow_box:after, .arrow_box:before { bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .arrow_box:after { border-color: rgba(136, 183, 213, 0); border-bottom..

FOUC(Flash Of Unstyled Content)는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다. 이 현상은 스타일이 적용되지 않은 웹 페이지가 스타일이 적용된 웹 페이지로 변화하는 것이다. 웹 브라우저가 웹 페이지에 스타일 정의를 부르고 적용할 때 보여지는 부분을 최대한 빨리 수정하지만, 이 변화는 짧지 않은 시간 동안 나타나므로 사용자는 페이지에 오류가 있다는 생각을 하게된다. "FOUC는 CSS와 HTML의 버전 변화와는 관계가 없으며, 이것은 브라우저의 문제로 보인다." 하지만 이 문제는 브라우저에서 큰 문제가 아닌 것으로 보이는데, 브라우저 내에 프로그램된 우선 사항들이 페이지를 보여줄 때 아래와 같은 방식으로 처리하기 때문이다.브라우저는 웹 ..

화면에 100%로 채우기 css.target{ max-width:none; max-height: 100%; min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translateX(-50%) translateY(-50%); /* 만약에 다른곳에서 상속되어 width/height가 설정된다면 아래처럼 덮어씌우자. width:auto; height:auto; */ } /*16:9의 비율로 와이드 화면이 된다면 아래처럼 미디어쿼리로 값변경*/ @media (min-aspect-ratio: 16/9){ .target{max-height: ..

흠 어도비 브라켓 그동안 조금 발전한듯하다.재작년/작년까지만 해도 플러그인을 좀 많이 설치하거나 오래쓰거나 하면 툴자체 처리속도가 더뎌지곤 했다. 근데 좀 나아진듯 http://brackets.io/ ---윈도우에서만 써보고 이틀 뒤에 맥에 깔고 써보았다.....맥북에선 아직 폴더를 많이 포함하고 있는 프로젝트를 열거나 하면 에러나는건 여전하다....욕나온다. 젠장.... 내 개인적인 결론은 아직은 좀 거시기 하다..... 제일 맘에 드는게 실시간 편집과 빠른 css 편집이다.실시간 편집은 크롬에서 밖에 할 수 없다는게 함정이고빠른 css 편집은 폴더명은 다르고 파일명이 같은 css 는 당췌 구분하기 힘들다는 것이다. 좀 난제가 있는듯~누가 플러그인을 만들어서 해결해줄 라나... 아님 이미 해결을 해준 ..

ie6, ie7 ( *hack ) : selector-> *div{width:100px;height:70px}( .hack ) : property->div{width:100px;.height:70px} ie6,ie7,ie8( \9 hack ) : property->div{width:100px;height:50px\9;} ie8,ie9( \0/IE8+9 hack ) : property-> div{width:100px \0/IE8+9;}

음 좋다~무료이다 사이트에 나오는 데로 스텝바이스텝으로 진행하면 된다. 내가 알아볼 정도니까 왠만한 사람들은 다 이해될듯..... https://icomoon.io/ 대충 만드는 순서는 아래와 같다. 1. 사이트 우측 상단에 IcoMoon App 버튼을 클릭 2. IcoMoon버튼을 눌러 아래와 같이 페이지가 이동되었다면 그림처럼 좌측 상단 Import Icons 를 눌러 제작한 svg 파일을 업로드 하면 된다. 3. svg파일을 올렸다면 아래 그림처럼 파일들이 보인다. 아이콘 폰트화 할 것들을 클릭해서 선택한다.그리고 맨 하단 3번째 Generate Font 버튼을 클릭하여 생성시킨다. 4. 생성된 아이콘 및 web에서 css에 적용할 수 있겠끔 코드가 적혀 있다. 코드 값은 사용자에 맞게 수정할 수 ..

-webkit-text-size-adjust:n% 지정된 사이즈로 변경-webkit-text-size-adjust:auto 텍스트크기 자동-webkit-text-size-adjust:none 폰트사이즈 고정 아이폰 input라운드 초기화border-radius:0px 0px; form요소의 디바이스 기반 스타일 초기화-webkit-appearance:none; 스크롤영역 부분만 따로 스크롤 지정-webkit-overflow-scrolling:touch; overflow-wrap: normal; /* 기본 */ overflow-wrap: break-word; /* 오버플로우가 일어나면 단어를 쪼개서 줄바꿈 */