첫 글자의 작은 트릭

저자：Eve Cole 업데이트 시간：2010-03-19 16:24:49

OL이 정렬된 목록을 정의할 때 list-style-position:inside를 지정하지 않으면 텍스트와 선행 문자가 들여쓰기됩니다.

하지만 OL에서 정의한 목록 유형에는 제한이 있을 수 있습니다. 예를 들어 한자 "하나, 둘, 셋"을 정의할 수 없는 경우 이러한 문자를 수동으로 입력해야 하는데 이번에는 텍스트와 문자가 함께 연결됩니다.

[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

이때 첫 글자 의사 클래스를 사용하여 다음을 수행할 수 있습니다.

코드 상자 실행
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns=" http://www.w3.org/1999/xhtml ">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>첫 글자</title>
<스타일 유형="텍스트/css">
본문{글꼴 크기:12px;너비:600px;여백:2em 자동;}
ol.list { 목록 스타일:없음 }
ol.list li:첫 글자 { margin-left:-2em;color:blue;font-weight:bold;}
</style>
</head>
<본문>
<올>
<li>원래는 Box Model Acid Test로 알려져 있으며 브라우저를 테스트하는 데 사용되는 웹페이지입니다. 1998년 10월에 개발된 이 버전은 초기 브라우저, 특히 Cascading Style Sheets 1.0에 대한 브라우저 지원과의 호환성에 대한 중요한 벤치마크가 되었습니다. 금속 조각의 품질을 신속하고 시각적으로 측정하기 위해 산성 테스트를 사용하는 것과 마찬가지로 웹 산성 테스트의 목표는 브라우저가 웹 표준을 준수하는지 여부를 명확하게 표시할 수 있는 방법을 제공하는 것입니다. </li>
<li>이 버전은 HTML, CSS 2.0 및 PNG 이미지[1] 표준 지원에 대한 포괄적인 테스트를 위해 웹 표준 프로젝트에서 설계되었습니다. </li>
<li>2008년 3월 3일에 공식적으로 출시되었으며 테스트 초점은 ECMAScript, DOM 레벨 3, 미디어 쿼리 및 데이터: URL[3]에 있습니다. 브라우저로 이 테스트 웹페이지를 열면 페이지에 계속해서 기능이 로드되고 [4] 테스트 상황에 따라 총점 100점으로 점수가 부여됩니다.</li>
</ol>
<시간 />
<ol 클래스="목록">
<li>1. 원래는 박스모델 애시드 테스트(Box Model Acid Test)로 알려져 있으며, 브라우저를 테스트하는 데 사용되는 웹페이지입니다. 1998년 10월에 개발된 이 버전은 초기 브라우저, 특히 Cascading Style Sheets 1.0에 대한 브라우저 지원과의 호환성에 대한 중요한 벤치마크가 되었습니다. 금속 조각의 품질을 신속하고 시각적으로 측정하기 위해 산성 테스트를 사용하는 것과 마찬가지로 웹 산성 테스트의 목표는 브라우저가 웹 표준을 준수하는지 여부를 명확하게 표시할 수 있는 방법을 제공하는 것입니다. </li>
<li>2. 이 버전은 HTML, CSS 2.0 및 PNG 이미지 [1] 표준을 지원하는 포괄적인 테스트를 위해 웹 표준 프로젝트에서 설계되었습니다. </li>
<li>3. 2008년 3월 3일에 공식적으로 출시되었으며 테스트 초점은 ECMAScript, DOM 레벨 3, 미디어 쿼리 및 데이터: URL[3]입니다. 브라우저로 이 테스트 웹페이지를 열면 페이지에 계속해서 기능이 로드되고 [4] 테스트 상황에 따라 총점 100점으로 점수가 부여됩니다.</li>
</ol>
<시간 />
<ol 클래스="목록">
<li>1. 원래는 박스모델 애시드 테스트(Box Model Acid Test)로 알려져 있으며, 브라우저를 테스트하는 데 사용되는 웹페이지입니다. 1998년 10월에 개발된 이 버전은 초기 브라우저, 특히 Cascading Style Sheets 1.0에 대한 브라우저 지원과의 호환성에 대한 중요한 벤치마크가 되었습니다. 금속 조각의 품질을 신속하고 시각적으로 측정하기 위해 산성 테스트를 사용하는 것과 마찬가지로 웹 산성 테스트의 목표는 브라우저가 웹 표준을 준수하는지 여부를 명확하게 표시할 수 있는 방법을 제공하는 것입니다. </li>
<li>2. 이 버전은 HTML, CSS 2.0 및 PNG 이미지 [1] 표준을 지원하는 포괄적인 테스트를 위해 웹 표준 프로젝트에서 설계되었습니다. </li>
<li>3. 2008년 3월 3일에 공식적으로 출시되었으며 테스트 초점은 ECMAScript, DOM 레벨 3, 미디어 쿼리 및 데이터: URL[3]입니다. 브라우저로 이 테스트 웹페이지를 열면 페이지에 계속해서 기능이 로드되고 [4] 테스트 상황에 따라 총점 100점으로 점수가 부여됩니다.</li>
</ol>
</body>
</html>

[Ctrl+A 모든 팁 선택: 먼저 코드의 일부를 수정한 후 실행을 누를 수 있습니다.]

이번에는 선두 문자가 텍스트와 일정 거리를 유지하고 더 많은 스타일을 제어할 수 있습니다.
다만, 주인공 뒤의 쉼표의 스타일은 조절할 수 없는데, 배경이미지를 설정하여 대체할 수는 없는지 궁금합니다.
간단한 테스트 결과 첫 글자 의사 클래스의 배경을 제어하는 것이 목록 스타일 이미지를 제어하는 것만큼 혼란스러워서 폐기되었습니다.

또한 브라우저마다 선행 문자 옆의 기호를 다르게 처리합니다. Safari가 설치되어 있지 않기 때문에 테스트하지 않았습니다.

암호:

렌더링 결과:

IE8, FF3 및 Opera는 동일하게 작동합니다. Chrome은 왼쪽의 기호만 처리하는 반면 IE6과 7은 첫 번째 문자만 처리합니다.