꿀벌개발일지

발생일: 2017.02.16 키워드: css, color, 변수, css color variable naming 문제: 프로젝트에서 사용하는 컬러를 관리하고 있지 않았더니, 같은 색인데도 컬러 코드가 조금씩 다르다. 컬러를 코드로 직접 쓰는 것보단 대표할 수 있는 이름을 지어 변수를 사용하면 효과적이다. 코드에 일관성을 줄 수 있을 뿐 아니라, 나중에 컬러를 한꺼번에 변경할 때에도 편하다. 이 참에 컬러 코드를 정리해볼까 한다. 기존 방식에 불편한 점이 있기도 했었는데, 더 효율적으로 이름 지어 관리할 수 있는 방법이 있을까? 해결책: 기존 몇몇 프로젝트에서는, 컬러에 이름을 지을 때 용도에 따라 이름 짓거나 접두사/접미사를 붙여 사용했었다. 예를 들어 아래와 같은 식이다. - 특정 패턴으로 이름을 짓는..

발생일: 2016.01.18 키워드: format-detection, 포맷 디텍션 문제: 어떤 사이트의 소스를 보니 아래와 같은 메타 태그가 있다. 왜 설정을 no 로 해둔 걸까? 해결책: 아하, 포맷이 적용되면 기본 스타일이 먹지 않는 것 때문이란다. 참고: http://kipepeo.tistory.com/19

발생일: 2015.12.18 키워드: 수직 가운데 정렬, 수직 중앙 정렬, 수직 센터 정렬, vertical middle 문제: 특정 엘리먼트를 부모 엘리먼트의 수직 가운데 정렬하려고 한다. 해결책: display의 table 속성을 활용해 수직 정렬할 수 있다. .parent { display:table; // 부모는 테이블 속성으로, width:100%; height:200px; // 높이가 있어야 한다. border:1px solid green; } .child { display:table-cell; // 자식은 테이블 셀 속성으로, text-align:center; vertical-align:middle; // 가운데 정렬한다. }

발생일: 2015.11.08 키워드: word-wrap, word-break, 줄바꿈 문제: word-wrap 과 word-break는 늘 헷갈린다. 어떤 경우에 어떤 것을 써야할 지 헷갈려서, 대충 검색 후에 붙여넣어 왔던 것 같다. 이참에 어떻게 적용하면 될 지를 명확하게 정리해두자. 해결책: word-wrap 은 긴 텍스트를 강제로 자를 것인지에 대한 옵션이다. 이 속성이 누락되어 있으면 보통 긴 URL이 엘리먼트 밖으로 삐져나오게 된다. normal 과 break-word 옵션이 있고, 줄바꿈을 적용할 것이라면 break-word 를 할당하면 된다. word-break 는 줄바꿈을 어떻게 할 것인지에 대한 옵션이다. 아시아/비아시아 언어 기준으로 구분되지만, 간단하게- 한글을 포함해 단어 기준으로..

발생일: 2015.08.06 키워드: 탭 하이라이트 제거, webkit-tap-highlight, tab highlight 문제: 삼성 계열 디바이스에서 탭 하이라이트가 제거되지 않는다. 해결책: rbga, transparent, outline 모두 정의해줘야 한다. .no_tab_highlight { outline:none; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent; }

발생일: 2015.05.20 키워드: 안드로이드, android, 반대로, screen reversed 문제: 특정 안드로이드 브라우저에서 화면이 반대로 나온다. 해결책: 정확한 원인은 모르겠지만 렌더링 이슈로 보인다. meta 태그에 정의했던 scale 값을 제거하고 user-scalable을 no 로 설정했더니 해결되었다. 을 아래로 변경

발생일: 2014.09.11 키워드: css, user-select, prevent selection, 선택되지 않도록 문제: 텍스트를 사용자가 선택하지 못하게 하려고 한다. 해결책: 아래와 같이 user-select 속성을 none 으로 설정해주면 된다. .prevent_selection { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; }

발생일: 2014.05.25 키워드: relative protocol path, 프로토콜 생략 문제: IE8에서 CSS가 두 번씩 요청된다. 해결책: CSS 경로에 프로토콜을 생략하고 사용하고 있었기 때문이었다. 프로토콜을 생략하면 해당 페이지의 프로토콜에 맞게 요청되는 장점이 있어 사용하고 있었다. 하지만, link 태그나 @import 구문에서 사용할 경우, IE7/IE8 에서 두 번 요청되는 이슈가 있다고 한다. 논의: 이제는 https로 리소스를 요청해도 성능 이슈가 거의 없다고 한다. 가능한 경우 모두 https 로 작성해주는 게 좋겠다. 참고: http://www.paulirish.com/2010/the-protocol-relative-url/ http://www.stevesouders.com..

발생일: 2015.06.05 키워드: less 문제: 엘리먼트의 높이에 따라 `height100px`, `height200px`과 같은 식으로 클래스를 할당하려고 한다. 정상적인 경우엔 이런 클래스를 만들지 않겠지만, 몇 가지 이슈 때문에 우회하는 방법을 선택했다. 여튼, 예를 들어, 100px 부터 2000px 까지 20px 단위로 클래스를 생성할 생각이다. less 를 쓰고 있는데, 동적으로 클래스명을 할당하면 작성하기 편할 것 같다. 클래스명도 변수를 이용해서 동적으로 생성할 수 있나? 해결책: 클래스명에 `@{변수명}` 형태로 할당하면 된다. 아래 코드처럼 mixin 을 생성해서, 재귀호출하는 식으로 처리했다. // Mixin: 높이가 2000이 될 때까지 클래스를 생성한다. .makeHeight..

발생일: 2015.01.16 키워드: line-height 내용: 먼저, `line-height`를 제대로 이해하기 위해서는, 몇 가지 용어를 확실히 이해하고 가는 것이 좋다. 아래와 같은 태그가 있고, 아래와 같이 렌더링 되었다면. Containing Box (컨테이닝 박스) 다른 여러 박스를 감싸고 있는 박스이다. Inline boxes (인라인 박스) 문단 안에 인라인 박스로 나뉘어져 있다. (인라인 엘리먼트나 텍스트 노드) Line boxes (라인 박스) 인라인 박스들은 컨테이닝 박스 안에 나란히 놓여져 있는데, 이런 인라인 박스를 감싸는 박스를 라인 박스라 한다. Content area (컨텐트 영역) 컨텐트 영역은 텍스트를 감싸고 있는 영역이다. 이 높이는 폰트 크기(`font-size` 속..