본문 바로가기

퍼블리싱

띄어쓰기없는 텍스트로 늘어난 테이블 레이아웃깨짐현상 해결하기 띄어쓰기가 없는 텍스트,예를 들면 URL(https://www.google.co.kr/webhp?sourceid=chrome-instant&ion=1&espv=2&es_th=1&ie=UTF-8#newwindow=1&q=puseudo+class) 이나, 영문이 쭈욱 이어져있을경우 텍스트가 정해진 영역을 벗어나 테이블 레이아웃이 깨지는 경우가 발생한다. HTML, CSS table {width:300px;height:50px;border-collapse:separate;border:1px solid #000;box-sizing:border-box;} td:first-child {width:200px;border-right:1px solid #000;} td:last-child {width:100px;} aa.. 더보기
CSS를 이용해서 checkbox 크기 조정하고 이미지처럼 꾸미기 모바일, 태블릿 프로젝트를 하다보니, 변수가 이만저만이 아니다. 안드로이드, IOS 디바이스마다 맞춰주는 것이 여간 피곤한게 아니다. 이럴때보면 오히려 크로스브라우징이 그나마 나은 거구나 하는 생각이 들 정도다. 모바일에서는 체크박스나 라디오버튼의 디폴트 사이즈가 작아 터치하는데 애로사항이 있다. 그냥 width="15px";height="15px" 이렇게 css에 박아주면? 일단 갤럭시 S3에선 통과! 그런데 문제는 먹는 디바이스가 있고, 안먹는 디바이스가 있는 것이다. 한마디로 일관되게 적용되지 않는 다는 것! 그래서 보통 선택 전 이미지와 선택 후 이미지로 대체해서 퍼블리싱을 하는 경우가 많다. 대표적인 예로 다음 모바일의 로그인 페이지이다. Daum 이용약관 동의, 개인정보 수집 및 이용 동의 체.. 더보기
IOS(iPad, iPhone)에서 position:fixed된 header영역이 움직이는 현상 애증의 판교프로젝트이자, 나의 첫 모바일 프로젝트인 KTOOO프로젝트!!지난 3월부터 시작하고, 내가 5,6,7월 약 2달간 퍼블리싱을 했던 이 프로젝트는 지금 한창 검수중이다.그러던 중 발견된 버그!!! IOS에서 입력창(INPUT)에 입력한 후 Done버튼이 아닌, 다른 영역을 터치하게되면, 입력창을 기준으로 헤더가 움직이는 현상이다.아래의 동영상을 보면 아~ 할 것이다. 이런 버그가 발생하는 이유는 입력창을 기준으로 position 영역이 다시 잡혀지기 때문에, position:fixed 한 값이 조정되는 것이다.그러기 위해선 화면영역을 재조정할 필요가 있다.그래서 다음의 코드처럼 blur 이벤트가 발생할때, 스크롤의 위치를 가장 상단, 왼쪽으로 옮겨주면 문제가 해결된다 $(document).on(.. 더보기
Uncaught SyntaxError: Unexpected token ILLEGAL 구문상 에러가 전혀 없는데 신텍스에러라고 뜨는 경우가 있다.Uncaught SyntaxError: Unexpected token ILLEGAL // 에러난 구문 $(" "+ string " "안에 공백이 들어가면 생기는 에러이다. // 수정된 구문 $(""+ 이렇게 공백을 없애주면 에러가 해결된다. 더보기
Roboto // 드뎌 궁금해하던 폰트이름을 알아내었다! 그것도 아주아주 우연히! 이름은 로보토! 이름도 귀여운 로보토폰트!!// 알고보니 안드로이드를 위해 만들어진 폰트인가보다. Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI and high-resolution screens. For Android Wear, Roboto Condensed is the system font and the Regular and Light variants should be used by all Wear apps.// Roboto Thin이 제일 위의 것이다// 구글 폰트 사이트 http:/.. 더보기

티스토리툴바