개발일지/CSS

slideToggle()을 써서 GNB를 처리하는데 생각처럼 동작하지 않아 문제였다.원인은 li에 min-height를 줘서! min-height 말고 height로 대체하니 정상작동된다.
[발생일]2015.04.22 수 [문제]background:url('...') no repeat 0% 0% / 100% 100%; 이런식으로 한 줄로 이어 쓰다 보면background-size 속성은 IE8 이하에서 적용되지 않기 때문에 위 CSS가 통째로 적용이 되지 않아 배경 이미지까지 안보이는 현상이 발생한다. [참고]IE8 이하에서 적용되지 않는 background property Property Chrome Internet Explorer Firefox Safari Opera background 1.0 4.0 1.0 1.0 3.5 background-attachment 1.0 4.0 1.0 1.0 3.5 background-clip 4.0 9.0 4.0 3.0 10.5 background-col..
[발생일]2015.04.22 수 [문제]테이블 thead에 배경이미지를 적용했는데, 크롬, IE 에서 정상출력 되지 않음 [정상-파이어폭스] [비정상-IE] [비정상-크롬] [해결]thead가 아닌 table에 배경을 적용배경이미지는 기본적으론 left top 에 위치하기 때문에 thead 부분에 배경이미지가 위치근본적인 해결이 아니라 아쉬움
[참고] http://stackoverflow.com/questions/3820430/get-multiline-text-to-align-with-content-instead-of-numeric-label-with-ol-and-li
[출처] http://stackoverflow.com/questions/1828804/how-do-i-uncollapse-a-margin
꽤 시간이 지나 읽어도 감동적인 토비님의 답변 :) 아이디를 쓰지 말라고 하는데는 그 이유가 있을 건데 이유를 제대로 제시하지 않는건 아쉬움이 있는 커뮤니케이션이네요. 뭐 다른곳에서도 비일비재 한 일이니까요. 예상되는 이유로는 2가지가 있습니다. 첫 번째는, id가 페이지내의 고유한 요소의 의미외에도 개발작업시 요소 선택을 위한 방편으로 사용된다는 점 때문입니다. 의미론적 id는 URL맨 뒤에 #id 를 붙여 해당컨텐츠가 있는 곳으로 스크롤을 맞춰주는 일명 책갈피 기능 외에는 아무런 실효기능이 없습니다. 때문에 그 보다는 id를 개발작업시 선택을 위해서 사용하는 용도로만 제한하고 사용하는 식의 협업방식을 취하는 경우가 많습니다. 두 번째는, CSS내에서의 id 선택자 사용은 우선순위 문제를 발생시키기 때..
아래는 PNG 파일에 각각 필터와 속성으로 그림자 효과를 주었을 때의 차이점을 명확히 보여주는 그림이다. (좌) drop-shadow (우) box-shadow [출처] demosthenes.info/blog/598/boxshadow-property-vs-dropshadow-filter-a-complete-comparison 하지만 필터는 IE, 오페라 미니, 안드로이드 브라우저 4.3 이하에서 적용되지 않는다. [출처] http://caniuse.com/#search=filter
[출처] CSS line-height from Toby Yun
[출처] http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div [해결] div 의 높이 만큼 line-height 를 주고, 이미지에 vertical-align:middle 을 주면 끝!
[출처] http://stackoverflow.com/questions/5218927/z-index-not-working-with-fixed-positioning [해결] z-index 속성이 높은 요소에 positon:relative; 추가
zineeworld
'개발일지/CSS' 카테고리의 글 목록 (8 Page)