꿀벌개발일지

발생일: 2015.01.16 키워드: box-sizing 내용: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing 엘리먼트의 너비와 높이를 지정하는 기존의 CSS box model을 수정하기 위한 CSS 속성이다. `box-sizing`의 값으론, `content-box`, `padding-box`, `border-box`가 있으며, `content-box`가 기본값이다. box-sizing: content-box CSS 표준에 정의되어 있는 기본값이다. width 와 height 속성은 컨텐츠만 포함하며, padding, border, margin 은 포함하지 않는다. box-sizing: padding-box width 와 height 속성이 ..

발생일: 2014.04.11 키워드: backface-visibility, CSS3 필터, CSS3 filter 문제: 현재 서비스에 CSS3 blur 필터를 적용한 부분이 있다. 원본 이미지 아래에 블러가 적용된 이미지를 배경으로 넓게 표시하고 있는데, 대략 아래와 같은 태그 구조를 갖고 있다. `backface-visibility` 속성에 대한 설명은 아래 링크를 참고하자. https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

발생일: 2013.11.07 키워드: CSS3, 트랜지션, 애니메이션, transition, animation 문제: 얼마 전 회사 해커톤에선 립모션으로 비트박스를 만드는 걸 만들었었다.ㅎㅎ손가락으로 특정 비트를 선택하서 요기로 저기로 보내는 컨셉이었는데,커서에 글로우 효과가 계속 되도록 애니메이션을 주고 싶었다. 최근엔 CSS3는 많이 다뤄본 적이 없어서,트랜지션 속성을 쓰는 게 나을 지 애니메이션 속성을 쓰는 게 나을지 고민하면서메모해둔 게 있어 옮겨둔다. 해결책: http://www.kirupa.com/html5/css3_animations_vs_transitions.htm 트랜지션은 CSS 프로퍼티에 의해서만 발생한다.:hover 같은 슈도 클래스에 의해서이거나, 클래스를 넣고 빼는 등의 동작에 ..

발생일: 2011.04.23 문제: 얼마 전 QA에서 아래와 같은 버그를 등록했다. 특정 버튼에서 오른쪽 마우스 버튼을 눌러 새탭으로 열었을 때, 기대하는 페이지가 아닌 동일한 페이지가 열린다는 것이다. 해당 버튼은 click 이벤트에 의해 스크립트로만 동작하는 것이었으며, 대충 아래와 같은 형태이다. (실제로 이벤트는 스크립트에서 바인딩한다.) This is button. 스크립트로만 동작하고 기본 동작을 막아뒀기 때문에 클릭했을 때에는 아무런 문제가 없다. 하지만 앵커 태그이기 때문에 새탭으로 열었을 경우엔, 현재 페이지에 #이 덧붙여져 열리게 되는 것이다. 이건 버그라고 할 수 있을까? 해결책: 실제로 여러 포털에 이런 문제가 있는 버튼들이 굉장히 많다. 앵커 태그로 버튼을 구현해 스크립트로 추가 ..

발생일: 2010.03.11 문제: 얼마 전에 파이어폭스를 업데이트 받았는데, video 태그를 지원한다고 하더군요. 오픈비디오 타입으로 태그를 구현하면, 플러그인 추가 없이 바로 재생이 가능한 태그라는 설명입니다. 요게 아마 소문으로만 듣던 HTML5 가 아닐까 하는 생각이 들었습니다. HTML5 에서는 AJAX 도 스크립팅 없이 태그로 바로 구현되지 않을까, Comet 같은 서버 푸시형 요청이나 스트리밍 통신 같은 것도 지원되지 않을까 하는 생각이 문득 들었습니다. HTML5 의 정확한 스펙이 뭘까요. 해결책: 스티브잡스가 '어도비 너네 이제 맘에 안들어. 플래시 안 쓸 거야. 대신 HTML5 쓸 거야.' 이런 이후로, HTML5 에 대한 관심이 더 커졌다고 합니다. HTML5 에 대한 좋은 포스트가..

발생일: 2009.05.15 문제: 브라우저별로 opacity를 적용하는 방법에 대한 정리가 필요하다. 해결책: 브라우저별 opacity를 적용하는 방법에 대해 매우 깔끔하게 정리되어 있는 사이트가 있다. 요약하자면, .opacity { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // IE-8 filter: alpha(opacity=50); // IE-7 opacity: .5; // all-browser } 이렇게 해주면 되겠다.

발생일: 2009.05.08 문제: 아래처럼 td 안에 img 태그를 넣었는데 태그간 공백으로 인해 테이블 사이즈가 늘어나고 정상적으로 정렬이 되지 않는다. 이미지 공백을 무시하고 싶다. 해결책: img 의 css 속성에 vertical-align 을 top 으로 고정시켜 준다. 같은 상황에 대해 자세히 설명해 둔 블로그가 있다. 이와 비슷한 상황으로, img 태그에 a 링크를 줬을 때 이미지 하단에 작게 공백이 생기는 경우가 있다. 이 때에는 display에 block 속성을 주면 된다. (모질라 커뮤니티의 글타래 참조)

발생일: 2009.04.23 문제: css 로 간단하게 버튼을 디자인하려고 하는데 정리된 사이트가 없을까..? 해결책: 버튼의 기본적인 css 스타일 설정에 따른 버튼 모습을 보여주는 페이지. 간단하여 참고할 만 하다. 튼튼한 CSS 버튼 만들기라는 블로그 페이지. css를 활용하여 만든 버튼을 정리해놓았다. css button 으로 구글링하니 많다....

발생일: 2009.03.31 문제: 누군가가 코딩 규칙 없이 엉망으로 html을 코딩해뒀을 경우,.. 페이지 레이아웃이... 테이블에 테이블에 테이블에 테이블에 테이블에 테이블에 테이블로 짜여있을 경우,.. 눈물을 머금고 HTML 코드를 정리하고 싶을 경우,.. 해결책: 웬만한 플러그인들은 배보다 배꼽이 큰 경우가 많다... 부담없이 Online HTML Formatter 를 사용해보자. HTML Formatter 로 구글링 해도 좋다.

발생일: 2009.03.28 문제: a 태그의 앞 또는 뒤에 공백이 생긴다. 해결책: display가 inline 속성일 경우, a 태그의 앞 또는 뒤에 공백이 생기는 경우가 발생한다. (관련 테스트 글) 간단하게 태그 사이의 공백을 제거해주거나 (가독성이 떨어질 수 있다), display를 block으로 설정하고 float에 left 속성을 주면 해결할 수 있다.