'css'에 해당되는 글 7건

가급적 일반 링크는 a태그를, 스크립트로 동작하는 기능은 button태그를 사용한다.

그러다보면 button 안에 img 태그를 사용하게 되는 일이 많은데 파이어폭스에서는 묘한 여백이 생겨있다.

분명 margin과 padding 모두 0으로 해뒀음에도..

그럴땐 파폭 전용 css를 추가해주면 된다고 한다.

http://taegon.kim/archives/3548

아예 리셋해놓는게 좋겠다.

http://stackoverflow.com/questions/5517744/remove-extra-button-spacing-padding-in-firefox

아이폰의 사파리에서는 버튼에 그라데이션과 테두리곡선이 기본으로 들어가있다.

이는 css로 배경색을 넣고 해도 없어지지 않더라.

appearance:none; 처리하면 없어진다. 다만 -webkit- 을 붙여서 -webkit-appearance:none; 으로 해줘야 한다.

그리고 select에도 같은 현상이 있다.

select의 경우 위의 방식으로 배경을 없애버리면 펼침버튼(▽)도 같이 사라지기 때문에 테두리만 리셋했다.

테이블 사용중 colgroup에서 width를 %로 지정했는데 유독 사파리만 적용이 안된다.

caption에 position:absolute;가 들어가면 발생하는 현상이라고 한다.

화면에서는 숨기고 스크린리더에서는 읽힐 수 있게 띄워서 화면밖으로 밀어놓은게 원인이 됐다.

결국 position은 버리고 text-indent:-100000px; font-size:0; 으로 수정해서 해결.

http://webdical.com/blog/107

position:fixed 된 상단메뉴가 있는 페이지에서 해시링크(#)로 이동을 하면 이동하고자 하는 위치가 고정상단메뉴에 의해 덮이게 되서 원하는대로 안나타나는 경우가 발생합니다.

이는 해당페이지 내에서의 이동과 다른페이지로부터의 이동시에도 모두 같은 문제가 발생하게 됩니다.

같은 페이지 내에서의 이동이라면 자바스크립트로 고정된 메뉴높이만큼 더 위로 이동해서 해결 할 수 있지만 다른페이지로부터의 이동은 여전히 해결되지 않습니다.

이런경우 다음의 링크를 통해 해결할 수 있습니다.

http://stackoverflow.com/questions/11386807/adding-an-automatic-offset-to-the-scroll-position-for-all-hash-links-calls

요점은 padding-top 으로 옵셋으로 원하는 만큼 잡아주고 다시 margin-top 으로 -값으로 땡겨오는거죠. 시각적으로는 '그자리 그대로'가 됩니다만 링크이동시 padding-top 만큼의 옵셋을 가지게 되는거죠.

그러나 여기서 제시한 방법은 display:inline-block 된 요소로서 각각의 레이아웃에 패딩값등이 있다면 여전히 오차가 발생할 것입니다.

그럴때는 그냥 display:block; 잡고 height:1; font-size:0; line-hight:0; 잡고 이동하려는 레이아웃 바로 위에 별도로 자리잡아주는게 좋습니다.

아래 스샷은 각각 Section 2(#sect2)를 클릭했을 때의 결과입니다.

실제로는 height:1px을 줘서 그만큼 50px인 padding-top에서 1만큼 빼줬습니다. width:0; 이나 height:0; 은 IE7에서 안된다는 글을 본듯합니다.

hash_link_offset_sample.html

구글웹폰트의 나눔고딕을 사용할때
@import url('//fonts.googleapis.com/earlyaccess/nanumgothic.css');
넣어주고 윈7이거나 폰트가 깔려있음 컴내부의 폰트를 사용하라고
font-family:'나눔고딕','나눔 고딕','NanumGothic','Nanum Gothic' 이렇게 잡아줬었는데..
이상하게 bold로 지정된 부분들이 extra bold(font-weight:700)로 출력된다.
퍼블리싱해서 넘어온 파일에서는 정상적으로 보이는데;

신경쓰이지만 일단은 font-weight:500으로 셋팅해놓고 마무리 지었는데
다시보니 왠지 내부폰트일지도 모른다는 생각에 순서를 바꿔
'Nanum Gothic','NanumGothic','나눔고딕','나눔 고딕' 이렇게 넣어주니 그냥 bold도 이제 정상적으로 보인다;
어차피 웹폰트를 불러온이상 컴내부폰트를 사용한다고 해도 이미 다운로드와 로딩은 끝났을테니
컴내폰트를 쓴다는게 의미없어보여서 더이상은 신경 안쓰는걸로...;

저런 어이없는 현상이 발생하는 이유까진 모르겠고..

css에서 overflow:visible; 해주시면 해결이 된다..;

여차하면 기본(tags reset해주는 css쪽)에

button, input[type=button], input[type=submit] {overflow:visible;}

이렇게 추가해주면 좋지 않을까 싶기도..

아니면 ie7만 적용되시라는 핵이 언더바였던가 스타였던가;;

난 그냥 6,7 같이 쓰는 #overflow:visible; 로 처리.. (에혀 익스 진짜...)