interactive
CSS3 표준안은 아직 확정이 아닙니다. 이미 인기 있게 사용되고 있는 border-radius나 text-shadow, box-shadow, transform, transition 등은 표준으로 될 것이 확실시 되는 애들이죠. 표준이 아니란 얘기는 아직 모든 브라우저가 동일한 효과를 나타내지 못한다는 소립니다. 대표적으로 인터넷 익스플로러가 있죠. 얘 때문에 HTML5와 CSS3의 발전이 더뎌진다고 볼멘소리 하는 사람도 많습니다. 저도 그중 하나고요. CSS3가 제공하는 놀라운 효과들과 미학을 익스플로러는 무시하고 있죠. 그러나 CSS3는 미래의 기술입니다. IE9가 이미 다수의 CSS3를 지원하고 있고 IE10 이상부터는 거의 모든 CSS3를 적용할 것이라고 약속한 바 있죠. 마이크로소프트가 직접 I..
1. 기본적인 html 셋팅메타테그를 이용하여 모바일에 적합한 사이트 만들어야 합니다. content="width=device-width"는 웹페이지의 가로를 모바일 가로사이즈에 맞춘다는 뜻입니다. 즉, 가로 스크롤이 생기지 않습니다.initial-scale=1은 화면을 초기화 할때 몇배율로 할 것인지 정합니다. 1로 한다면 딱 정상적인 배율로 보입니다.maximum-scale=1은 손가락 두개를 쫙 벌려서 확대를 얼마나 할 수 있는지에 대한 부분입니다.1로 하면 확대가 안되고 2로 하면 두배, 3으로하면 세배 확대가 됩니다.minimum-scale=1은 반대로 손가락 두개를 오므려서 얼마나 축소할 수 있는지에 대한 부분입니다.1로하면 축소가 안되고, 0.5는 50%축소가 됩니다.user-scalable..
white-space 공백 줄바꿈문자 처리방법 (띄어쓰기나 줄바꿈으로 이한 공백부분 등) white-space:normal; normal이 기본값, 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 지정된 넓이의 끝에서 자동으로줄바꿈한다. - 코드에서의 원래 텍스트여수 밤바다 이 조명에 담긴 아름다운 얘기가 있어 네게 들려주고파 white-space:pre; 띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로 나온다. 넘어가는 부분에서 강제 줄바꿈은 되지 않는다. white-space:nowrap; 여러칸의 공백이나 줄바꿈을 공백 1칸으로 인식한다. 넓이를 지정하였어도 자동으로 줄바꿈 되지 않게 강제로 개행을 막아준다. word-break 텍스트가 들어가는 블럭요소의 넓이에 맞춰 줄바꿈 하는 ..
크롬, 사파리, 파폭 등에서디자인스타일과 상관없이 input, textarea 에 커서이동시 노란테두리가 생긴다.브라우저 기본속성 outline이 자동설정 되기 때문이다. 기본설정된 outline을 없앨려면 css에 input{ outline-style:none;} , textarea{ outline-style:none;}
IE등 일부 브라우저에서 링크가 포함된 경우 클릭시 테두리에 점선이 생기면서 링크영역임을 알려준다. 특히 이미지(IMG)에 링크가 포함된 경우 불필요한 영역 표시와 함께 점선 테두리로 인해 지저분해 보이기 쉽다. a {outline:none; select-dummy: expression(this.hideFocus=true);}
크롬이나 파폭에서 ul li안에 img를 사용하였을때 여백이 생기는 경우, img { display: block; } 이런 현상은 img가 inline 엘리먼트이기 때문인데, 텍스트와 같은 inline엘리먼트는 하단에 어느 정도 여백을 둔 basline 위에 존재한다.이럴 경우에는 아래처럼 img에 display: block; 를 적용시켜주면 여백이 사라진다.
1. @font-face 사용EOT는 익스플로러 만 지원 합니다. 다른 브라우저(사파리, 오페라, 크롬, 파폭등)에서도 웹폰트가 보여질려면 WOFF, TTF 를 값이 넣어주어야 합니다. @font-face { font-family:'NanumGothic'; src: url('images/NanumGothic.eot'); src: url('images/NanumGothic.eot?#iefix') format('embedded-opentype'), url('images/NanumGothic.woff') format('woff'), url('images/NanumGothic.ttf') format('truetype'); font-weight: normal; font-style: normal; } 2. 모빌리스..