[CSS] vertical-align 브라우저별 이슈
·
개발일지/2015
[이슈] 의 경우 브라우저 마다 (크롬/IE vs 파이어폭스) 렌더링 결과값이 다르게 나온다. [해결] 부모 요소인 에 position: relative 를 주고 을 position: absolute 로 px 조정하였다. 하지만 임시방편일 뿐 원인을 찾아봐야겠다.
[CSS] Pure CSS Tooltip
·
개발일지/2015
[CSS] ::placehoder CSS pseudo-element
·
개발일지/2015
[출처] http://caniuse.com/#search=placeholder 1. placeholder에 색상을 지정할 경우, opacity를 1로 지정해야 정확한 색상을 사용할 수 있다.&::-webkit-input-placeholder/* Chrome, Safari, Opera */font-weight: 300color: #a9a9a9opacity: 1 &::-moz-placeholder/* Firefox 19+ */font-weight: 300color: #a9a9a9opacity: 1 &:-ms-input-placeholder/* IE 10+ */font-weight: 300color: #a9a9a9opacity: 1 &::-ms-input-placeholder/* IE Edge */font-w..
[직무상식] 웹소켓(WebSocket)
·
개발일지/2015
웹 브라우저와 웹 서버 사이에 전송 제어 프로토콜(TCP) 연결(80번 포트) 한 개만 생성하여 전이중(full-duplex) 통신을 제공하는 프로토콜. 웹소켓은 웹 서버와 웹 브라우저상에 구현되어, 두 지점 간에 실시간 상호 작용하도록 지원한다. 따라서 실시간을 요하는 채팅, 게임, 주식 거래 등과 같이 실시간이 요구되는 응용 프로그램을 한층 효과적으로 구현할 수 있다. 웹소켓 프로토콜은 2011년 인터넷 표준화 기구인 IETF에서(IETF RFC 6455) 표준화되었고, 웹소켓 응용 프로그래밍 인터페이스(API)는 월드 와이드 웹 컨소시엄인 W3C에서 표준화를 완료했다. [네이버 지식백과] 웹소켓 [WebSocket] (IT용어사전, 한국정보통신기술협회)
[jQuery] dotdotdot.js font-size bug
·
개발일지/2015
Multiline Ellipsis를 위해 dotdotdot.js를 적용중에 버그를 발견했다.dotdotdot() 선택자로 class를 사용할 경우, 그 class에는 font-size 속성을 넣지 않는다. [참고] http://dotdotdot.frebsite.nl/ 예제에서도 볼 수 있듯이 .ellipsis 를 선택자로 사용하기 때문에 이 클래스에는 되도록이면 css를 넣지 않는다.대신 다른 클래스(.box)에 속성을 넣은 것을 확인 할 수 있다.
[티스토리] 스킨(HTML/CSS) 수정 업데이트
·
개발일지/2015
티스토리 스킨 수정 방식이 업데이트 되었다.반응형 뷰를 쉽게 볼 수 있다는 점은 좋으나, 요소 검사를 할 수 없다는 것은 매우 아쉽다.결론 적으로는 다른 창을 또 띄워놓고 요소검사를 해야 하는 불편함은 해소되지 못했다. (개선됨) 그래도 티스토리가 유저 편의성을 계속 생각하고 있다는 점에서는 칭찬해 주고 싶다.[참고] http://notice.tistory.com/2258 [캡쳐1] 업데이트 된 스킨 수정 페이지 [캡쳐2] 실제 페이지 내부 요소검사를 할 수 없는 구조 ▼ ▼ ▼ [캡쳐3] 개선 아침에 문의했는데 바로 개선! 티스토리 개발팀의 빠른 대응 보기 좋습니다 :)하지만 개발팀은 야근이시겠죠 ㅠ_ㅠ 힘내세요
[Sass] Sass List, Random(), nth()
·
개발일지/2015
1~18 중 랜덤 선택 후 리스트에서 해당 순번 값 추출$randomSelect: random(18) $bgPositionList: (0 0, -240px 0, 0 -240px, -240px -240px, -480px 0, -480px -240px, 0 -480px, -240px -480px, -480px -480px, -720px 0, -720px -240px, -720px -480px, 0 -720px, -240px -720px, -480px -720px, -720px -720px, -960px 0, -960px -240px) $bgPosition: nth($bgPositionList, $randomSelect) 1~11 중 랜덤 선택 후 리스트에서 해당 순번 값 추출Play with this gis..
[JS] Google Map(v=3.exp) Firefox Marker Bug
·
개발일지/2015
[사진] Infowindow가 발생되는 시점 마커에 마우스오버 했을때 인포윈도우가 나와야 하는데 이상하게 정확한 위치에서 뜨지 않고 위로 얼마 떨어져있는 곳에서 이벤트가 작용했다.이는 html 상에서 맵을 부르는 div 위에 div가 쌓여있을 경우에 발생하는데, 파이어폭스에서만 생기는 버그라고 한다.해결방법은 v=3.exp 버전을 쓰지 말고 v.3 을 쓰면 해결! 이거 때문에 4시간 보냈다. 하하하하하하 [참고] http://stackoverflow.com/questions/31336374/google-maps-markers-shifted-only-in-firefox-if-css-margin-property-for-map-canva
[JS] 5 ways to customize Google Maps InfoWindow
·
개발일지/2015
[출처] http://en.marnoto.com/2014/09/5-formas-de-personalizar-infowindow.html