해당 내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다.
대부분의 경우 사용자 인터페이스는 특정 운영체제 및 사용 중인 브라우저에 의존하므로 CSS로 제어할 수 없다.
예를 들면 스크롤바 같은 객체는 제어할 수 없다. 하지만 마우스 포인터와 인용 스타일 같은 외양은 CSS를 통해서도 제어할 수 있다.
추가적으로 CSS에는 특정 대상에 (동적으로 생성된)페이지 콘텐츠를 지정할 수 있는 속성을 몇 가지 제공한다. 예를 들어 모든 장 제목에 'Chapter'라는 단어를 앞에 삽입해야 하는 경우가 있을 수 있다. 보통 웹페이지 콘텐츠는 모두 HTML 코드에 두지만 때로는 추가 콘텐츠를 동적으로 생성하거나 특정 언어에 맞게 콘텐츠를 수정하는 일이 생기기도 한다.
마우스 포인터의 모양 수정
보통 현재 마우스가 위치한 대상에 따라 브라우저가 마우스 포인터의 모양을 결정한다. 예를들어 브라우저가 작업을 진행 중이고 사용자가 응답을 기다릴 때는 마우스 포인터가 타이머로 바뀌면서 사용자가 응답을 기다려야 한다는 것을 나타낸다.
경우에 따라서는 cursor속성을 사용해 이러한 브라우저의 기본 동작을 재정의 하고 직접 포인터의 모습을 지정하는 게 좋을 때도 있다.
/*
파이어폭스, 사파리, 오페라, 크롬에서는 이미지 파일의 url을 지정해 CUR,ANI,GIF,PNG,JPEG 이미지를 사용할 수 있다.
인터넷 익스플로러에서는 CUR와 ANI만 지원한다.
포인터의 정확한 모습은 운영체제 및 사용 중인 웹 브라우저에 따라 달라진다.
*/
a { cursor: help }
h1 {cursor : url(./imgs/cursor.png) 20 20, crosshair; }CSS를 사용한 콘텐츠 추가
검색 엔진에 최적화된 결과 및 접근성을 고려해 보통 모든 콘텐츠는 웹 페이지의 <body> 엘리먼트 내에 두는게 제일 좋다. 콘텐츠를 동적으로 생성하면 웹 크롤러(web crawler)뿐 아니라 각종 스크린 리더기에서 텍스트를 볼 수 없게 된다.
하지만 때로는 검색인덱스에 도움이 되지 않는(또는 방해가 될 수 있는) 반복 콘텐츠를 보여줘야 하는 경우도 있다.
콘텐츠를 추가하려면 텍스트 문자열, 이미지나 음성파일 URL, 카운터, 인용, 기타 페이지에 보여줄 어트리뷰트 값을 지정할 수 있는 content속성을 사용하면 된다.
- 동적 콘텐츠 정의
/*
장 제목에 이미지(bullet.png)와 Chapter글자 및 카운터를 .toc 클래스가 사용된 h2태그 앞에 삽입하는 예시.
아래 예시에서는 브라우저에게 카운트 방식을 알려주고있지 않아 전부 0으로 뜬다.
*/
.toc h2:before { content: url(../imgs/bullet.png)'Chapter' counter(chapterNum) '. ';}
카운터 적용 방식 지정
브라우저는 자동으로 숫자가 매겨진 리스트에 1부터 시작해 숫자를 늘려가면서 일련번호를 지정할 수 있다.
CSS에서는 content 속성의 counter값을 사용해 여러가지 카운터 리스트를 설정할 수 있다. counter-reset속성을 사용하면 카운터의 초기값을 설정할 수 있고 counter-increment속성을 사용하면 특정 값만큼 카운터를 올릴 수 있다.
/*
숫자번호를 지정한 리스트의 부모엘리먼트로 사용할 선택자의 CSS규칙을 설정한다.(.top)
이때 리스트로는 ol(순서 리스트) 태그를 사용할 수 있다.
*/
.top { counter-reset: chapterNum 0; }
/*
counter-increment 속성을 선언 영역에 추가하고 카운터 식별자 이름을 입력한다.
기본값은 1이지만 증가시키고 싶은 만큼 숫자를 입력한다.
*/
.toc h2:before { content: url(../imgs/bullet.png)'Chapter' counter(chapterNum) '. ';
counter-increment : chapterNum 1;}
/*
counter-reset은 접근성을 저해할 수 있으므로 주의해야한다.
*/
#chapter4 .continued {
counter-reset : chapterNum 4;}
인용 스타일 지정
HTML에서는 <q>...</q>태그를 사용하면 브라우저의 기본 인용 부호가 지정된 텍스트 앞뒤로 사용된다. CSS를 활용하면 quotes속성을 통해 인용 부호로 사용할 기호를 정확히 지정할 수 있다.
/*
영어의 표준 작은 따옴표나 큰 따옴표 기호안에 열림 및 닫힘 인용 부호 값을 설정한다.
공백 다음에 두 번째 레벨 인용에 사용할 또 다른 인용 그룹(인용 부호 내에 사용할 또 다른 인용 부호)을
추가한다.
인용 부호가 제대로 동작하려면 실제 인용 태그(<q>)를 사용해 HTML문서에 인용임을 나타내야 한다.
*/
*{
quotes: '<<' '>>' '<' '>';
}
'CSS' 카테고리의 다른 글
| 13. 박스 속성 (2) (0) | 2021.11.18 |
|---|---|
| 12. 박스 속성 (1) (0) | 2021.11.17 |
| 10. 리스트와 테이블 속성 (0) | 2021.11.15 |
| 09. 색상과 배경 속성(2) (0) | 2021.11.10 |
| 08. 색상과 배경 속성(1) (0) | 2021.09.13 |
