선택자

CSS 선택자는 말 그대로 html의 어느 특정 요소를 선택하게 해준다. 그렇게 선택한 요소에 스타일을 적용하여 사용하는 것이다. 선택자의 종류는 여러가지가 있지만, 용어는 실무에서 그다지 쓸모없다. 클래스 선택자(.className{…}), 아이디 선택자(#idName{…}), 전체 선택자(*{…}), 태그 선택자(p{…}) 등 모두가 알고 있고 아무렇지 않게 사용한 것들이 모두 선택자이다. html/css는 분석하여 사용하는 것인데, 남에게 굳이 설명할 이유가 있을까? 잘난척하고 싶은 사람은 정확하게 알고 쓰자. 그저 nth-child를 보고 “이건 선택자라는 것이고, 이러한 상황에서 사용할 수 있다.” 정도만 알아도 훌륭하다. 이번 장에서는 몰라도 잘만 쓰고 있던 선택자 외에 활용도가 높고 이 선택자가 어느 상황에서 어떻게 사용되는지 정확하게 알아보자.

속성 선택자

1.[title] 2.[title*="원문"] 3.[class^="selector"] 4.[src$=".gif"] 5.[class~="on"] 6.[class|="selector"]

• 
• 세종어제 훈민정음
• 나랏말이 중국과 달라
• 문자와 서로 통하지 아니하므로
• 이런 까닭으로 어리석은 백성이 이르고자 하는 바가 있어도
• 마침내 제 뜻을 능히 펴지 못하는 사람이 많다.
• 내가 이를 위해 불쌍히 여겨
• 새로 스물여덟 글자를 만드니
• 사람마다 하여금 쉬이 익혀 날마다 씀에 편안케 하고자 할 따름이다.
•  

<li><img src="/assets/images/cSel_img.jpg" alt="나무위키 훈민정음 헤례본 원문" width="250"></li>
<li><a href="/" title="새창으로 열립니다." target="_blank">세종어제 훈민정음</a></li>
<li class="c_selector-on">나랏말이 중국과 달라</li>
<li class="selector-class on">문자와 서로 통하지 아니하므로</li>
<li>이런 까닭으로 어리석은 백성이 이르고자 하는 바가 있어도</li>
<li class="on">마침내 제 뜻을 능히 펴지 못하는 사람이 많다.</li>
<li class="on-selector">내가 이를 위해 불쌍히 여겨</li>
<li class="selector">새로 스물여덟 글자를 만드니</li>
<li class="selector_2">사람마다 하여금 쉬이 익혀 날마다 씀에 편안케 하고자 할 따름이다.</li>
<li class="c_on_selector"><img src="/assets/images/cSel_good.gif" alt="좋아요"> &nbsp; <img src="/assets/images/cSel_bad.gif" alt="싫어요"></li>

가상요소(의사 개체 )

요소의 특정 부분에 스타일을 적용할 때 사용.

1. ::after (:after) 요소의 끝부분에 콘텐츠 추가
2. ::before (:before) 요소의 시작부분에 콘텐츠 추가
3. ::placeholder input 필드의 힌트 텍스트에 스타일 적용

자세히 알아보기

::before와 ::after의 브라우저 지원범위 : chrome, firefox, opera, safari :before, :after와 ::before,::after의 차이 IE8과 Opera4-6은 : 단일 콜론만 지원하나 최신버전은 :: 이중 콜론을 지원 (최신버전, :after는 구버전)

싱글콜론 ‘:before, :after’ 모던브라우저에서 보이는 이유? 하위브라우저와의 호환성을 보장하기 위해 모던 브라우저에서는 싱글 콜론과 더블콜론 모두 지원. CSS3을 지원하지 않는 IE8은 싱글콜론만 지원.

가상클래스

선택한 요소가 특정 상태여야 만족

:hover = 마우스를 요소에 올리면 파란색으로 배경색이 바뀜 :active = 마우스를 요소에 클릭하면 폰트색이 노랑색으로 바뀜 .hi :not() = .hi가 아닌 span 선택

1.:first-child, first-of-type 2.:last-child, last-of-type 3.:nth-child(n)nth-of-type(n) 4.:-child(n), -of-type(n) 차이점 5.:nth-child(odd) 6.:nth-child(even) 7.:nth-child(n+3) 8.:nth-child(-n+7) 9.:nth-child(n+3):nth-child(-n+7)

content 속성

content는 가짜 속성. HTML 문서에 정보로 포함되지 않은 요소를 CSS에서 새롭게 생성하기 때문이다. content 속성의 종류

/* 다른 값과 조합할 수 없는 키워드 */
content: normal;/*(기본값)*/
content: none;

/* <image> 크기조절 불가능, 가상요소와 함께 사용해야 함*/
p::before {
    content: url('images/01.gif');
}

/* 생성한 값의 대체 텍스트, Level 3 명세에서 추가 */
p::before {
    content: url('images/01.gif') / "This is the alt text";;
}

p::after {
	content: linear-gradient(#e66465, #9198e5);
}


/* <string> 값 문자열 생성 */
content: "prefix";

/* <counter> 값 */
content: counter(chapter_counter);
content: counters(section_counter, ".");

/* HTML 속성값으로 연결하는 attr() */
content: attr(value string);

/* 언어와 요소 위치 기반 키워드 */
content: open-quote;
content: close-quote;
content: no-open-quote;
content: no-close-quote;

/* normal과 none을 제외하면 여러 키워드를 함께 사용할 수 있음 */
content: open-quote chapter_counter;

/* 전역 값 */
content: inherit;
content: initial;
content: unset;

자세히 알아보기

스크린리더에서의 content=”“ IE브라우저를 제외, 모든 스크린리더기에서 읽힌다.

content=”” 에서 (ㅣ) 와 #을 어떻게 읽어줄까? 쓸데 없는 텍스트를 읽어주어 사용자에게 혼돈을 줄 수 있는 이슈 : 가상 요소를 사용하여 특정 정보나, 텍스트를 넣어야 할 때 주의하여 사용

(ㅣ)바

1. PC : JAWS 를 제외한 다른 스크린리더기에서는 읽히지 않음.
2. 모바일 : 모두 지원하며, 결과 음성이 서로 다름.

(#)샵

1. PC :SenseReader 제외한 모든 스크린리더기가 지원합니다. 결과 음성이 서로 다름.
2. 모바일 : 모두 지원하며, 결과음성이 서로 다름.