-
CSS - 기초(3) 가상 클래스 / 링크 셀렉터프로그래밍/HTML & CSS 2021. 9. 16.반응형
링크 셀렉터는 말 그대로 링크에 여러가지 속성들을 줄 수 있다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> a:link {color:orange;} a:visited {color:green;} a:hover { font-weight: bold; } a:active { color: blue; } input[type=text]:focus, input[type=password]:focus{ outline: none; border: 1px solid red; } </style> </head> <body> <h3>가상 클래스(Pseudo-classes) : 링크 셀렉터(Link pseudo-classes) </h3> <div> <a href="#">링크</a> | <a href="https://google.com">구글</a> </div> <div> <p> <input type="text"> </p> <p> <input type="password"> </p> <p> <input type="button" value="확인"> </p> </div> </body> </html>- a 태그에 총 4가지의 옵션을 주고 text에는 2가지의 옵션을 줬다.
- a 태그-
a:link = 내가 그 링크를 한번도 방문한 적이 없을 때
a:visited = 내가 그 링크를 한번이라도 방문 했었을때
a:hover = 내가 링크에 마우스를 올렸을때 나타나는 이벤트
a:active = 내가 링크를 누르고 있을때 일어나는 이벤트
- text 태그 -
먼저 input으로 type이 text인 놈과 타입이 password인 애들을 :focus로 초점을 맞춰준다.(텍스트 박스 클릭 했을때)
그리고 이제 뭘 할건지 속성을 주는건데
outline = 크롬은 기본적으로 이 속성이 들어가 있어서 없애줬다.
border = 1픽셀의 빨간 테두리 박스를 만든다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> input:enabled + span {color:blue;} input:disabled {color: tomato;} input:checked + span {color: red;} </style> </head> <body> <h3>가상 클래스(Pseudo-classes) : UI 요소 상태 셀렉터 </h3> <div> <p> <input type="text" value="default"> <span>default</span> </p> <p> <input type="text" readonly="readonly" value="readonly"> <span>readonly</span> </p> <p> <input type="text" disabled="disabled" value="disabled"> <span>disabled</span></p> <p> <input type="checkbox"> <span>선택1</span> </p> <p> <input type="checkbox" checked="checked"> <span>선택2</span> </p> <p> <input type="button" value="확인"> </p> </div> </body> </html>
여기서의 포인트는 input:checked + span {color: red;} 이 부분
체크박스를 선택했을시에 빨갛게 해주는 이벤트
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> p:first-child { color : red; } /* p가 각 부모요소의 첫번째 자식인 경우 */ p:last-child { color:blue; } /* p 부모 자식 중 p가 마지막 자식인 경우 */ div :first-child { background: yellow; } /* div 자식중 첫번째 자식 */ </style> </head> <body> <p> body의 첫번째 자식 p 태그 - 글자색 : red </p> <h3> body의 두번째 자식 h3 태그 </h3> <p> body의 세번째 자식 p 태그 - 글자색 : 기본값(black)</p> <hr> <div> <p> div의 첫번째 자식 p 태그 - 글자색 : red </p> <p> div의 두번째 자식 p 태그 - 글자색 : 기본값(black) </p> <p> div의 마지막 자식 p 태그 - 글자색 : blue </p> </div> <hr> <div> <p> JAVA </p> <p> ORACLE </p> <p> HTML </p> </div> </body> </html>
이건 자식 태그에 영향을 줄 수 있는 애들이다.
여기선 띄어쓰기에 따라서 영향이 달라지니 주의 해야한다.
p:first-child 이렇게 딱 붙어있으면 p가 각 부모 요소의 첫번째의 자식인 경우 이고
div :first-child 이렇게 따옴표 사이에 공백이 있으면 div의 첫번째 자식에게 영향을 주는 것 이다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> ul { list-style: none; padding: 0; } /* 첫번째 요소의 위치는 1부터 시작 */ ul > li:nth-child(1) { font-weight: bold; } /* ul > li:first-child { font-weight: bold; } */ /* ul :first-child { font-weight: bold; } */ /* ul 요소 중 첫번째 li 요소 */ ul > li:nth-child(2n+1) { color:tomato; } /* 홀수번째. 짝수는 2n. n은 0부터 대입하며 계산 */ ul > :nth-last-child(3n) { background: yellow; } </style> </head> <body> <h3> 구조 가상 클래스 </h3> <ul> <li>자바</li> <li>오라클</li> <li>스프링</li> <li>HTML</li> <li>CSS</li> <li>javascript</li> <li>node.js</li> <li>코틀린</li> <li>하둡</li> <li>몽고디비</li> </ul> <hr> <div> <p>자바</p> <p>오라클</p> <p>스프링</p> <p>HTML</p> <p>CSS</p> <p>javascript</p> <p>node.js</p> </div> </body> </html>
:nth-child() 는 요소의 몇번째 n번째 위치를 설정 할 수있다.
ul > li:nth-child(1) = ul > li:first-child = ul :first-child
위 3가지 경우는 모두 같은 결과를 만들어 낸다.
모두 ul의 li중에서 첫번째 놈만 적용 한다는 뜻
ul > li:nth-child(2n+1) = 이건 2n+1은 홀수를 의미한다.
ul > :nth-last-child(3n) = 마지막에서 3번째 마다 를 의미한다.
반응형'프로그래밍 > HTML & CSS' 카테고리의 다른 글
CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기 (0) 2021.09.21 CSS - 기초(4) (0) 2021.09.18 CSS - 기초(2) / 선택자 (0) 2021.09.16 CSS - 상속과 우선순위 (0) 2021.09.16 CSS - 단위 (0) 2021.09.16
