9강. CSS 기본 4

※ 다음 강좌를 수강하고 내용을 정리한 것입니다.

https://www.inflearn.com/course/html-css-강좌#

실전 HTML & CSS 강좌 - 인프런

 

9-1 문자 선택자

특정 문자 또는 문자열을 선택하여 CSS속성을 설정할 수 있습니다.

#history2:first-letter{}하면 첫번째 문자를 선택하고,

#history2:first-line{}하면 첫번째 줄을 선택합니다.

margin: 0 auto하면 가운데 정렬됩니다.

:와 ::의 혼용 최신 브라우저에서 문제가 없지만, 차이를 알아야 합니다.

cf) brunch.co.kr/@linterpreteur/27

#content p:first-child::selection{ color:yellow; }하면 드래그할 때의 색상을 변경할 수 있습니다.

 

 

9-2 링크 선택자

문서에서 링크(href)되어 있는 문자를 선택하여, CSS속성을 설정할 수 있습니다.

#content a::after{ content : ' - ' attr(href)}하면 a태그 뒤에 -를 추가하고 해당 href를 붙여서 출력

 

 

9-3 부정 선택자

나를 제외한 모든 태그에 CSS속성을 설정할 수 있습니다.

#content li:not(.fa){}하면 li중에 class가 fa가 아닌 애들한테 적용된다.

 

 

github.com/HoYoungChun/piro14/tree/master/%EC%9D%B8%ED%94%84%EB%9F%B0%20%EC%9D%B8%EA%B0%95

HoYoungChun/piro14