목록퍼블리싱 (17)
킥복싱의 각종 자료실
오늘은 스크립트 없이 스크롤 하는 방법에 대해 알아보려고 한다. 위와 같이 스크립트를 사용하지 않고, 컨텐츠를 제어할 수 있는 css 이다. 모바일만 동작한다고 한 이유는 간단하게 PC에서는 안되기 때문이다. 먼저 마크업을 보자 그냥 뭐 일반적인 리스트이다. 예제를 위해 만들었기 때문에, 클래스도 없고. 걍 막했다. css다. main은 하위 div등을 숨기면서 감싸는 역할이고, div는 실제로 스크롤 없이 동작하게 하려는 오버플로우 스크롤링 이 들어있다. ul은 리스트의 토탈 넓이, li는 일반적인 리스트아이템 같이 작업해주면 된다. 이렇게 할경우 스크립트를 사용하지 않고, 스크롤 효과를 낼 수 있다.
마크업을 할 때에, 일반적인 구조를 포스팅 하려고 한다. 주로 이렇게 한다. 일반적으로 div로 영역을 구분 해놓은 것이다. 보면 왜 section, article 이런거 안쓰냐고? 뭐 써도 된다. 쓴다면 아래와 같이 되겠다. 물론 위의 마크업 같은 모양은, 그냥 보통 하는것이다. 정말 특별한 이유가 없다면, 위의 마크업을 지켜주는게 시멘틱한 마크업을 하는 것이라고 생각한다. 몇가지만 짚고 넘어가보면, 사람들이 많이 헷갈리는 것 중에 하나가, section 과 article 이다. article = 그냥 article 자체만 남아있을때 독립적인가? 라는 부분. 예를들어 포스트나 뉴스나 그런것들을 할때 보통 article을 사용한다. section = 그냥 구분용. 그렇다고 div같은 영역 나누기의 개념이..
PC에서의 레이어팝업은 보기좋은 모양으로 직접 디자인해서 사용할 수 있는 아주 좋은 형태의 팝업이다. 마크업과 css 스크립트 도 간단해서, 초보자도 쉽게 만들수 있는 팝업이라, 정말 자주 이용되는 팝업이다. 모바일에서는 레이어를 지양한다. 정말 필요할때 빼고 새창으로 처리하거나, 박스타입으로 쇼 하이드로 구현하는경우도 많다. 이유는 자잘한 버그들이 많아서 인데, 이게 상당히 머리 아프게 만든다. 단적인 예로, 아이폰의 fixed 버그를 들수 있는데, 꽤 유명하다, fixed 버그는 레이어가 발생한 상황에서 position:fixed를 했을 때에, 해당 레이어 안에 input 타입의 입력창이 있을경우, 스크롤시 부모 컨텐츠가 왔다갔다 하면서 현재의 커서의 위치를 인풋박스 밖으로 보내버린다는것. 물론 해결..
지금 일하는 여기 사이트는 온갖 임폴턴트가 난무하고, 도저히 이해가 안되는 마크업과 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; 을 준다. ...