[직무상식] 웹소켓(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
[CSS] Footer 하단 고정 (Sticky Footer)
·
개발일지/2015
결과 화면은 새 창에서 보는 것이 더 정확하다.
[Sass] 문법 기초
·
개발일지/2015
[출처] 생활코딩 [출처] http://taegon.kim/archives/3667 [참고] http://sass-lang.com/guide [참고] http://soooprmx.com/wp/archives/5059 중첩(Nesting) CSS의 특성으로 인해서 셀렉터를 중복해서 사용해야 하는 경우가 많은데 Sass의 Nesting을 이용하면 코드의 양을 줄이고 연관된 코드끼리 그룹핑할 수 있다. 부모 엘리먼트를 참조(Parent References) (마우스가 엘리먼트 위로 올라왔을 때를 의미하는) :hover와 같은 pseudoclasses의 경우는 특수기호 '&'를 이용해서 부모 엘리먼트를 참조할 수 있다. 변수(Variables) CSS내에서 변수를 사용할 수 있다. 변수이름은 '$'로 시작해야 ..
[jQuery] 터치 디바이스 분기처리
·
개발일지/2015
if (!("ontouchstart" in document.documentElement)) { // desktop $('html').addClass('no-touch'); } else { // mobile } 이렇게 하면 터치 디바이스가 아닐 경우 html에 no-touch 클래스가 추가된다.CSS에서 .no-touch .class { ... } 이런식으로 적어주면 desktop에서만 적용되는 css를 구현할 수 있다.베스트 방법은 아니지만 많이 쓰는 방식이라고 한다.