목록마크업 (3)
킥복싱의 각종 자료실
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/YYYxO/btqvX1ADVpC/y4oycOxUh6ePMFhnAEunJk/img.png)
예를들어, 이러한류의 폰트가 있다고 가정할때, 이미지로 처리하지 않고 폰트로 한다면 어떻게 할까? 백그라운드 이미지나 혹은 페인트 된 색이 있다고 가정할 경우, 그 위에 투명 폰트이미지를 사용하는 방식말고, 실제 폰트에 css를 주어 처리하는 방법이다. 간단하다. 마크업은 아래와 같이 하고, 뭐 .box div를 굳이 만들 필요는 없다. 그냥 가나라다라ㅏ다마 이렇게 해도 된다. css는 아래와 같이 한다. 첨부된 aa.png는 요거다. 자 결과는? 짜잔.
오늘은 스크립트 없이 스크롤 하는 방법에 대해 알아보려고 한다. 위와 같이 스크립트를 사용하지 않고, 컨텐츠를 제어할 수 있는 css 이다. 모바일만 동작한다고 한 이유는 간단하게 PC에서는 안되기 때문이다. 먼저 마크업을 보자 그냥 뭐 일반적인 리스트이다. 예제를 위해 만들었기 때문에, 클래스도 없고. 걍 막했다. css다. main은 하위 div등을 숨기면서 감싸는 역할이고, div는 실제로 스크롤 없이 동작하게 하려는 오버플로우 스크롤링 이 들어있다. ul은 리스트의 토탈 넓이, li는 일반적인 리스트아이템 같이 작업해주면 된다. 이렇게 할경우 스크립트를 사용하지 않고, 스크롤 효과를 낼 수 있다.
마크업을 할 때에, 일반적인 구조를 포스팅 하려고 한다. 주로 이렇게 한다. 일반적으로 div로 영역을 구분 해놓은 것이다. 보면 왜 section, article 이런거 안쓰냐고? 뭐 써도 된다. 쓴다면 아래와 같이 되겠다. 물론 위의 마크업 같은 모양은, 그냥 보통 하는것이다. 정말 특별한 이유가 없다면, 위의 마크업을 지켜주는게 시멘틱한 마크업을 하는 것이라고 생각한다. 몇가지만 짚고 넘어가보면, 사람들이 많이 헷갈리는 것 중에 하나가, section 과 article 이다. article = 그냥 article 자체만 남아있을때 독립적인가? 라는 부분. 예를들어 포스트나 뉴스나 그런것들을 할때 보통 article을 사용한다. section = 그냥 구분용. 그렇다고 div같은 영역 나누기의 개념이..