:hover
:focus
:active
호버는
선택자에:hover
a:hover {
background-color:red;
}
.box:hover{
background-color:red;
}
엑티브는
누를때 뭔가 옵션을 주는거임
a:active {
background-color:red;
}
.box:active{
background-color:red;
}
:focus
포커스는
인풋태그에 많이 쓴다.
input:focus {
border-color:red;
}
.box:focus{
border-color:red;
}
팁으로>>>>
input 태그 아웃라인 효과 없애는방법은
input{
outline: none;
box-shadow: none;
}
이렇게 주면 기본 효과 없어짐
그리고
인풋태그에
누를떄는 다른효과 예를들어 다른색깔을 주고,
마우스클릭을 떗을때
다른색갈을 주고싶을떄는,
input:focus {
border-color: #1fb6ff
}
input:active {
border-color: #85d7ff
}
이렇게 주면됨.
중복내용>
가상 클래스와 가상요소
마크업 상에 드러나지않는 ..
사용자 동작에 반응하는 가상클래스
하나씩 따져서 지정할수있는,,
:link
방문하지 않은 링크에 스타일 적용
:visited
방문한 링크에 스타일 적용
:active
웹 요소를 활성화했을 때의 스타일 적용
:hover
웹요소에 마우스 커서를 올려놓을 떄의 스타일 적용
:focus
웹 요소에 초점이 맞추어졌을 때의 스타일 적용
예)
.navi a:link{
color:white;
text-decoration:none;
padding:10px 5px 5px 35px;
}
.navi a:visited{
color:white;
}
.navi a:hover{
color:red;
text-shadow:1px 1px white;
}
.navi a:active{
color:yellow;
text-shadow:1px 0 1px black;
}
주의할것은 순서이다
link -> visited -> hover -> active
이 순서대로 코딩해야한다
않하면 작동을 안할수 있다.
input 폼에서 가상클래스
:enabled
:disabled
요소를 사용할수 있을때와 없을떄의 스타일 지정
:checked
라디오 박스나 체크박스항목을 선택했을 때의 스타일 지정
예)
input:disabled{
background:#ddd;
border:1px #ccc solid;
}
input:checked +span{
color:blue;
}
구조 가상 클래스
:nth-child(n) 와 :nth-last-child(n)
:nth-child(n) 앞에서부터 n번쨰 자식 요소에 스타일 적용
:nth-last-child(n) 뒤에서부터 n번째 자식요소에 스타일 적용
위치를 나타낼때 an+b 처럼 수식을 사용할수도 있음.
이때 n값은 0부터.
div 요소 안에서 세번째 자식요소인 p 요소에 스타일 적용
div p:nth-child(3)
div 요소 안에서 홀수 번쨰로 나타나는 자식 요소인 p요소에 스타일 적용
div p:nth-child(odd), div p:th-child(2n+1)
div요소 안에서 짝수번쨰로 나타나는 자식요소인 p요소에 스타일 적용
div p:nth-child(even) , div p:nth-child(2n+0),
div p:nth-child(2n)
예)
table tr:nth-child(2n+1){
background: ligjtgrey;
color:black;
}
tr:nth-child(3n+1){
background:lightgrey;
}
======================
구조 가상 클래스
:nth-of-type(n) 앞에서부터 n번째 요소에 스타일 적용
:nth-last-of-type(n) 뒤에서부터 n번째 요소에 스타일 적용
:first-child 첫번째 자식 요소스타일 적용
:last-child 마지막 자식 요소에 스타일 적용
예)
ul.navi li:first-child{
border-top-left-radius:1em;
border-bottom-left-radius:1em;
}
ul.navi li:last-child{
border-top-right-radius:1em;
border-bottom-right-radius:1em;
}
예)
p:nth-child(2){
color:blue;
}
p태그의 부모 div에서 자식들 중 두번째 요소에 색상을 적용시켜라
p:nth-of-type(2){
color:red;
}
p태그의 부모 div에서 타입들중 그타입의 두번째의 색상을 적용시켜라
가상요소
::first-line 특정요소의 첫번째 중에 스타일 적용
::first-letter 특정요소의 첫번쨰 글자에 스타일 적용
::before 특정요소의 앞에 지정한 내용을 추가
::after 특정요소의 뒤에 지정한 내용을 추가
예)
.text1::before{
content:"important!!";
color:red;
font-weight:bold;
}
.text2::after{
content:url(http://webguru.dothome.co.kr/images/newwindow.png);
margin-left;10px;
}
