Niquelao » 웹로그 아카이브 » CSS 강좌에 또 한 번 스타일을 더하다

» 웹로그 아카이브 » CSS 강좌에 또 한 번의 스타일 손길을 더하다 Niquelao CSS 강좌에 또 한 번의 스타일 손길을 더하다 2009년 11월 11일, Rumoroso 작성 이전 글에서 했던 것처럼( 고급 CSS 강좌에 스타일 입히기 ), 사라고사 CSS 강좌 프레젠테이션에서 사용했던 스타일 몇 가지를 계속 이야기해 보려 한다. 오늘은 아주 짧게. 특정 슬라이드에서 속성 목록을 분류해야 했다. 이 목록은 화면에 세로로 배치하기에는 다소 길어서(같은 슬라이드에 목록을 하나 더 추가하고 싶었으니 더욱 그랬다), 인라인 으로 스타일을 지정하기로 했다. 다시 한번 내 의도는 프레젠테이션 자체를 예시로 활용하는 것이었다(참고로 이 프레젠테이션은 rumoslide 로 만들었는데, 기본적으로 XHTML, CSS, javascript로 구성되어 있다). 스타일시트로 무엇을 할 수 있는지 보여주기 위해서다. 아래에 해당 목록을 첨부한다. 스타일을 적용하지 않은 모습을 볼 수 있도록 이미지 형태로 넣는다(파이어폭스가 기본적으로 적용하는 스타일만 보여준다): 사용된 HTML은 단순하다. 각 항목이 내부에 텍스트를 가진 code 요소로 구성된 목록이다:

• border-collapse
• border-spacing
• caption-side
• color
…
• widows
• word-spacing

…그리고 내가 얻고자 했던 결과(그리고 당연히 얻어낸 결과)는 다음과 같다(역시 스크린샷을 첨부한다): 이 결과를 얻기 위해 사용한 스타일은 다음과 같다: code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } 가장 먼저 한 일은 code 요소에 스타일을 지정해서 나머지 텍스트와 구분되게 하는 것이었다. 이를 위해 폰트 크기, 폰트 패밀리, 색상 을 조정했다. 보다시피 아주 단순하다. 세로로 있던 목록이 나란히 정렬되도록 하기 위해 항목들의 display 속성을 inline 으로 변경했다. 그다음 content 속성( 생성된 콘텐츠 )을 통해 타이포그래픽 쉼표와 공백(”, “)이 나타나게 했다. 이것은 :after 의사 요소에 적용했다. 마지막으로, 이렇게 하면 마지막 항목에도 쉼표가 나타나기 때문에, 해당 항목의 생성된 콘텐츠를 비워두도록 지정했다( content: ’ ’ ). 좋다, 아직 언급하지 않은 부분에 문제가 하나 있다는 게 분명하고, 누군가 알아차렸기를 바란다(이상적으로는 강좌에 참석한 수강생 중 한 명이). 마지막 항목을 선택하기 위해 CSS 3 의 :last-child 의사 클래스를 사용했는데, 이에 대한 지원은 매우 제한적이다. CSS 2.1 선택자만 사용할 수도 있었을 거라고 생각할 것이다. 예를 들어, 각 항목 앞에 콘텐츠를 생성하고(:after 대신 :before 사용) :first-child 로 첫 번째 항목을 선택해서 앞의 쉼표를 제거할 수도 있었다. 왜 그렇게 하지 않았을까?… 이유는 다음과 같다: 항목이 줄의 맨 앞에 위치할 때 쉼표가 각 줄의 시작 부분에 놓이게 되는데, 이는 명백히 잘못된 것이다 . 이를 피하기 위해, 그리고 사용할 브라우저가 이를 지원한다는 것을 알고 있었기에 CSS3를 사용하기로 했다… 알다시피, :last-child 는 브라우저 간에 충분히 보편화되지 않았지만, 적어도 최신 버전에서는 지원된다… 그리고 프레젠테이션에는 완벽하게 잘 맞았다. 이 모든 이야기를 하고 나면 하나의 결론을 얻을 수 있다: CSS가 좋다, 그리고 강좌 프레젠테이션을 예시로 사용할 수 있다는 게 더욱 좋다 . 그렇긴 하지만, 부탁하건대… 더 많은 지원을 갖춘 브라우저와 CSS 3가 빨리 오길 바란다 . 브라우저별 CSS 지원 정도를 자세히 다룬 목록 두 개의 링크를 남긴다: http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html 참고로, 프레젠테이션에서 참지 못하고 CSS 3를 조금 더 사용했다… 당연히 일부 모서리를 둥글게 만들지 않고 넘어갈 수 없었다 . 다음 글에서 이에 대해 이야기하겠다… CSS 강좌에 또 한 번의 스타일 손길을 더하다 카테고리: CSS —> 댓글 2개 Niquelao » 웹로그 아카이브 » CSS 강좌에 또 한 번의 스타일 손길을 더하다를 언급한 트윗 — Topsy.com 2009년 11월 12일 […] 이 글은 Jorge Rumoroso, Jorge Rumoroso가 트위터에서 언급했습니다. Jorge Rumoroso가 말했습니다: #niquelao CSS 강좌에 또 한 번의 스타일 손길을 더하다 http://bit.ly/J7vm9 (영어로 하니 더 멋있어 보이죠, 그렇죠! […] CSS 강좌에 또 한 번의 스타일 손길을 더하다 2009년 11월 12일 […] 전문은 Niquelao에서: CSS 강좌에 또 한 번의 스타일 손길을 더하다 […] RSS 2.0 피드 를 통해 댓글을 팔로우할 수 있다. 또한 자신의 사이트에서 트랙백을 보낼 수도 있다. 이전 글: 고급 CSS 강좌에 스타일 입히기 다음 글: CSS 3로 여러 개의 배경 이미지 사용하기 —> —> —> 이 저작물은 Creative Commons 라이선스 에 따라 이용할 수 있습니다 .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.