-
인프런 HTML CSS 문자 선택자 링크 선택자 부정 선택자프로그래밍 연습 2020. 11. 4. 14:48
인프런 HTML CSS 문자 선택자 링크 선택자 부정 선택자
문자 선택자 selection
드래그되어 있는 문자들의 속성을 설정할 수 있다
#content p:first-child::selection { }
콘텐츠에서 p태그에 속하는 첫 번째 요소를 드래그할 때
드래그한 영역이 파란색으로 변하고, 글자색은 노란색으로 변한다.
<style> #content p:first-child::selection { background-color:blue; color:yellow; </style>
<body> <div id="content"> <p> 중소기업 지원업무의 전문성과 효율성을 확보하고 중소기업에 대한 기술, 경영, 인력 등의 종합지원체계를 구축함으로써 중소기업의 경쟁력 제고를 위해 설립된 서울산업진흥원은 중소기업의자생력을 키우고 안정적인 경영여건을 조성하기 위하여 끊임없이 노력하고 있습니다. </p> </div> </body>
first-child
형제 관계에서 첫 번째 자식 요소에만 스타일이 적용된다.
last-child
형제 관계에서 맨 마지막 자식 요소에만 스타일이 적용된다.
nth-child(n)
중복된 태그가 여러개 있을 때 n번째의 특정 태그에만 스타일을 주고자 할 때 사용하는 가상 클래스
nth-of-type(n)
선택자와 타입 둘 다 해당되는 n번째 요소를 선택하고 싶을 때 사용한다.
a::after 문서에서 링크되어 있는 문자를 선택
a태그로 묶인 서울산업진흥원에 걸리는 하이퍼링크 주소를 서울산업진흥원 뒤에 붙여준다.
a태그 뒤에 '-'를 추가하고 해당 a태그가 걸려있는 것에 하이퍼링크 값을 뒤에다 붙여준다.
만약에 ::after를 사용하지 않으면 <a>태그 뒤에 일일히 주소를 붙여넣기 해야 하는 번거로움이 있다.
이런 번거로움을 줄여주기 위해 사용함.
<style> #content a::after { content: ' - ' attr(href); } </style>
<body> <div id="content"> <ul> <li><a href="http://www.sba.seoul.kr" target="_blank">서울산업진흥원</a></li> <li><a href="http://wiz.center" target="_blank">위즈센터</a></li> <li><a href="http://www.yahoo.com" target="_blank">야후</a></li> <li><a href="http://www.google.com" target="_blank">구글</a></li> </ul> </div> </body>
부정 선택자 ::not
나를 제외한 모든 태그에 CSS 속성을 적용
<style> #content li:not(.fa) { background-color:#ffd800; } </style>
<li>태그에서 fa라는 클래스 속성을 제외한 모든 태그에 색을 입힌다.
<body> <div id="content"> <ul> <li><a href="http://www.sba.seoul.kr" target="_blank">서울산업진흥원</a></li> <li class="fa"><a href="http://wiz.center" target="_blank">위즈센터</a></li> <li><a href="http://www.yahoo.com" target="_blank">야후</a></li> <li class="fa"><a href="http://www.google.com" target="_blank">구글</a></li> </ul> </div> </body>
문자 선택자 first-letter, first-line
https://keunsoop.tistory.com/39
참고 사이트 링크
'프로그래밍 연습' 카테고리의 다른 글
인프런 HTML&CSS강좌 CSS 속성-4 font-family, position 속성 (0) 2020.11.14 인프런 HTML&CSS강좌 CSS3 단위 - url() - display 속성 - visibility 속성 - opacity 속성 (0) 2020.11.12 생활코딩 WEB JavaScript 배열과 반복문 (0) 2020.11.04 인프런 HTML CSS 문자 선택자 first-letter, first-line (0) 2020.11.02 생활코딩 JavaScript 비교연산자 데이터타입 조건문 if else (0) 2020.11.02