코딩공부하면서 영어 공부도 같이 하고 있다 개이득!!!
pseudo라는 뜻이 가짜의, 인체하는 이라고 한다.
예를 들어 pseduo-friend 라고 하면 친구인척 하는 이라는 뜻!
그런 의미에서 수~도우 클래스라고 하면 클래스인척 하는 애들을 말하나보다..
검색해본 결과 가상클래스라고도 하고 의사클래스라고도 하는듯.
흠...근데 강의에서 배웠던게 클래스인척?하는건 아닌거같았는데?
찾아본 정의는 아래와 같다.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
출처: MDN
음... 특별한 상태를 명시할때 사용한다고 하는데 도대체 무슨 말일까...
li:first-child {
font-weight: bold;
}
li:last-child {
font-style: italic;
}
li:nth-child(even) {
/* color: red; */
}
article p:last-child {
color: red;
}선택자:의사클래스이름 {속성: 속성값;}
이런 식으로 쓴다고 하는데...
first-child가 리스트 중에서 첫번째를 말하는거구
last-child는 리스트중 마지막 애를 말하는거...
이걸 써주면 여러 리스트중 첫번째인거 다 적용되고
마지막에 있는거 다 적용되는 장점이 있다.
manually하게 안하고 자동으로 리스트에서 첫번째 있는것 찾아주기 위해
pseudo 클래스를 쓴다.
이걸 안쓰면
<li class="first-li">The opening tag</li>이런식으로 적용해주고싶은 리스트에 일일히 class이름을 적어줘야 한다.
하이퍼링크 스타일링 할때
그냥
a{
color: red;
}이런식으로 하면 a태그 있는데가 빨간색으로 변하기는 하는데
href가 없어도 빨간색으로 변하게 된다.
pseudo class를 이용해서
a:link {
color: #1098ad;
}
이렇게 하면 링크가 포함된 곳만 컬러가 적용되게 된다!
- 동적 의사 클래스(dynamic pseudo-classes)
- :link
- :visited
- :hover
- :active
동적 의사 클래스라고 이렇게 네개가 있는데
실제로 코드게 적용한 케이스는 밑에 있다.
a:link {
color: #1098ad;
text-decoration: none;
}
a:visited {
/* color: #777; */
color: #1098ad;
}
a:hover {
color: orangered;
font-weight: bold;
text-decoration: underline orangered;
}
a:active {
background-color: black;
font-style: italic;
}
첫번째는 링크에 text-decoration: none;이라고 해서
링크 밑줄을 사라지게 해줬고
visited저건 방문한 사이트... 방문하면 색깔 달라지게 하기??아마도?
흠 이건 뭔가 확실하지 않아서 이거 쓰고 다시 찾아보자.
hover저건 마우스가 링크 텍스트 위에 걸쳐있을 때 변하는 모습을 보여주고
마지막으로 active저거는 마우스 클릭할때 변하는 모습을 보여준다!
