웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
CSS 가상으로 요소 추가 본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>가상으로 요소를 추가해보자! 슈도엘리먼트</title>
<style type="text/css">
/* 첫번째 글자 ::first-letter */
.article span,
.article:first-letter, /* CSS2.1 */
.article::first-letter /* CSS3 */ {
color: hotpink;
font-size: 3em;
}
/* 첫번째 라인(줄) ::first-line */
.article:first-line,
.article::first-line {
font-style: italic;
text-decoration: overline;
}
p {
margin-bottom: 30px;
}
::first-letter {
font-size: 3em;
float: left;
margin-right: .3em;
}
</style>
</head>
<body>
<p class="article">mmmg <span>D</span>onec nec justo eget felis facilisis fermentum.
Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
<h3>브라우저 전쟁</h3>
<p>1990년대 3대 주요 브라우저인 모자이크, 넷스케이프, 인터넷 익스플로러는 번갈아 웹 세계를 지배하며
웹의 기본이 될 기술을 구현했습니다. 하지만 브라우저 제조사는 웹 표준화 기구에 속하지 않은 채
폰트, 컬러, 테이블 프레임과 같은 HTML 확장 기술을 개발했습니다.</p>
<p>브라우저 제조사는 경쟁사가 새로운 기술을 소개하면 해당 기술을 역으로 분석해 빈약한 관련 문서와 함께
제각기 다른 방법으로 구현했습니다. 이 후에도 10년 동안 표준화 기구 하나 없이 자바스크립트, DOM과 같은
기술을 발표했습니다. 한편, 이 기간에 웹 개발자들은 제각기 구현된 웹 기술 때문에 혼란에 빠졌고,
새롭게 출시되는 기술을 익히고 사용하는데 필요한 시간을 투자할지 아니면 시굴 습득을 포기할지를
선택해야 하는 고민에 빠졌습니다.</p>
<p>브라우저 제조사간의 경쟁이 날로 심화함에 따라 제조사들은 각자 고유한 기술로 웹 기술을 구현해 나갔고
웹 기술은 제각기 서로 다른 목소리를 내며 조각조각 붕괴될 위기를 맞았습니다. 그리고 이러한 혼돈 속에서
World Wide Web 창시자인, '팀 버너스리 (Tim Berners-Lee)'의 주도 아래 웹과 관련있는 기업, 협회 중심으로
W3C (World Wide Web Consortium)가 설립되었습니다.</p>
</body>
</html>
'css' 카테고리의 다른 글
| 실제 콘텐츠가 없는 CSS 디자인 하기 (0) | 2011.11.11 |
|---|---|
| before, after (0) | 2011.11.11 |
| language 속성 (0) | 2011.11.11 |
| CSS first-child (0) | 2011.11.11 |
| 상속 - Inheritance (0) | 2011.11.11 |