시간이 지남에 따라 서서히 폭이 줄어드는 Timer 개념의 막대기를 만들었습니다. 뒤에 검은색 배경의 막대기를 두고 앞에 있는 파란색의 막대기가 점점 줄어드는 형태인데, 익스플로러에서는 재대로 작동을 하였으나 크롬에서는 줄어들면서 검은색 막대기에 파란색 막대기의 잔상이 남는 현상이 발생했습니다. Javascript에 문제가 있나 싶어서 이리저리 수정해 보았으나 재대로 작동하지 않았습니다. 그래서 구글을 검색해보니 CSS 문제였습니다. position이 fixed로 되어있을 때 해당 CSS를 변경해주면 잔상이 남는 문제였습니다. 문제 해결 방법은 간단했습니다. CSS 한 줄 추가해주면 끝입니다. 1-webkit-transform: translateZ(0) cs 알아보니 -transform이 해당 객체에 동..
태블릿 PC나 모바일 기기가 늘어남에 따라 모바일 웹에 대한 관심이 높아지고 있습니다. 그에 따라 각 기기별 해상도에 맞춰 레이아웃을 다시 짜야할 필요성이 늘어났습니다. PC로 봤을 때는 깔끔하고 예뻤던 디자인이 모바일 기기로 보면 해상도 차이로 불편한 디자인이 되버렸습니다. 이러한 점을 해결하고자 CSS 3.0부터는 미디어 쿼리를 사용하여 여러 조건 별 디자인을 적용하는 것이 가능해졌습니다. 미디어 쿼리를 적용하는 것에는 4가지 방법이 있습니다. 1) Link 1234cs 첫 번째는 link를 이용하는 방법입니다. 조건에 따라 각자 다른 css 파일을 불러오도록 되어 있습니다. 2)Style 1234/* style 작성 */ Colored by Color Scriptercs 두 번째는 style 태그 ..
- Total
- Today
- Yesterday