킥복싱의 각종 자료실

css로 글자를 자르는 것은 누구에게나 쉬운 방법이나, 여러행으로 글이 줄바꿈이 되어있는 상태에서 말줄임표를 넣는것은, 얼핏 생각해도 쉽게 방법이 떠오르지 않을 때가 있다. 아래와 같은 경우를 보자. 이미지가 요렇게 벗어 나는경우, 1줄로 되어있을때는, 말줄임표를 쉽게 할수 있다. 요런상태에서 이렇게 바꿔주면, 이렇게 된다. 자 여기까지는 한줄 줄바꿈 처리이다. 이젠 이렇게 해보자. 달라진 css 는 몇줄없다. 이런부분들도 쉽게 쉽게 처리할 수 있다.

예를들어, 이러한류의 폰트가 있다고 가정할때, 이미지로 처리하지 않고 폰트로 한다면 어떻게 할까? 백그라운드 이미지나 혹은 페인트 된 색이 있다고 가정할 경우, 그 위에 투명 폰트이미지를 사용하는 방식말고, 실제 폰트에 css를 주어 처리하는 방법이다. 간단하다. 마크업은 아래와 같이 하고, 뭐 .box div를 굳이 만들 필요는 없다. 그냥 가나라다라ㅏ다마 이렇게 해도 된다. css는 아래와 같이 한다. 첨부된 aa.png는 요거다. 자 결과는? 짜잔.

오늘은 스크립트 없이 스크롤 하는 방법에 대해 알아보려고 한다. 위와 같이 스크립트를 사용하지 않고, 컨텐츠를 제어할 수 있는 css 이다. 모바일만 동작한다고 한 이유는 간단하게 PC에서는 안되기 때문이다. 먼저 마크업을 보자 그냥 뭐 일반적인 리스트이다. 예제를 위해 만들었기 때문에, 클래스도 없고. 걍 막했다. css다. main은 하위 div등을 숨기면서 감싸는 역할이고, div는 실제로 스크롤 없이 동작하게 하려는 오버플로우 스크롤링 이 들어있다. ul은 리스트의 토탈 넓이, li는 일반적인 리스트아이템 같이 작업해주면 된다. 이렇게 할경우 스크립트를 사용하지 않고, 스크롤 효과를 낼 수 있다.

지금 일하는 여기 사이트는 온갖 임폴턴트가 난무하고, 도저히 이해가 안되는 마크업과 css로 도배가 되어있다. 그리고 정말 충격적인것은 크로스브라우징이 안되어 있다는것. 히스토리를 들어보니, 이전 작업자가 크로스브라우징 못한다고 했다고 한다. (front-end 맞나?) conding convention 도 없고, 주먹구구식의 마크업, 인라인스타일과 css때문에 충격과 공포를 맛 보았다. 늦었지만, 정의 해두는게 맞겠다 싶어, coding convention을 만들고, 기존 작업된 css는 건드릴수 없는 지경에 이르렀기 때문에, 새로 작업하는 css에 대하여만 coding convention rule을 따르기로 했다. 모듈화와 크로스브라우징등은 저 우주로 날려버린 사이트라서 어쩔수 없이 핵을 사용했다. ..

사파리에서만 table의 넓이가 다를경우가 있다. 간단하게 말하자면, ie, chrome, f/f, opera, 등에서도 모두 괜찮은데, safari에서만 넓이가 다를경우, 한가지 생각해보자, 만약 테이블의 caption에 position:absolute 가 있다면, 이 때문에 발생하는 문제인데, caption에 display:none을 넣을수도 없다. 접근성 때문에, 그래서 caption은 일반적으로, overflow:hidden; visibility:hidden; width:0; height:0; font-size:0; line-height:0; 을 준다. ...