1. 하위번전에서 내부 스크롤이 안되는 경우 iscroll.js 로 해결해도 된다.

   관련링크 : http://cubiq.org/iscroll-4

   iscroll사용시 동적일때 : http://www.webmini.net/jquery/543822

2. border-radius 사용시

    갤럭시 s2 그래픽이 깨져보이는 현상 발생(배경이미지로 제작)

3. 안드로이드에서 input 박스가 레이어를 뚫고 올라올때

    body{-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}

    로 해결 안될 경우

    input{-webkit-appearance:menulist-text} 추가해주면 해결되지만, 안드로이드 4.x 버전에서는 한글 자음과 모음이 하나씩 써지는게

    보여지지 않는 문제도 있다.

   Webkit CSS properties

   관련 링크 : http://css-infos.net/properties/webkit

4. 안드로이드에서 placeholder이 적용안될

    아마도 안드로이드 4.x 에서 input type="number" 로 했을때 placeholder 이 적용이 안되는 문제가 발생할것이다.

    간단히 설명을 하자면 input type="number" 로 했을때 input 박스를 터치하면 숫자패드가 올라오게 하는것이다. 그런데 이놈이

    number였을때 placeholder을 넣어도 보이지 않는 문제가 발생한다. 그럴때 해결방법이다. 

    <input type="text" placeholder="메일주소 입력" onfocus="this.type='number';">

    터치전에는 type="text" 터치하면 number 로 바뀌게 되는것이다. 

    관련링크 : http://www.webmini.net/html/543403

    input type 관련링크 : http://blog.naver.com/mastre50?Redirect=Log&logNo=40188982609

5. 가로 메뉴가 홀수 일 때

가로메뉴가 짝수일때는 상관이 없지만, 홀수일때 가로 100%일때 딱 맞아떨어지지가 않는다.

ex)

<ul>

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>

해결방법 css

li{width:33%}

li:last-child {width:34%}

33%로는 딱떨어지지 않아서 맨마지막 li에는 34%로 주면 된다.

반대로 li:first-child 로 해줘도 된다.

가상선택자는 여러가지가 있으니 아래 링크를 참고하길 바란다. (예제도 같이 보면 이해가 빠를것이다.)

http://www.w3.org/wiki/CSS/Selectors#Structural_pseudo-classes

추가 : border이 들어갔을때는 margin-left:-1px 이런식으로 border-left:1px solid #ccc; 가 들어간곳에 주면 된다

6. 미디어쿼리 @media (반응형)

요새 많은 사이트가 pc/모바일 구분없이 반응형웹으로 제작하는 경우가 많다. (상위브라우저에서 가능)

미디어쿼리는 이벤트 제작시 세로/가로모드에 따라 유용하게 사용할 수도 있고, 해상도별로 최적화할수도 있다.

사용방법은 아래와 같다. (css)

@media (min-width: 330px) {

 .test{width:360px;color:#333}

}

해상도별로 사이즈를 조절할수도 있으며, 최소,최대크기에 따라 보여주는걸 다르게 할수도 있다.

디바이스별 해상도는 아래링크에서 확인하면 된다. (실제 디바이스에서 보는거와는 차이가 있으니 해상도에 따른 변화만 참고하자)

http://troy.labs.daum.net/

7. jQuery는 해야한다.

javascript 를 매우 단순하게 해주는게 jQuery 이다.

javascript Library 라고 보면 된다.

사이트를 동적으로 만들기위해 스크립트는 꼭 해야할 필요가 있다. 또한 jquery는 css와 연관되는 부분이 많기때문에 알아야한다.

회사마다 다르고, 많은 회사에서 개발자들이 스크립트를 처리해주는 경우가 있는데, 개발과 연결된 스크립트 외에 시각적인 효과정도는 퍼블리셔가 해야한다. 개발전달하면서 스크립트가 들어감에 따라 마크업 소스가 바뀌는 경우도 있고, 디자인과 가까운게 개발보다는 퍼블리셔가 맞기 때문에 어떤효과를 줘야하는지도 잘알지 않을까?

관련링크 : http://blog.naver.com/topsaga/140155586647 (이해하는데 도움이 많이된다.)

jQAPI : http://jqapi.com/ (개인적으로 자주 이용한다.)

생활코딩(강추) : http://opentutorials.org/course/1 (엄청난 동영상강좌와 쉬운 설명들.. 최고라고 말하고싶다)

8. 전체 레이아웃을 min-width:320px 으로 작업할경우 디자인 640px 시안으로 작업했을때 1/2 로 반으로 계산해서 작업을 했던 분들이 있었을텐데, 전체 레이아웃 수치를 max-width:640px 로 할경우 백그라운드며, 이미지며, 높이며, 반으로 줄여서 코딩할필요가 없습니다.

9. 모바일 코딩시  line-height보다는 padding 값으로 조절.

    모바일 하위번전에서 가운데 정렬이 안되는 경우가 생김

10. ios 사파리의 label 태그버그 해결방법

     iOS 사파리는 다음 코드에서 label태그를 눌러도 아무런 반응이 없다.

     버그를 해결하려면 label 태그에 onClick 속석을 입력

     <label for="name" onClick="">Name</label><input id="name" type="text" />